新手必看!5个步骤深入解析Figma组件设计理念

一、背景

在构建设计系统时，组件化是提升效率和保持一致性的关键方法。许多设计师过去习惯使用Sketch进行组件开发，但随着团队规模的扩大和交付场景的复杂性增加，Sketch在多端适配、跨文件协作以及动态主题管理等方面逐渐显露出局限性。相比之下，近年来受到广泛关注的Figma在组件化设计方面展现出更为明显的优势：

• 组件具有更强的嵌套和变体功能，能够有效应对复杂的交互和状态切换。
• 借助变量和样式，设计稿能够模拟主题的切换。

因此，使用Figma构建组件不仅提升了设计的复用性，还显著提高了组件的编辑效率，降低了后续的管理和维护成本。接下来，本文将围绕Figma构建组件的思路进行探讨，从能力介绍、结构划分到设计库DPL，逐步阐述如何高效地构建一个可复用且易于维护的设计系统。

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

1. 变量系统

组件的参数化可以看作是一组变量数据，实际上就是将「设计属性」参数化，提取为独立的可复用数据源，然后在不同的UI元素中进行引用。

目前，Figma支持的变量类型包括颜色、数值、字符串和布尔变量，通过这些变量的映射，并规划多层级的Token，可以有效降低组件的构建及后续修改和维护的成本。

我们可以比较一下Sketch和Figma在颜色调用上的不同之处：

• Sketch：通过图层样式或颜色变量进行封装，定义后可以在填充、描边和文本颜色等属性中直接调用。然而，它本质上是一个「色值案例」的概念，并没有多层级的关系。如果想要建立多层级的映射关系（例如某个变量依赖于另一个变量），这是完全不可能实现的。
• Figma：直接使用色值进行封装，实际上是将其视为数据，支持「变量引用变量」，可以绑定到所有需要调用颜色的属性上，并且支持多层级传递。

以下图为例，常规组件封装仅将单一色值与组件颜色对应，形成一对一的关系。若进一步封装颜色为实例，组件则调用封装的颜色，但由于不支持多层级，当toast组件中的图标颜色需要改变时，就必须添加新的颜色或修改对应关系。这种处理对单一组件的影响不大，但在有多种状态（如不同尺寸、状态和类型）时，工作量将大幅增加。而在变量映射中，无论是修改单个还是多个，仅需对调用关系的节点进行一次修改，即可实现批量替换。

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

在美间的业务组件搭建初期，我们对色彩进行了理论研究，并总结出一些重要结论，其中一个关键概念是可感知的可访问性。目前市场上构建组件库的两大主流色彩模型是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=12种不同的形式。如果再添加其他参数维度，比如尺寸、状态和类型等，可以产生上百种组合。在Figma中，只需按照结构化组件的方式封装关键子组件，再结合组件嵌套和变体配置，就能轻松实现这些组合。

例如，弹窗的标题区、内容区和按钮区分别有3、4和5种样式。在Sketch中需要封装的组件数量为3×4×5=60个，而在Figma中仅需封装3+4+5=12个，这大大减少了工作量。此外，使用结构化封装的方式还有助于后续的优化，只需更新最小节点的组件，调用该组件的上层组件会自动更新并覆盖变化。

以上便是利用Figma进行组件搭建的思路解析，可以概括为“组合式模块化设计”。通过建立引用关系，实现组件的积木化搭建，使设计系统拥有更强的复用性、扩展性和一致性。此外，从效率、协作性及与开发的对接角度来看，Figma在组件搭建方面具有显著优势。它不仅提供了更强大的嵌套和变体功能，还通过变量和模式赋予设计稿“动态系统”的特性，显著减少了设计师在重复性工作上的时间投入，使他们可以专注于更具价值的任务。

Togga终身赞助

打赏 收藏 链接