UD5工具箱
什么是设计令牌（Design Tokens），为什么需要使用它们？
设计令牌是设计系统中的最小可复用单元，用于以编程方式存储视觉设计属性的值，如颜色、字体、间距、阴影等。它们通常以键值对的形式保存在JSON文件中。设计令牌的核心价值在于确保设计决策在不同平台、不同技术栈之间保持一致性。当设计师在Figma中定义了一套色彩系统后，设计令牌可以将这些值直接传递给前端代码，避免手动转换带来的错误和不一致。使用设计令牌还能显著提高设计系统的可维护性，当品牌色彩发生变化时，只需更新JSON文件中的值，所有平台的变量即可同步更新。
SCSS变量和CSS自定义属性（CSS变量）有什么区别？我应该选择哪种格式？
SCSS变量是Sass预处理器的变量机制，以$符号前缀声明，需要通过Sass编译器处理后才能被浏览器识别。SCSS变量的优势在于支持作用域控制、条件逻辑和数学运算等高级特性，适合在编译阶段进行复杂样式计算。CSS自定义属性是W3C标准的原生CSS变量机制，以--符号前缀声明，无需任何预处理器即可在现代浏览器中使用。CSS变量的核心优势在于支持运行时动态修改，可以通过JavaScript在运行时更改变量值，适用于主题切换、深色模式等场景。如果您的项目使用Sass预处理器且不需要运行时动态修改，建议选择SCSS变量格式。如果需要运行时动态性或不想引入预处理器依赖，建议选择CSS自定义属性格式。
应该如何组织设计令牌的JSON结构？有哪些最佳实践？
组织设计令牌的JSON结构时，建议遵循以下最佳实践。首先，按功能分类组织顶层键，例如colors、typography、spacing、shadows、borders等。其次，保持合理的嵌套深度，通常建议控制在2到4层之间，过深的嵌套会增加变量名的长度和复杂度。第三，使用语义化的键名，例如primary-color比c1更有意义。第四，确保键名不包含特殊字符和空格，以保证命名风格转换的正确性。第五，为每个令牌提供有意义的值，避免使用魔法数字。常见的组织模式包括按品牌类别（brand、secondary、neutral）、按功能状态（success、warning、error）和按层级关系（base、light、dark）进行分组。
工具支持哪些命名风格，应该如何根据项目需求选择？
设计令牌导出器支持三种主流命名风格：kebab-case（连字符分隔）、camelCase（驼峰命名）和snake_case（下划线分隔）。kebab-case是CSS社区中最广泛使用的命名风格，变量名如primary-color，适用于使用CSS模块、BEM方法论或Tailwind CSS的项目。camelCase是JavaScript社区的标准命名风格，变量名如primaryColor，适用于React、Vue等现代框架的主题配置文件，尤其当变量需要通过JavaScript对象的点号或方括号语法访问时。snake_case在某些特定技术栈（如Ruby on Rails的CSS组织方式）中有使用，变量名如primary_color。选择命名风格时，应以项目现有的编码规范和团队约定为准，保持一致性是最重要的原则。
设计令牌导出器支持哪些输出格式？各格式分别适用于什么场景？
设计令牌导出器支持三种输出格式。SCSS变量格式（$var-name: value;）适用于使用Sass/SCSS预处理器的项目，生成的变量可以在.scss文件中直接使用，支持Sass的变量插值、数学运算和条件逻辑。CSS自定义属性格式（--var-name: value;）适用于原生CSS项目或需要运行时动态修改主题的场景，变量值可以在浏览器运行时通过JavaScript修改，适合实现深色模式切换等功能。JavaScript ES6常量格式（export const varName = "value";）适用于现代JavaScript框架项目，生成的常量可以以ES模块方式import到组件中使用，适合在React、Vue、Angular等框架中构建主题系统。
如何将生成的变量集成到现有的项目构建流程中？
集成方式取决于您选择的输出格式。对于SCSS变量，将下载的.scss文件放入项目的样式目录中，在其他SCSS文件中通过@import 'path/tokens';语句引入，之后即可在所有样式代码中使用定义的变量。对于CSS自定义属性，将.css文件通过HTML的link标签引入，或者在CSS中使用@import 'path/tokens.css';规则引入。对于JavaScript常量，将.js文件放入项目的配置目录中，在需要使用变量的组件文件中通过import { primaryColor } from './tokens';语句引入。如果使用Webpack、Vite等构建工具，确保构建配置支持对应格式的文件解析。
工具如何处理JSON中的深层嵌套对象？生成的变量名会是什么样子？
设计令牌导出器内置了递归展平引擎，能够自动处理任意深度的JSON嵌套对象。工具会递归遍历整个JSON树，将每一层的键名按顺序连接起来，使用连字符（kebab-case）、驼峰命名（camelCase）或下划线（snake_case）作为分隔符，生成扁平化的变量名。例如，对于JSON结构{ "colors": { "primary": { "base": "#007bff" } } }，在kebab-case风格下会生成--colors-primary-base: #007bff;（CSS格式）。无论嵌套深度是两层还是五层，工具都能正确处理。建议保持合理的嵌套深度（2到4层），以确保变量名的可读性和可维护性。
设计令牌导出器是否支持数组值和特殊值类型？
设计令牌导出器主要处理字符串值和数字值类型的令牌。对于颜色值（如#007bff、rgb(0,123,255)、hsl(211,100%,50%)）、字号值（如14px、1rem）、间距值（如16px、1em）等常见设计属性值，工具均能正确输出。对于数组类型的值，工具会将其转换为对应的格式表示。对于对象类型的值（如rgba对象或包含多个属性的复合值），工具会递归处理对象的每个属性。在使用时，建议确保JSON中的每个叶子节点值都是可以直接赋值给CSS属性或变量的简单值类型，以获得最佳的输出效果。
设计令牌和设计系统之间是什么关系？导出器在设计系统工作流中扮演什么角色？
设计令牌是设计系统的基础构建块，设计系统是建立在设计令牌之上的完整规范体系。设计系统定义了产品中所有视觉和交互元素的标准，而设计令牌则以可编程的方式存储这些标准的具体数值。设计令牌导出器在设计系统工作流中扮演着"翻译器"的角色：它将设计师定义的JSON格式设计令牌翻译为开发者可以在代码中直接使用的变量格式。这个翻译过程是设计系统从"设计定义"走向"代码实现"的关键环节。通过使用导出器，设计团队和开发团队可以基于同一份JSON源文件协作，确保设计意图被准确无误地转化为代码实现。