用Figma构建一份原子化设计系统

无涯丫

广州/设计爱好者/6年前/7176浏览

版权

用Figma构建一份原子化设计系统

无涯丫

用Figma构建设计组件库

最近因为工作需要，用Figma整理了一份设计系统，也学习到很多。在这里把在整个过程中遇到的一些问题和查阅的资料做一个总结。

1、什么是原子化设计理论

首先，设计系统（Design System）总的来说就是一个可复用的组件库，包括颜色、字体、图层样式、图标等元素，可以帮助团队高效地输出拥有一致的设计风格的产品。构建设计系统的方法主要有两种，一种是穷举式，一种是原子化构建。这篇文章主要介绍原子化构建，因为这种方式在运用起来是比较灵活高效的。

原子化设计理论是由一位国外的设计师Brad Frost提出的，原理就是万事万物都是原子构成的，那么在设计中，我们也可以将设计组件中最小组成元素提取出来，供其他设计组件复用，比如颜色、字体样式、图层样式等。而原子构成分子，分子构成组织…… 对应到我们的设计系统便是，比如分子是：按钮、图标等，组织是弹出框、菜单部件、表格等，模板就是原型图，而页面对应的就是视觉输出稿了。当然了，这样一一去对应显得很生搬硬套，在实际应用中，我们要根据我们的产品的特点来做调整。

可以参考这篇文章https://www.figma.com/blog/creating-atomic-components-in-figma/

2、如何设计原子化设计系统

在构建一个设计系统的时候，有三个要素是特别重要的，一是如何提取设计元素和设计组件，二是分类，也就是结构，三是命名。这关系到设计系统的易用性和可拓展性，在文章后面也会提到。在自己要构建一个设计系统的时候，我们不要吝啬于去参考已经成熟的设计系统。

对于不同的设计工具，建立设计系统的具体方式会有所不同，但原理是相似的，下面我介绍的是用Figma建立的设计系统，以Liquid Design System为例。这是我觉得设计得比较全面的一个原子化设计系统了，在实际应用中我们可以根据自身产品进行简化设计。

Figma文件地址

https://www.figma.com/file/x8IGRhMWVTrE6t8D9wnDTg/Liquid-Design-System_Figma?node-id=0%3A2

熟悉Figma的童鞋应该都很清楚Figma的一些专有名词，我在这里就直接用它的英文名称了。

首先设计系统页面结构是

Page1: Fundamentals

Page2: Items

Page3: Themes

Page4: Components

Fundamentals页面放的是Color、Grid、Layer styles、Typography（可以根据需要添加模块）；Items 页面放的是层级分明的设计组件，可阅读性良好（其实就是拿来展示用的），这里的组件都是Instance而不是Component；Themes页面放的就是不同主题的页面视图参考；Components页面放的才是所有的设计组件。

也许会疑惑Items页面和Components页面的内容不是一样的吗？其实是不一样的，这样划分的目的在于，一是在Items页面对组件进行总览和查阅都非常方便，二是在Components页面可放置同一组件的不同主题或者不同的状态，比如图标的多种颜色或多种状态。下图就是Components页面同一图标的不同主题颜色，而在Items页面则不用表现出来。

在Items页面对于元素的划分为Elements、Components、Modules、Template。Elements包括按钮、控制器、图标等等，Components包括卡片、模态窗口等等，Modules 包括日历、对话框等等，Template包括一些页面视图。这些都是根据自身产品进行分类的，仅提供参考。这样划分，各元素层级关系就会很清晰，命名也有依据，同时以后拓展也会很方便。关于命名，举个按钮的例子，如下图，就可以是Elements/Button/Primary Button/Big/Default。