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