一、教讲清背景

在设计系统的程个楚建设中，组件化是组件提升效率与保持一致性的核心手段 。过去很多设计师习惯用 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在组件搭建上的优势都是十分巨大的。它不仅提供了更强大的嵌套与变体能力 ，还通过变量与模式让设计稿具备了“动态系统”的特性，大大节约设计在重复性工作中投入的时间，去投入到更有价值的工作中去。

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