应系统化定义design token以构建统一设计语言体系：一、创建语义化颜色样式token；二、定义字体样式token；三、配置间距与尺寸token；四、启用dsm设计系统管理模式；五、用tokens studio插件导出json交付开发。
如果您在Pixso中需要构建统一可复用的设计语言体系，但尚未建立结构化的颜色、字体、间距等基础规范，则可能是由于Design Token未被系统化定义与管理。以下是建立完整设计Token体系的具体步骤：
一、创建颜色样式Token
颜色Token是Design Token体系中最基础且高频使用的变量类型，通过语义化命名与集中管理，可确保品牌色、状态色、中性色等在所有画板中保持一致，并支持一键切换主题模式。所有颜色样式将自动同步至团队资源库，供成员实时调用。
1、打开Pixso设计文件，选中任意一个使用目标色值的图形或文字图层。
2、在右侧属性面板中点击“填充”或“描边”旁的“样式”图标（小方块带加号）。
3、在弹出的“颜色样式”面板中点击“+”按钮，输入语义化名称，例如color-primary-default对应主品牌色、color-text-secondary对应次要文字色。
4、确认色值后点击“创建样式”，该颜色即成为可复用的Token。
5、重复上述操作，为所有规范中定义的颜色（如状态色：success、warning、error；中性灰阶：gray-100至gray-900）逐一创建样式。
二、定义字体样式Token
字体Token涵盖字族、字号、字重、行高、字间距等组合参数，以文本样式形式封装，避免在不同文本框中重复设置，保障标题、正文、辅助文案等层级关系严格遵循设计规范。
1、使用文字工具（快捷键T）在画布上创建一段示例文字，按规范设置其字体、大小、颜色、行高及字间距。
2、选中该文字，在右侧属性面板点击“文本”区域的“样式”图标。
3、在“文本样式”弹窗中点击“+”，输入语义化名称，例如text-heading-lg表示大标题、text-body-md表示中等尺寸正文。
4、点击“创建样式”，完成字体Token注册。
5、对所有规范中要求的文本层级（包括按钮文字、标签、提示语等）分别创建对应文本样式Token。
三、配置间距与尺寸Token
间距Token用于统一控制组件内边距、元素间外边距、栅格列宽、卡片圆角等数值型属性，其核心价值在于实现“改一处、全链路响应”，尤其适用于响应式布局与多主题适配场景。
1、在Pixso中新建一个空白画板，使用矩形工具（R）绘制多个参考块，分别标注8px、12px、16px、24px、32px、48px等常用间距值。
2、依次选中各矩形，在右侧属性面板中点击“尺寸”或“圆角”旁的“样式”图标。
3、在弹出样式面板中点击“+”，输入命名，例如space-unit-xs对应8px、radius-card-lg对应16px圆角。
4、保存后，这些尺寸与间距即可作为Token应用于任何支持样式的属性字段（如自动布局间距、组件内边距、阴影偏移等）。
四、启用DSM设计系统管理模式
DSM功能将分散的颜色、字体、间距等样式Token整合为结构化设计系统，内置别名映射机制，使设计端命名与开发端代码变量自动对齐，消除交付时的手动翻译误差，真正实现设计即代码的协同闭环。
1、点击顶部菜单栏【项目】→【设置】→【设计系统】，开启“设计系统管理模式”。
2、在DSM面板中，点击“导入样式”，系统将自动识别当前文件中所有已创建的颜色、文本、效果样式，并归类为Token列表。
3、为每个Token设置工程别名，例如将color-primary-default映射为primary.color.default，供Tokens Studio插件导出JSON时直接采用。
4、点击“发布版本”，生成可共享的设计系统快照，团队成员可通过资源库订阅并自动同步更新。
五、使用Tokens Studio插件交付开发
Tokens Studio是Pixso原生集成的Design Token协作插件，支持将本地定义的样式Token一键转换为标准JSON格式，兼容主流前端框架（如React、Vue）的Token解析器，大幅降低开发接入成本。
1、在Pixso编辑器右侧面板中找到并启用“Tokens Studio”插件。
2、插件自动加载当前文件中所有已定义的Token，按颜色、字体、间距、圆角等维度分组显示。
3、点击“导出”，选择输出格式为JSON (Design Token Spec v3.0)，并勾选“包含别名映射”选项。
4、下载生成的tokens.json文件，交付开发团队；开发人员可将其直接导入Style Dictionary或Theo等工具生成CSS变量、SCSS mixin或JS模块。
