需借助Figma Variables功能实现设计系统统一管理与主题切换：创建DesignTokens变量集，定义颜色、间距、布尔等基础变量；通过语义化绑定替代硬编码；用条件变量（如bg-surface）响应isDarkMode布尔值动态切换主题；批量更新布尔值即可实时刷新全局样式；最后导出JSON等格式供开发集成。
如果您在Figma中希望统一管理设计系统中的颜色、间距、圆角等可复用属性，并实现深色/浅色主题一键切换，则需借助Figma Variables功能。以下是具体操作步骤：
一、创建变量集并定义基础变量
变量集是变量的容器，用于组织和分类变量。必须先创建变量集，才能添加颜色、数字、布尔等类型变量。
1、点击左侧面板底部的Variables图标（或通过菜单栏File > Project settings > Variables进入）。
2、点击+ Add variable set，命名为DesignTokens。
3、在该变量集中，点击+ Add variable，依次创建以下变量：
• 类型选Color，名称填primary-500，值设为#4F46E5；
• 类型选Number，名称填spacing-xs，值设为4；
• 类型选Boolean，名称填isDarkMode，值设为false。
二、使用语义化变量引用替代硬编码值
Figma支持在组件、图层、文本样式等处直接绑定变量，而非手动输入十六进制色值或像素数值，确保全局一致性与可维护性。
1、选中一个矩形图层，打开右侧Fill面板，点击颜色取色器旁的=按钮。
2、在弹出面板中展开DesignTokens变量集，选择primary-500变量。
3、选中文本图层，在Spacing区域点击=按钮，绑定spacing-xs变量作为行高或字间距值。
4、对所有需响应主题变化的填充、描边、不透明度等属性，均采用相同方式绑定对应变量。
三、建立条件变量实现主题切换逻辑
通过布尔变量（如isDarkMode）驱动颜色变量的动态取值，使同一变量名在不同状态下返回不同颜色值，从而实现主题切换。
1、在DesignTokens变量集中，新增一个Color类型变量，命名为bg-surface。
2、点击该变量右侧的Edit values，选择Conditional模式。
3、添加两个分支：
• 条件：当isDarkMode为true时，值设为#1E1E1E；
• 条件：当isDarkMode为false时，值设为#FFFFFF。
4、将所有背景图层的填充绑定至bg-surface变量，而非固定色值。
四、批量更新变量值以切换整体主题
无需逐个修改图层属性，只需更改顶层布尔变量值，所有绑定其条件变量的图层将自动刷新渲染结果。
1、回到Variables面板，找到isDarkMode变量。
2、点击其当前值（如false），在下拉菜单中切换为true。
3、观察画布中所有绑定bg-surface、text-primary等条件变量的图层，颜色实时更新为深色模式对应值。
4、若需快速对比两种模式，可复制当前页面，分别将isDarkMode设为true和false，并标注页面标题。
五、导出变量供开发使用并同步命名规范
变量不仅服务于设计师，还可生成JSON、CSS、Swift等格式代码，供前端工程师直接集成，前提是变量命名遵循语义化与层级约定。
1、点击Variables面板右上角Export按钮。
2、选择导出格式为JSON (Design Tokens)，确认包含所有已启用变量集。
3、检查导出内容中变量路径是否符合BEM式命名，例如color.background.surface或spacing.size.xs；如未匹配，需返回重命名变量为color-background-surface形式。
4、将导出文件交付开发团队，并说明isDarkMode变量需由应用运行时控制，触发CSS自定义属性重计算。
