MUI设计系统Figma变量中颜色Token与HEX代码混用的原因咨询

MUI的设计系统在颜色管理上采用了分层语义化+基础色支撑的逻辑，混合使用Token和HEX代码主要是以下几个原因：

• 分层设计的必然结果
  MUI的颜色系统分为三层：基础色层（原始色值，比如主色、中性色的HEX）、语义Token层（比如primary.main、error.light）、组件专用Token层。基础色用HEX定义是作为整个颜色系统的源头，语义Token则是对这些基础色的语义化映射——比如你不用记#1976d2是什么，只要用primary.main就知道是主色的标准值，修改基础HEX时所有关联Token会自动同步，维护效率更高。

• 语义化复用 vs 特殊场景需求
  Token的核心作用是语义化复用，适合全局通用的颜色（比如状态色、主题色），团队成员看到Token名称就能明确用途，避免重复定义和认知偏差。而直接用HEX的情况，通常是一些非通用的、一次性的特殊颜色（比如某个定制组件的专属配色），或者是还没被纳入全局Token体系的临时色值。

• 设计与开发的工具链对齐
  MUI的Figma变量是和代码端的Token体系打通的：Figma里的基础HEX色值和代码里的theme.palette.primary.main对应的原始值完全一致，语义Token则直接映射到这些基础色。这样设计稿和代码的颜色体系能无缝同步，减少设计开发的对接成本。

• 过渡或遗留情况
  如果是较早版本的MUI Figma资源，可能存在部分颜色还没完全迁移到Token体系的情况；或者是用户自定义修改时，直接用HEX添加了非标准配色，没有转化为语义Token。

内容的提问来源于stack exchange，提问作者Charlie C.