标准化design token

前端

标准化Design Token

Design Token是一种变量的高级形式，但是是一种与平台无关的变量。对于在多个不兼容的代码库中（如 Kotlin 用于 Android、Swift UI 用于 macOS、iOS、watchOS 和 iPadOS、React Native 和 Flutter 用于原生应用、CSS/Sass 用于 Web 和 HTML 电子邮件）工作的大型公司，以及在多个团队中工作的设计师（使用多种工具如 Figma、Adobe Illustrator 等），Design Token的概念始终听起来很棒。直到最近，尽管它们的名称是Design Token，但Design Token不能在 Figma 等设计工具中使用，这限制了它们的使用。

Design Token的概念和术语起源于 Salesforce 的设计系统团队。他们开源了一个名为 Theo 的工具。为了使Design Token具有平台无关性，它们以一种格式存在（通常是 YAML 或 JSON），并被转换为一系列其他格式（例如CSS自定义属性）。亚马逊发布了一个类似的开源项目叫做 Style Dictionary，成为处理Design Token的最流行工具。

还有另一个开源工具叫做 Diez，但现在完全未被维护。

它们在一些大型公司中得到了采用。然而，没有一种标准的方法来编写这些Token。为了让不同的 CLI 工具、设计工具和文档工具能够以可互操作的方式理解您的令牌，它们需要遵循指定的标准。

Design Token社区组织（DTCG）成立了以标准化Design Token。Style Dictionary 的创作者 Danny Banks 是规范编辑之一。在 Salesforce 的Theo上工作的 Kaelig Deloumeau-Prigent 是联合主席之一。Diez 的前贡献者也做出了贡献。Design Token社区组织还包括来自以下方面的代表：

  • Adobe、Figma、Framer 和 Sketch
  • 像 Atlassian、Google、Shopify 和 Microsoft 这样的大公司。
  • 像 InVision、Supernova、Zeplin、zeroheight、Knapsack 和 Chromatic 这样的设计系统工具

DTCG 是一个 W3C 社区组织，但该标准不是 W3C 标准。

编写Token

Design Token规范是为易读性而设计的。Token通常由开发人员手动编写和编辑。希望将来大多数设计工具都能够导出、更新和同步Design Token。

重要提示：规范仍然是草案，可能会发生变化。

Design Token被定义为 JSON。您可以使用.tokens扩展名或 .tokens.json 扩展名命名文件。

Token需要一个名称和一个值：

1
2
3
4
5
6
{
  "primary": {
    "$value": "#CA3618",
    "$type": "color"
  }
}

Token还需要一个类型。可以在个别令牌级别设置类型，如上所示，但更容易将令牌分组在一起，并在组级别定义类型：

1
2
3
4
5
6
7
8
9
10
11
{
    "colors": {
    "$type": "color",
    "primary": {
        "$value": "#CA3618"
        },
    "secondary": {
        "$value": "#109F53"
        }
    }
}

目前，规范要求颜色只能指定为十六进制值。然而，您使用诸如 Style Dictionary 这样的转换工具从令牌生成的输出可以是任何您想要的格式 —— RGB、HSL 等。

标准定义的不同类型包括 color、dimension、fontWeight、duration、fontFamily、number 和 cubicBezier。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
    "small": {
        "$value": "8px",
        "$type": "dimension"
    },
    "bold": {
        "$value": 500,
        "$type": "fontWeight"
    },
    "fast": {
        "$value": "200ms",
        "$type": "duration"
    },
    "sans": {
        "$value": "Inter",
        "$type": "fontFamily"
    },
    "line-height-normal": {
        "$value": 1.5,
        "$type": "number"
    },
    "entrance-easing": {
        "$value": [0, 0, 0.5, 1],
        "$type": "cubicBezier"
    }
}

Token还可以选择包含描述：

1
2
3
4
5
6
7
{
    "error": {
        "$value": "#CA3618",
        "$type": "color",
        "$description": "Use this color exclusively for error states"
    }
}

如果您将手动编写和编辑Design Token，那么阅读完整的规范是值得的，因为这只是一个简要介绍。

您可以使用Design Token验证器检查您的令牌是否正确编写。

翻译Design Token

现在我们有了一些Token，我们需要一种方法将它们转换为开发人员可以在其代码中使用的形式。这可以是 Web 项目的CSS自定义属性或 Sass 变量，也可以是使用 CSS-in-JS 的项目的JavaScript变量。到目前为止，Style Dictionary 是最受欢迎的选择，并且仍在积极维护（与 Theo 和 Diez 不同）。

如果您专门使用 Tailwind，则可以选择完全跳过此步骤。您可以将JSON导入到您的tailwind.config.js文件中。就我个人而言，作为 Tailwind 用户，我更喜欢在Tailwind配置文件中使用 CSS 自定义属性来指定值，而不是使用 JSON。

Style Dictionary 尚未支持标准Design Token语法

已实现对Design Token标准支持的开源翻译工具是：

如果您是一名工程师，更愿意自行构建自己的东西，那么有一个名为 Universal Design Tokens 的早期项目，它是一套用于解析和操作Design Token的 JavaScript 库套件。

还有一款名为 Specify 的工具，由Design Token规范的贡献者之一 Louis Chenais 共同创立。它不仅是一个 CLI 工具，还将自己定位为“世界上第一个设计数据平台，帮助组织高效管理其品牌身份”。

我目前选择了设计令牌 CLI（存储库在这里）。我使用了一个 GitHub Action 来运行设计令牌 CLI，将令牌转换为 CSS 自定义属性（也称为 CSS 变量）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
name: transform
on: [push]
    
jobs:
  build:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js environment
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      # Transform the tokens
      - run: npx design-tokens-cli transform
      - uses: stefanzweifel/git-auto-commit-action@v4
        with:
          commit_message: Update CSS output

另一个 GitHub Action，在 GitHub Packages 注册表上发布输出作为 NPM 包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
name: Package
    
on:
  workflow_run:
    workflows: ["transform"]
    types:
      - completed
    
jobs:
  publish-gpr:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          registry-url: https://npm.pkg.github.com/
      - run: npm ci
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

然后，可以通过命令行将包安装到任何前端项目中。

在 Figma 中使用design tokens

2023 年 6 月，Figma 推出了用于定义颜色、字符串、数字和布尔值的变量。对其他类型的变量的支持将在今年晚些时候陆续推出。从语义上讲，变量和token之间的差异非常微妙。Figma 的产品经理 Jacob Miller 表示：“一旦 W3C 规范被批准，我们将支持原生导入/导出 JSON Token”。Miller 还表示，对 JSON Token的完整原生支持受到主题支持的限制，这在design tokens规范中仍然是一个悬而未决的问题。目前，您可以使用插件 API 导入 JSON tokens。对于企业版用户，还提供了 REST API。

Figma Tokens 插件曾经是在 Figma 中使用Tokens的首选选项。如果可以的话，最好等待原生支持。Figma Tokens 最近更名为 Tokens Studio，并且正在“从大家所熟知的Figma插件逐渐发展为一个功能强大的design token管理和设计系统自动化平台”。

结论

否过度工程化？这里有两个非常简单的任务：

  • 在 .css 文件中定义一些 CSS 变量
  • 在 Adobe Creative Cloud 和 Figma 中创建可重用的共享样式

如果您的问题是Web前端开发团队之间的不一致性，您可以发布一个 CSS 变量的 NPM 包，并完全绕过 JSON。对于小团队来说，design token增加了不必要的复杂性。对于大型组织或服务于多个平台的团队来说，应用它们可能是值得的。

涅槃快乐热爱生活，追求技术

个人简介。