Design Tokens Plugin 使用教程

Design Tokens Plugin 使用教程

design-tokens-plugin Support end of life! Delivering consistent Design System. A Sketch plugin that exports Design Tokens to JSON format. You can export colors, typography, icons and utilis. A must-have tool for design system project. 项目地址: https://gitcode.com/gh_mirrors/de/design-tokens-plugin

1. 项目介绍

Design Tokens Plugin 是一个 Sketch 插件，旨在将设计令牌（Design Tokens）导出为 JSON 格式。设计令牌是设计系统中的核心元素，用于保持设计的一致性。该插件支持导出颜色、字体、图标和工具等设计令牌，是设计系统项目中的必备工具。

2. 项目快速启动

2.1 安装插件

1. 下载 design-tokens.sketchplugin.zip 文件。
2. 解压缩文件。
3. 双击 design-tokens.sketchplugin 文件进行安装。

2.2 使用插件

1. 打开 Sketch 并创建或打开一个包含设计令牌的文件。
2. 选择插件菜单中的 Design Tokens 选项。
3. 选择要导出的令牌类型（颜色、字体、图标、工具）。
4. 插件将自动生成相应的 JSON 文件并导出。

2.3 示例代码

以下是一个简单的 Sketch 文件结构示例，用于导出颜色令牌：

// Sketch 文件结构
- colors
  - color/primary
  - color/secondary
  - color/background

导出后的 JSON 文件内容：

{
  "colors": {
    "primary": {
      "value": "#ffd59e",
      "type": "color"
    },
    "secondary": {
      "value": "#a1a1a1",
      "type": "color"
    },
    "background": {
      "value": "#ffffff",
      "type": "color"
    }
  }
}

3. 应用案例和最佳实践

3.1 应用案例

Design Tokens Plugin 广泛应用于设计系统项目中，特别是在需要保持设计一致性的团队中。例如，一个跨平台的应用程序可能需要在不同的平台上使用相同的设计令牌，以确保视觉风格的一致性。

3.2 最佳实践

• 单一来源：将所有设计令牌集中在一个 Sketch 文件中，确保所有团队成员使用相同的令牌。
• 命名规范：使用一致的命名规范来命名令牌，便于团队成员理解和使用。
• 自动化导出：定期导出设计令牌并同步到开发环境中，确保设计和开发的一致性。

4. 典型生态项目

4.1 Tokens Studio

Tokens Studio 是一个用于 Figma 的设计令牌管理插件，提供了类似的功能，支持设计令牌的创建、管理和导出。它是一个强大的工具，适用于需要跨平台同步设计令牌的团队。

4.2 Atlassian Design Tokens

Atlassian Design Tokens 是一个用于 Atlassian 设计系统的插件，支持在 Figma 中使用设计令牌。它简化了在设计中查找和应用 Atlassian 设计令牌的过程，确保设计的一致性。

通过这些工具，设计团队可以更高效地管理和使用设计令牌，确保设计系统的一致性和可维护性。

design-tokens-plugin Support end of life! Delivering consistent Design System. A Sketch plugin that exports Design Tokens to JSON format. You can export colors, typography, icons and utilis. A must-have tool for design system project. 项目地址: https://gitcode.com/gh_mirrors/de/design-tokens-plugin