在设计系统的程个楚建设中，组件化是组件提升效率与保持一致性的核心手段 。过去很多设计师习惯用 Sketch 来进行组件搭建 ，设计思路但随着团队协作规模的保姆步骤扩大 、交付场景的教讲清复杂化 ，Sketch 在多端适配 、程个楚跨文件协作 、组件动态主题管理等方面逐渐显露出不足 ，设计思路对比这两年在聚光灯下的保姆步骤另一款设计软件Figma ，其在组件化设计上的教讲清优势更加明显 ：
因此 ，使用 Figma 搭建组件 ，不仅仅是提升了设计的复用率 ，还大大提升了组件编辑效率 ，降低后续的管理维护成本。接下来本文将围绕Figma 搭建组件的思路展开 ，从能力介绍 、结构划分、设计库DPL逐步拆解如何高效构建一个可复用 、易维护的设计系统 。
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的核心能力 ，以及组件的色彩规则制定后 ，就要规划组件结构的关系 ，这其中的关键是对组件嵌套关系进行梳理。通过对页面的结构化拆解 ，会发现不同类型的容器存在共性 ，即大多都是由标题区 、内容区 、页尾/按钮区等组成 ，而不同区域的元素又是各种组件组成。
通过有序组合这些小组件 ，构建出更高层级的复合组件 ，高级的复合组件又组成了页面 ，这样的方式不仅有助于简化组件库的结构，也提升了整个系统的灵活性与复用性 。小组件的独立性让维护更具可控性 ，大幅降低后期迭代与修改的成本 ，同时每层组件都可被上一级调用，且其变体随层级抬升统一继承与展示 。可以让设计具备清晰结构、可复用 、易扩展 、一致性强，并且与开发思维保持对齐 ，最终提升设计系统的可维护性与协作效率。
原子组件
子组件
父组件
业务组件
以弹窗组件为例，在Sketch中需要把不同状态 ，类型都要穷举出来进行封装 ，当某些元素需要修改时 ，调用该元素的组件就需要逐一排查 ，无论封装还是后续维护的成本都很高
而在Figma中 ，仅仅需要几个变体类型 ，就可以完成全部内容形式的组合调用 ，我们可以通过图示演示实现过程
以弹窗为例，按钮变体合集作为原子组件被上级区域组件调用 ，不同的区域组件又被嵌套组成了弹窗组件 ，整个弹窗组件就可以通过变体选项控制调用目标组件形态 ，不计算按钮组件的多种变化 ，仅通过标题区变体2个 ，按钮区变体6个，就可以组成2*6=12种组合 ，如果再设置其他例如尺寸 、状态 、类型等维度的参数控制 ，可以演变出上百种组合 ，在Figma中仅需要按照结构化组件维度封装关键子组件 ，搭配组件嵌套和变体配置就可以实现 。
如弹窗标题区、内容区 、按钮区分别对应3 、4 、5种样式 ，在Sketch需要封装的个数就是3*4*5=60个 ，在Figma仅需3+4+5=12个 ，其工作量成倍减少 ，而使用结构化的封装好处还包括后续优化 ，也只需更新最小节点的组件即可 ，调用其组件的上层组件会自动覆盖更新 。
以上就是使用Figma进行组件搭建的思路拆解 ，可以总结为“组合式的模块化设计” ，通过引用关系实现组件的积木化搭建 ，让设计系统更具复用性 、扩展性和一致性 。其次无论是从效率、协作 ，还是与开发的衔接来看 ，Figma在组件搭建上的优势都是十分巨大的 。它不仅提供了更强大的嵌套与变体能力，还通过变量与模式让设计稿具备了“动态系统”的特性 ，大大节约设计在重复性工作中投入的时间 ，去投入到更有价值的工作中去 。
作者 ：群核科技用户体验设计
关注微信
