保姆级教程！5个步骤讲清楚Figma组件设计思路-行行出状元网

一、教讲清背景

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

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

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

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

原子组件

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

子组件

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

父组件

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

业务组件

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

五、案例解析

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

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

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

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

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

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