Figma 组件与变体：从堆图层到可维护

用 Figma 画图容易，维护难。一个按钮改了颜色，要在二十个页面里手动改一遍——这是没用组件的典型症状。组件和变体就是解决这个问题的。

先分清组件和变体

组件（Component）是可复用的基础单元，比如按钮、输入框、卡片。变体（Variant）是同一个组件的不同状态，比如按钮的默认/悬停/禁用、尺寸的大/中/小。

把状态做成变体，而不是复制多个组件，好处是切换方便、属性统一。一个按钮组件带 3 种状态 × 3 种尺寸 = 9 个变体，但对外只是一个"按钮"。

怎么组织变体属性

属性要精简。一个按钮不需要"颜色=蓝/红/绿/灰"四个值全开，通常用 Type=Primary/Secondary/Ghost 加 State=Default/Hover/Disabled 就够了。颜色由 Type 推导，不要单独再开一个颜色属性。

原则：属性描述语义，不描述外观。"次要按钮"比"灰色按钮"更好，因为以后换配色时不用改变量名。

嵌套组件

卡片里放按钮、列表项里放图标，这些都用嵌套组件。好处是改按钮样式，所有卡片自动更新。注意嵌套层级不要超过三层，太深了改起来也晕。

Auto Layout 是基础

所有组件内部用 Auto Layout，间距用 8 的倍数，这样组件在不同内容长度下不会崩。文字换行、按钮变宽、列表增减，都能自适应。

命名规范

组件名用 类别/子类/状态，比如 Button/Primary/Default。这样在资源面板里按类别自动分组，找起来快。不要用"按钮2""最终版"这种名字。

什么时候不该做组件

只用一次的元素不用做成组件。组件化是有成本的（维护、同步），一次性的大图、特殊的活动页模块，直接画更省事。判断标准：这个东西会不会在别处再用一次以上。

最后：组件库要有人维护。三个人各自改组件，很快就乱。约定好"谁能改主组件、改之前先通知"，比任何规范都重要。