type
status
date
slug
summary
tags
category
icon
password
Style Dictionary是一个基于 Node.js 平台的工具，使用 JavaScript 编写，用于构建和生成跨平台的设计系统的样式和标准，可以通过 JSON 或 YAML 配置文件生成不同平台的样式文件。
我们可以把Style Dictionary理解成一个构建工具，把设计给出的Tokens转化成平台适用的代码（例如Android下color、dimens资源）。
安装
安装前需要先安装
nvm、Node.js和npm（npm是Node.js平台的包管理器），执行下面命令分别安装nvm和Node.js，npm会附带其中：方式一：安装CLI版本的Style Dictionary：
CLI版本通过在命令行执行下面的执行构建：
方式二：以开发依赖的方式安装到项目目录中：
在package.json中增加如下脚本：
在命令行中通过下面命令执行style Dictionary构建：
后面的举例都是基于开发依赖这种安装方式。
简单使用
例子
Style Dictionary提供了一些例子给我们参考，根据这些列子可以帮我们快速上手。
- 需要先安装CLI版本的Style Dictionary
- 新建目录，执行下面指令：
输出的文件保留引用层级👇
Style Dictionary默认输出会把所有的引用层级去掉，并转换成实际的引用值，如果我们想保留这些引用层级，可以通过在config.json->platforms->对应的平台(例如android)下增加下面的配置来实现：
例如转换下面格式tokens：
转换结果为：
如结果所示，
color_custom和color_custom2的引用层级都保留了下来。通过file-filter将资源输出到不同文件
Style Dictionary默认的配置是会把同category的资源输出到同一个文件，以上面的base_color和my_color为例，如果想把base_color.json转换成base_color.xml，把my_color.json转换成my_color.xml以便跟好的管理资源，则可以通过自定义file-filter实现。
- 在config.json→platforms→对应的平台(例如android)→files下增加配置：
Android其他资源(例如dimens)也是类似的逻辑，自行配置即可。
但是对于iOS默认的转换器，以base→color→xxx这种以base而不是以color开头的命名层级是无法正常转换的，需要自己实现transformer进行转换，下面是具体方法。
- 在config.json同级目录下新建build.js文件，内容如下：
- 修改config.json，在iOS平台下的transforms中增加我们自定义的transformer：
最后在命令行执行命令
node build.js，重新生成。自定义输出文件的文件头信息
跟自定义transformer类似，也是通过StyleDictionary.registerXXX实现。
- 在build.js中增加自定义FileHeader
- 修改config.json，在对应platforms下的Options中指定使用自定义的FileHeader：
最后在命令行执行命令
node build.js，重新生成。注意事项
Tokens命名规范
- 颜色
- 普通size，如radius、padding
- 字体size
注意：Style Dictionary中所有预置的Transformer都是基于上面这些命名规则来匹配的，如果不是遵循上面的规则(例如前面的base_color_xxx)，在转换的的时候可能需要自行实现Transformer进行转换。
资料
- Style Dictionary官方文档
- Token Studio for Figma相关
figma-plugin
tokens-studio • Updated Dec 16, 2024
- 作者:miracleshed
- 链接:http://miracleshed.site/article/e924bbe8-9439-4cb0-b0b6-e2d1ba8ef196
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。