如何利用Figma构建组件库？我们团队总结了这篇经验

最近团队尝试使用Figma构建一套适用团的组件库与规范，发Figma比Sketch的构建方式简单灵活，尤其自动布局（Auto Layout）联级嵌套能极提升组件库的设灵活度；另外Figma插件库日新月异，能够效提升组件库构建过程中的效率。本文主分享了我们团队创建组件库中的一些验方法。

首先我们确定组件库框架包含哪内容，里主要针对ToB端的业务场来进行演示。

组件库框架

B端业务组件库框架内相比C端产品的复杂且难以手，除了对产品业务的理解掌握之外，组件库到底哪些内？针对我们团队所接触的B端业务场景行需求整体、分析、调研并抽象出具体的组件库框架：

• 主题式
• 基础组件
• 框架模式
• 拓展控件
• 通模
• 规范映射表

可根据项目务或产场景需求对框架容进行调整。

以下内容会按照构建顺序进行拆解

主题样式

1. 颜色

首先是颜色样创，颜色常会含主题（品）色，性色或者辅助色，在Figma我们唯需要做是这些颜色进命名管理；创第个颜色样后过在文件标题下菜单进首样发布，发布成功即可在其他Figma文件引用。

△ 颜色创阶度可以借助 Material Design Color tool 工具来辅助生成

2. 体

Figma体样与Sketch创不，Figma需要关注号与即可，而过去在Sketch除了号、创以需体齐进创，这样会增加样库管理维护成本，时也增加了使用难度。

在Figma我们需关注组件库需要用到号以及少量，这里议样创要克制，尽可能保证样库精简适用。号我们采用 12px-64px，使用了Regular和Bold两。

择一款字体（推荐思源黑体），字体需要考虑团队协作中存在同终端的适配问题，如果使苹方则Win系统中会现字体丢失的情况，中字体的使插件 Chinese Font Picker 。

3. 图标

图标在之前的组件库搭建中存在两种嵌套方式，第一种是目前推荐的直接使Svg的方式，通过导入Svg图标进行并创建成组件进行管使，输则择性输即可。第二种是将图标库编译成一个字体包，通过字体的方式引和管，字体图标的应方式依然在许多B端系统上可见，过存在浏览器版本和兼容性问题，字体图标是当时最好的择；缺点是维护成本较，图标字体包无法择性引，字体包的大小会影响页面载性。

4. 图标批量创与管理

在Figma我们可以很轻松去创个图标库，益于Figma支持批量创Component，批量创完以后我们再过插件来实现图标组件批量命名。Rename It（命名插件）Find & Focus（批量查找插件）

5. 阴影

阴影样式的创建相对简单，设置阴影参数与对应命名并逐个创建即。

6. 圆角

组件库中常用到圆角，圆角属于组件库中的一种样式变，圆角很强的风格属性，因此过去我们会对圆角行单独理以方便后对组件库中的圆角行全局理，Figma中圆角单独的样式理属性，只需对圆角行规范义即可。圆角组件库中存多种属性状态，例如按钮组中就存左右结构的半圆角属性，应该组件库的创建过程中就提考虑并约束。

7. 间距

在Figma中间距需要组件化（Component），动布局（Auto Layout）可以算Figma组件化中的杀锏，通过简的属性置就可以实现动布局效果；在间距创建中需要对横向（X轴）以及竖向（Y轴）别进行创建并以不同的式来，当然所有的间距都是通过母版（Master Component）进行复制创建的，这可以通过母版来对全局的间距进行式管控。

间距的数值定可根据计规范进行调整，采用了4px-256px的倍数间，可以适应大部业景。

规范映射表

1. 规范映射表

为什么需要规范映射表？组件库样、组件、组件状态到定数量难以维护，设计与开发接成本会显著增高；如我们过个映射表来应组件库样和组件，提取组件库变量并设定映射名称，减少样或组件本身依赖性，而是过改映射参数来实现组件库变更。

映射表中需要对样式中的颜色、字体、圆角、阴影、间距等样式进行映射联，这些变量在开发过程中可通过代码进行联与 Figma中的组件库联是一致的。

基础组件

1. 按钮

我们通对按钮组件的构建进行剖析基能够掌握组件构建的基原理，其他组件的构建方式基无异，只存在嵌套级的少差异。

在构组件前我们可以学习 Atomic Design （原子设计）能帮助你深入了解构原理。

组件库的构建方式全可采原子设计论构建：

Brad Forst（计作者） 将此理论运用在界面计中，形成一套计系统，包含5个层面：、、组织、模板、页面。

组件库搭建中，原子属于小颗粒度单，例如：任一形状、文字、颜色、图标。

组件搭建除了需要掌握其构成理之外还需要了解每一个组件的类型、状、规格等息，这些将是组件库的核心内容。

以按钮为例，在ToB侧Web端业系统中常用三种尺寸规格（24px、32px、40px），常用状包含：Normal、Hover、Focused、Pressed、Disabled；按钮还拥有多个不同类型例如：Primary、Outline、Dashed、Danger，当一个组件存在多种形味着组件的复杂程度提升，维护成本增加。

通过之前的组件库构建经验来，不同形的相同组件的结构一致，只存在式差异，而Figma刚好足这一需求，在相同的母版（Master Component）下的件可以独置式并不会响母版之前的关（Sketch无法让件母版存在式差异）。

我们创建一涵盖所按钮形态的母版，通过拷副件并对副件行样式变形新的按钮状态，选中已变样式的副件创建新的组件（Component），这样就实了组件分级嵌套效果。

△ 组件分级嵌套效果演示

组件分级嵌套以帮助我们更加灵活的管理组件库，上图Master A为组件母版，而A1、A2、A3从母版拷贝而来（副件），对副件进行样式修改创建为新的组件并拷贝至A1_1、A1_2、A1_3，样就现A 管控 所有A的副件，而A1以单独对A1_1进行管控而不影响其他副件。

拓展控件

1. 卡片

卡片属于拓展控件可以对应 Atomic Design 中（原子、分子、组织、模板、页面）里的「组织」，「组织」通过原子或分子组合构。

相比按钮，卡片搭建过程中使用了间距；布局单一的按钮只需通过自动布局（Auto Layout）就可以满足，灵活多变的卡片则需通过间距配合自动布局实终效果。

复合组件中需满足模块替换的灵活性，我们通过给组件划分不同模块，模块中的内可以自由制。

△ 卡片组件的分解图

通分图我们以需要替换的模块必须为组件态（Component）且尺寸一致，满条件只需选中该模块右属面板进行替换即。

框架模式

1. 页面布局/栅格

Figma中的布局网格（Layout Grid）只针对画布效，因此创建栅格布局需选中一效画布，右侧属性面板可以选择列（Columns）行（Rows）或格（Grid）新建，设置好布局网格画布里面的元素靠近网格线时会吸效果可以辅设的准确性。

2. 页面结构

左右结构在ToB业景比较常见，类似的页面结构只需要把左侧的菜和头部创建独的组件模块即可。

通过组件嵌套可以轻管理一套组件库套颜色模式（浅色版深色版）

通用模板

1. 概览&Dashboard

过原子、分子、组织构模板，而模板组合能形成各场景页。

过自动布局（Auto Layout）我们可以较为复杂表格组件进合理管控，例如新增删除都能按照既定距进自动拓展。

同时通过组件嵌套实现表头带表容进行联，极大的了在复杂场景的设计效率。

最后

组件库意义在于能够立设计约束，保证设计致性；更要是能够为品/团队规范设计输出，提升设计效率。

组件库的搭建需要因地制宜，根据产或团队需求构建，保持组件库轻量效是我们的目标；一切够升设计效率的可性都应该值得尝试。

欢迎关注作者公众号：「AsiaInfo Design」