# Design Token Dock

本 figma 插件用于导出 figma 样式为 JSON 格式。支持导出方式：

直接复制
下载保存为 .json 文件
发起 Github PR

Figma Plugin Link 🔗 (opens new window)

# 背景

Design Token 是什么？

设计师通常在进行网页设计前，会定义一套设计系统 (opens new window)。通常设计系统包含色盘、分级别的字体字号行高、边距规范、符号 icon 等等。在后续的设计中，设计稿会遵循设计系统的规范，从而保持一致性。

例 figma ui (opens new window) 设计系统中的色盘定义:

web 开发者在开发时，会将设计系统定义为 css 变量、scss 变量、js 变量等等形式进行引用。这些根据设计系统定义的一些程序变量可以理解为 Design Token。

例定义在css变量中的 design-token:
```
:root {
  --theme-blue: #18a0fb;
  --theme-purple: #7b61ff;
  --sm-font-size: 14px;
  --md-font-size: 16px;
  --lg-font-size: 20px;
}
```
Design Token & Figma

开发者手动编写 Design Token 的过程是非常枯燥的，且容易出错。如果可以从设计师使用的设计工具中直接导出 token，是省事又省力的。正好 figma 支持用户定义 style (opens new window)，我就编写了这个插件，能够将 figma 样式自动导出 Design Token JSON 文件。

除了通常的导出文件之外，本插件还支持发起 github pull request。可以写一些 github action 脚本，来实现 design token npm 包发布的自动化:
```
on:
pull_request:
  types: [ closed ]

jobs:
  merge_job:
    # 监控 pull request merged 事件，执行 action 任务
    if: github.event.pull_request.merged == true
    steps:
    - run: echo PR ${{ github.event.number }} has been merged
    # body 中存放了 design token 数据
    - run: echo PR Issue body '${{ github.event.pull_request.body }}'
    # .
```
具体例子可以参考: adui design token (opens new window)。该 design token 库通过本插件实现了直接发布 design token npm 包。