一、教讲清背景

在设计系统的程个楚建设中，组件化是组件提升效率与保持一致性的核心手段。过去很多设计师习惯用 Sketch 来进行组件搭建 ，设计思路但随着团队协作规模的保姆步骤扩大 、交付场景的教讲清复杂化，Sketch 在多端适配 、程个楚跨文件协作 、组件动态主题管理等方面逐渐显露出不足，设计思路对比这两年在聚光灯下的保姆步骤另一款设计软件Figma  ，其在组件化设计上的教讲清优势更加明显 ：

1. 组件具备更强的嵌套与变体能力
   ，能高效应对复杂交互和状态切换。程个楚
2. 借助变量和模式，组件设计稿可以模拟主题切换  。设计思路

因此，使用 Figma 搭建组件，不仅仅是提升了设计的复用率，还大大提升了组件编辑效率 ，降低后续的管理维护成本。接下来本文将围绕Figma 搭建组件的思路展开
，从能力介绍 、结构划分、设计库DPL逐步拆解如何高效构建一个可复用、易维护的设计系统
。

二、Figma的特有能力「变量系统」

1. 变量系统

组件参数化可以理解为是一组变量数据，本质上就是把「设计属性」参数化 ，抽离成独立的可复用数据源 ，然后在不同的UI元素中引用 。

目前Figma内的变量类型包括：颜色/数值/字符串/布尔变量 ，借助这些变量的映射，通过规划多层级的Token进行层层调用，可以在组件的搭建
 、后续修改维护成本大大降低。

我们对比下Sketch和Figma在颜色调用上的区别：

Sketch ：通过图层样式或颜色变量进行封装，定义后可以在填充/描边/文本颜色等属性里直接调用 ，但它本质是一个「色值案例」的概念没有多层级关系，如果想要做多层级的映射关系「某个变量依赖另一个变量」是完全无法做到的。

Figma：直接使用色值封装 ，本质上是数据，支持「变量引用变量」，可以绑定到任何调用颜色的属性上，同时支持多层级传递。

以下图为例 ，常规组件封装以单一色值对应组件的颜色 ，一对一的关系，或者再进一步，封装颜色为实例，组件调用封装颜色，但因为不支持多层级，当toast的组件icon颜色需要变更时 ，就需要新增一个颜色，或者对应关系进行修改，这种处理单一组件影响不大，但当有多种状态时（不同尺寸、状态
、类型）的工作量是激增的 ，而在变量映射中，无论是修改单/多个，仅需要把调用的关系节点进行单次修改就可以进行批量替换。

三 、组件库核心要素之一「色彩」

最早在美间的业务组件搭建中 
，对于色彩的理论调研我们总结了一些结论，其中一个关键的概念
：可感知访问性 。目前市面中组件库搭建使用的两大主流色彩模型HSL 、HSB ， 最大的缺点就是存在感官亮度不一致的问题 ，即同等饱和度、亮度的条件下，不同色相的感官亮度存在差异  。

引用 ：在 HSL 色彩空间中，调整色相 H 展示从HSL(0deg, 100%, 50%)到HSL(360deg, 100%, 50%)的渐变条 ，即是设计师选择色相时的「彩虹条」

由于人眼的视觉感知存在非均匀性，不同波长的色彩对三种视锥细胞的刺激强度并不相同，因此我们会觉得彩虹带上的某些颜色更明亮 ，而另一些则相对暗淡，去掉饱和度后可以更直观地看出在黄绿色区间更亮，而在蓝色区间较暗。

由于各个色相的感知亮度不均匀，可能发生非预期的变化 ，与同一个背景上的紫色文字相比，同样 HSL 亮度的黄色文字很难看清。

引用：在 HSL 色彩模型中，颜色的明度越接近 0% 或 100% ，饱和度的效果就会越弱 —— 在 50% 的亮度时，同样的饱和度看起来比在 90% 时更加鲜艳。

同样在 HSB 色彩模型中等亮度分量在感知上不均匀，难以评估色彩可访问性。当 HSB 色相偏移时  ，感知亮度也会发生非预期的变化（亥姆霍兹-科尔劳施效应、阿布尼效应） 。

如果基于有问题的模型去制定的色彩体系，这会导致组件使用不完善的色彩对比 ，内容对比度在某些情况下会不易浏览阅读，即不符合WCAG对比度模型（在对比度检验规则上同样未考虑感知亮度的因素）或者更先进的APCA模型，而解决上述的问题就需要使用可感知访问性的色彩模型，即OKLCH色彩空间模型「国际上为了解决感官亮度不一致的问题，CIE（国际照明委员会）在 1976 年定义了新的色彩规则 ，有了CIELAB色彩模型，后续又衍生了CIEHSL 
、CIEHSB等等 ，不过CIE系列模型在色彩感知上还有一些问题，后续又不断优化算法，有了OK系列的色彩模型，感兴趣可以自行查阅相关资料了解色彩空间的衍变历史」 。

四、组件搭建思路「嵌套」

了解了Figma的核心能力，以及组件的色彩规则制定后，就要规划组件结构的关系
，这其中的关键是对组件嵌套关系进行梳理 。通过对页面的结构化拆解，会发现不同类型的容器存在共性 ，即大多都是由标题区、内容区、页尾/按钮区等组成，而不同区域的元素又是各种组件组成 。

通过有序组合这些小组件 ，构建出更高层级的复合组件 ，高级的复合组件又组成了页面
，这样的方式不仅有助于简化组件库的结构，也提升了整个系统的灵活性与复用性。小组件的独立性让维护更具可控性，大幅降低后期迭代与修改的成本，同时每层组件都可被上一级调用
，且其变体随层级抬升统一继承与展示 。可以让设计具备清晰结构、可复用、易扩展 、一致性强，并且与开发思维保持对齐
，最终提升设计系统的可维护性与协作效率。

原子组件

1. 最小UI单元，无法再拆分（如按钮、单选框、输入框等）
   ，依赖设计tokens（颜色、字号
   、间距、图标等）构建，以保证风格统一且可复用
   。
2. 在Figma中为基础组件并作为上层组件构建的素材
   。

子组件

1. 可嵌套由多个原子组件构成的组合单元 ，形成的布局模块 ，例如弹窗的按钮区域、标题区、内容区等；表单字段组合（标题 + 输入框 + 错误提示）等。
2. 在Figma中使用组件嵌套嵌入原子组件，并可被上层组件调用 。

父组件

1. 独立可用的组件块 ，用子组件与原子组件构成具体功能组件。例如如弹窗组件、图片预览组件等完整模块，能单独使用或配置参数（尺寸、状态、变体） 。

业务组件

1. 使用父组件 、子组件  、原子组件组合形成完整业务界面或组合部件。例如完整的集成表单、页面片段 、模块化页面。

五、案例解析

以弹窗组件为例 ，在Sketch中需要把不同状态
，类型都要穷举出来进行封装，当某些元素需要修改时，调用该元素的组件就需要逐一排查，无论封装还是后续维护的成本都很高

而在Figma中 ，仅仅需要几个变体类型 ，就可以完成全部内容形式的组合调用
，我们可以通过图示演示实现过程

以弹窗为例，按钮变体合集作为原子组件被上级区域组件调用 ，不同的区域组件又被嵌套组成了弹窗组件
，整个弹窗组件就可以通过变体选项控制调用目标组件形态 ，不计算按钮组件的多种变化，仅通过标题区变体2个 
，按钮区变体6个，就可以组成2*6=12种组合，如果再设置其他例如尺寸 、状态 、类型等维度的参数控制，可以演变出上百种组合，在Figma中仅需要按照结构化组件维度封装关键子组件，搭配组件嵌套和变体配置就可以实现。

如弹窗标题区、内容区、按钮区分别对应3、4 、5种样式 ，在Sketch需要封装的个数就是3*4*5=60个 ，在Figma仅需3+4+5=12个 ，其工作量成倍减少，而使用结构化的封装好处还包括后续优化 ，也只需更新最小节点的组件即可，调用其组件的上层组件会自动覆盖更新。

以上就是使用Figma进行组件搭建的思路拆解，可以总结为“组合式的模块化设计”，通过引用关系实现组件的积木化搭建，让设计系统更具复用性、扩展性和一致性 。其次无论是从效率 、协作
，还是与开发的衔接来看 ，Figma在组件搭建上的优势都是十分巨大的。它不仅提供了更强大的嵌套与变体能力 ，还通过变量与模式让设计稿具备了“动态系统”的特性，大大节约设计在重复性工作中投入的时间，去投入到更有价值的工作中去 。

作者：群核科技用户体验设计