其实原理很简单，理解了你也能设计出支持多主题的产品👇
🧠 核心原理：样式和语义分离
传统做法 ❌： 按钮背景色 = 2563EB（直接写死颜色值）
正确做法 ✅： 按钮背景色 = color-primary（引用语义化 Token）
然后不同主题下，color-primary 对应不同的值：
默认主题：color-primary → 2563EB（蓝色）
深色主题：color-primary → 60A5FA（亮蓝色）
暖色主题：color-primary → F59E0B（橙色）
🎯 Figma 里怎么操作？
① 用 Variables（变量）功能创建色彩变量 ② 创建多个 Mode（模式）：Light / Dark / 其他主题 ③ 每个 Mode 下给同一个变量赋不同的值 ④ 组件引用变量而不是直接颜色值 ⑤ 切换 Mode 时，所有组件自动换色
📌 设计师需要做的：
确保每个颜色都有语义化命名
为每个主题提供完整的颜色映射表
检查每个主题下的对比度是否达标
和开发约定好 Token 名称保持一致
理解了这个原理，你做的设计稿就不是"死图"，而是一套灵活的"设计系统"💪
