用途:Style Dictionary 用于把设计令牌(design tokens)从单一来源转换为各平台所需格式,是面向 Web、iOS、Android 等多平台设计系统的令牌转换工具。
主要能力:支持将令牌输出为 CSS 自定义属性、SCSS 变量、JavaScript/TypeScript、iOS Swift、Android XML 等格式;支持令牌引用(别名)、多主题与多品牌配置、自定义转换(transform)和自定义格式(format);可集成到构建流水线,并提供 watch 模式。
使用方式:先安装 npm install style-dictionary(或 yarn add style-dictionary),在 tokens/ 目录放置源 JSON,创建 style-dictionary.config.js 配置 source 与 platforms,再运行 style-dictionary build。可在 package.json 添加 "tokens:build": "style-dictionary build" 等脚本。令牌支持 DTCG 格式($value/$type)与经典格式(value/type)。
适用场景:新建多平台设计系统、将 Figma 令牌转为代码、从单一源生成 CSS/SCSS/Swift/XML、添加自定义转换或格式、把令牌接入构建流程。
限制:资料未提供收费、价格、平台兼容范围与效果数据;使用前需确认令牌引用无循环、路径匹配正确、转换组与目标平台一致,并注意清理旧构建产物。