组件式设计

在《Figma 的基本理念》一节中我们提到了设计系统，它可以帮助我们更加高效地系统化地设计复杂的产品，而设计系统最重要的一部分就是组件化。

在设计时，经常会遇到各种重复的模式，小到一个按钮，大到整个页面。将这些重复出现的模式做成模板，每次需要使用时直接复用，这种方式就是组件式设计。组件不仅可以帮我们提高设计效率，还能保证多人协作设计的一致性。

组件的由来

Figma 的组件功能其实也是来自于开发领域，并且受到 Brad Frost 提出的原子化设计（Atomic Design）方法影响。

组件式开发

现在比较受欢迎的前端界面开发框架 React 和 Vue，都支持开发者将常用模块封装成组件，在各个页面上复用，就像搭积木一样。组件式开发让界面开发工作变得简单，且易于维护。Figma 的组件在很多地方借鉴了开发组件的理念，比如主组件（Main component）和实例组件（Instance）的继承关系，变体组件（Variants）的属性等，和开发组件有着异曲同工之妙。

图片来自 Vue 官方文档

原子化设计

原子化设计（Atomic Design）是由 Brad Frost 提出的一种界面设计方法，用物质的化学构成来类比界面的构成，最小单位是原子，原子组成分子，分子组成有机体，最终组成一个个页面。通过这种视角去看待界面设计，可以让设计师由小及大，保证每一层的设计都稳定之后再去组合构建上一层。

图片来自 Brad Frost 的博客《Atomic Design》

Figma 受到原子化设计方法的影响，支持组件嵌套，因此，我们可以先创建原子组件，再在它们的基础上创建分子组件，形成复杂组件。这种方法可以让我们的组件结构分明，更加具有系统性。不过需要注意，原子化设计方法中的五个层级我们并非严格遵守，它的主要意思就是分层构建界面，重要的是理解它而不是生搬硬套……