1. 背景 1. 为什么需要组件库？

当我们在做设计稿的时候，比如制作一个按钮，如果没有做成可复用的组件，那么后面在其他模块使用该按钮的地方可能需要重新绘制该按钮，就会出现很多问题重复工作。或者另一种场景，我们需要统一调整按钮的大小或颜色。我们可能需要一一改变。很容易犯错误或疏忽。

简而言之，一次性设计是让设计师变成绘图机器的罪魁祸首。如果我们提前构建可复用的组件模板，就可以达到复用的目的，并且可以一键批量修改，从而解放生产力，投入更多的时间和精力去深入思考业务需求。

2、元件库在设计系统中的定位

设计系统（也可以称为设计系统）是可重用组件的集合，以明确的标准为指导，通过制度化的组织流程和具体的指南和工具进行集成，以帮助开发人员（设计、研发等）高效并创建一个一致、动态地保证大量应用程序一致的用户体验。

需要指出的是，设计系统不仅仅是一个组件库，也不仅仅是一个风格指南。当你浏览上述案例的内容时，你肯定会看到组件库和风格指南，但更值得关注的是设计目的、设计理念、设计原则、设计模式、设计与工程同步的方法等。他们说。 。

该团队创建了一本专门名为“ ”的在线杂志，域名为 .该网站有大量围绕设计系统的文章、教程和代码库。

一般来说，元件库是设计系统的一部分，是沉淀设计规范的设计资产。组件库作为连接设计者与设计者、设计者与开发者的桥梁，首先应该灵活、易用；其次，组件库需要随产品一起进化，这就要求它易于维护，否则会落后于产品迭代，直至逐渐被废弃。

二、组件库如何帮助提高设计效率 1、在线调用、实时同步

跨团队使用组件库（样式、组件），实时更新，一键切换组件库中的主题颜色，并能够为组件添加提示。所有调用方式都是在线的，不需要传输任何本地文件。如果组件库有更新，后期可以实时同步。

2、多人协作、共创共建

组件库可以由多个设计者共同创建。大家只需要约束对应的组件级嵌套规范即可。每个人都可以负责自己的模块，单独更新和发布。

3、组装灵活，自由组合

组件库具有非常高水平的可定制装配功能。您还可以更改一些颜色、圆角、布局间距等，而无需删除组件。对于一些特殊的业务场景，基础组件也可以进行分离和组合。

3. 构件库建设经验分享 1. 原子设计理论

说到组件库，就不得不提到原子构造理论。 （原子设计）是构建的核心指导理论。在化学中，所有物体都是由原子组成，原子结合形成分子，分子结合形成有机物，最终形成宇宙中的一切。

2013年，Brad将这一理论应用到界面设计中，形成了包括原子、分子、组织、模板、页面5个层次的设计体系。那么对于设计系统来说，我们的颜色、字体、图标、按钮、标签等都会对应到相应的原子和分子。通过组件的组合，最终形成页面。

2. 全局基本样式

在设计体系中，基本样式可以理解为构成设计稿的最基本的“原子”。如果你的所有设计稿都使用共享样式，当你以后需要调整时，只需要调整样式库，设计稿就会随之改变，而不需要一一调整；样式库还可以通过映射到前端代码，提高最终开发的还原度。

样式是一些可重用的模式，目前支持四种类型：

1) 颜色样式()

颜色样式可用于填充颜色、描边颜色和文本颜色。它是页面整体风格的重要基本元素。它可以建立品牌认知，梳理页面的视觉层次，突出内容并平衡其他视觉元素。建议您根据颜色的功能和属性进行分组，例如品牌色、成功色、警告色等，并将默认、浮动、点击、禁用等颜色归为一组，方便其他设计师使用在团队中。

2）文本样式（Text）

文字样式包括：字体大小、字重、行高、字体间距等。需要注意的是，不要简单地用T1或T2等纯符号名称来命名。您可以在末尾添加适当的语义描述，例如一级标题、常规文本和其他文案。您还可以在描述中添加相应的文字。使用说明，这样当鼠标悬停在这个样式上时，就会给用户一个提示预览。这种方法也适用于颜色、阴影等全局样式，这样会更方便大家调用，也能有效缓解新用户的使用顾虑。

3) 效果样式()

效果样式包括：外阴影、内阴影、模糊、背景模糊等。阴影值应遵循真实物理世界中物体的属性。因此，采用三层阴影表达方式来设置阴影，使阴影更加柔和，更符合真实光源下物体的状态。物体的高度直接影响阴影。距离地面越高，阴影越大，模糊值越高，反之亦然。

4）布局网格（Grid）

水平和纵向布局参考。网格样式可用于设置全局大小和间距规范，尤其是在响应式网页设计中使用时。网格可以用来创建一些适应效果。

3. 创建样式

创建四种样式（颜色、文本、效果、网格）的操作类似。

这里我们以颜色为例。选择一个图层，填充颜色，单击右侧的四点图标，在弹出的颜色样式面板中单击加号，然后填写样式名称即可创建。我想补充一点，在名称中使用斜杠“/”可以对样式进行分组。

1）批量创建样式

如果要一次性创建多种颜色样式，可以将所有颜色通过矩形平铺，然后按快捷键Cmd+R批量更改图层名称。

然后，通过插件“-”，您就可以一键批量创建样式，解放双手。

以上是基于颜色样式距离的，其他文字样式和效果样式的创建方法相同。

2）风格命名

样式命名对于共享样式库的显示顺序非常重要。您可以通过用斜杠分隔名称来对它们进行分组。例如，您可以设置一系列警告颜色，全部以/开头，然后设置一组布局文本颜色，全部以Text/开头，这样它们就会自动分类，方便您在查找时更容易找到它们。使用它们。一般有以下分类依据：

3）款式说明

向样式添加描述与向组件添加描述具有相同的效果。描述信息可以帮助您确定在哪里应该使用哪种风格并保持统一的团队风格。此外，还可以检索描述。例如，可以尝试使用英文名称与前端对齐，如果英文不好，可以尝试使用中文描述以方便同步协作。

4. 元件类型

1）主要成分（Main）

它在左侧图层列表中显示为紫色，图标是由四个菱形组成的图形。作为主组件，它的变化会实时同步到它的所有实例组件，有时也称为父组件。

2) 实例组件()

指向主组件并按 Cmd D 复制元素。它们将在左侧的图层列表中显示为紫色空心菱形。作为对主组件的引用，它们会自动同步主组件的各种属性变化。一个主组件可以有多个实例组件，有时称为子组件。实例组件具有以下特点：

5. 组件嵌套

组件的嵌套类似于原子理论中“分子组合成组织”的过程。它所对应的元素往往是一些比较复杂的控件、卡片等。比如我们上面做的按钮组件，可以通过将其实例与图标、文案结合起来，编译成结果页面，然后进行组件化，完成一个元素的嵌套。成分。

6.组件集()

当我们有很多相似的组件时，我们可以将它们制作成一个组件集（也称为变体）。这样引用时就不用从一堆相似的组件中去查找，只需要切换不同的多组件属性即可。例如，按钮可以分为四种类型：类型（Type）和状态（）。

1）属性切换

然后，我们可以将其创建为具有二维属性的变体。此时，可以通过Type和属性的组合来实现四种状态的切换。其中，Type 和 称为属性名，后面的选项（例如 ）称为属性值。

2）创建组件集

有两种创建组件集的方法。首先，选择多个主要组件，右侧会出现组合成变体组件集（as）的选项。点击后，这些主要组件会安装在一个组件集中（紫色虚线），组件调用面板也会发生变化。它成为一个组件；二是选择没有制作成组件的普通图层，点击上面的集合，创建组件集。默认情况下，将调用左上角第一个属性的组件。

3）命名组件集

创建组件集时，会根据组件名称中斜杠（/）分隔的值自动生成属性列表，因此建议创建前按照一定的规则命名。如下图所示，我们按照/Type/格式给每个按钮命名，所有可能的属性都会被自动提取出来并生成右侧的属性值列表。

4) 属性和值

如上所示命名的四个按钮组合成变体组件集后，自动分类的属性值将显示在右侧。不过我们仍然需要手动更改属性名称，即将1更改为Type，2更改为Type。

5）组件调用

此时按+I即可打开组件调用面板。可以看到四个按钮组件在这里只显示为一个按钮。将实例组件拖到画布中，我们可以通过选择右侧的属性来在不同的按钮变体之间切换。

6）调整属性值的顺序

这里右边的属性名称和属性值的显示顺序可以在变体组件集的面板中调整。对于从组件调用面板中拖出的实例组件，默认会先选择各个属性值，所以我们一般将使用频率较高的属性值排在前面。

7) 组件属性 -

上述示例组件右侧面板中的属性选择均采用下拉菜单的形式。如果我们的组件是物理隐藏的，比如图标左侧是否有图标，这可以通过组件属性的实际隐藏来实现。选择该图标，单击右侧面板右侧的箭头，并将默认值更改为 True 或。

稍后调用时，可以使用开关来切换是否显示图标。同时，组件集内部的数量不会增加，可以节省内存消耗。

8）向组件集中添加组件

我们可以将新组件直接添加到变体组件集中。选择变体组件集后，右下角会出现一个紫色的加号。单击它可添加变体组件。

9) 组件设置属性冲突

假设我们要添加一个禁用的主按钮。单击以添加变体。这时虚线框中就会复制一个按钮，我们可以修改它的背景颜色。可以看到，当选择一个变体组件集时，右侧会出现属性冲突提示。因为这个新添加的变体组件的属性也会被复制，所以会像现有的组件属性一样出现冲突。

这里冲突的是它的属性，也是，我们改成，属性冲突提示就消失了。

10) 向组件集中添加属性名称

当需要增加某个属性类型的维度时，可以点击右侧的加号按钮新建一个属性类型。创建完成后，相当于有了一个新的属性名，可以为每个组件设置对应属性名的属性值。

11）注意事项

变体可以帮助我们避免大海捞针的选择，并简化组件切换到属性的小组合，但是在创建和使用变体时养成一些良好的习惯可以帮助我们更好地利用它们。

4. 组件库的发布、更新和使用

组件库的意义在于让团队的每一个成员都能使用到最新的组件，提高效率，保证输出的一致性。那么接下来我们就来说一下如何在组件库中发布、更新和应用

1、发布组件库，点击Team按钮（书本图标）；单击面板；双击确认面板，再次点击即可发布成功；

1）发布频率

当组件库发生变化时，用户会在维护者发布后在文件中收到通知，并决定是否将更新同步到设计稿中。如果维护者频繁发布，用户也会频繁收到通知，所以最好固定在一定的频率发布更新，比如每天下午6点发布一次，这样用户每天早上只需要更新一次。

2）私有组件

当组件库中有一些临时的或者很少复用的组件时，可以添加 _ 或 .这些临时组件的名称之前，是英文符号下划线或点。当发布组件库时，这些私有组件会自动隐藏，这样您在构建组件库时就可以遵循原子方法。同时，为其他设计者发布的组件库会非常简单，不会有一些临时组件。

2. 复用组件库

创建好组件库后，团队成员复用组件库的步骤如下： 打开需要生效的组件库。打开后可以在组件库中找到对应的组件并复用。您可以按分组搜索或按关键字模糊搜索。 。

3.更新组件库

组件库也可以理解为设计团队的一个小产品，也需要不断更新迭代。当我们的组件库有更新内容时，我们可以执行与发布组件时相同的操作。单击面板中的团队按钮。您可以将组件库中修改的内容发布并更新到云端。

1）同步云端组件库

当原组件库发生变化时，右下角会弹出提示框。点击查看。您可以预览该文件所使用的组件库中所有组件的更新情况。确认后，点击更新，将更改同步到使用该组件库的所有文件。通过这种更新同步组件库的方式，可以实现整部剧的一键修改、替换的便捷操作。

2）复制元件时的注意事项

通过复制粘贴的方式复用组件只适用于两种情况：完全适用于同一个文件；对于跨文件的情况，组件只有发布为组件库后才能跨文件粘贴和重用。否则，复制粘贴的方法只适用于可以直接复制，但在状态下是无法复制的！

例如，上面制作的组件可以从同一文件复制和粘贴，没有任何问题。但对于跨文件复用场景，如果跳过发布，直接将文件A复制到文件B，则复制后会显示Main状态，无法正确复用；仅在发布后，复制到文件 B 才会显示为可重用实例状态。

4. 更换部件

元件更换主要有两种形式。一种是组件到组件的切换。点击右侧面板组件名称的下拉选择器，比如从按钮切换到复选框，就是两个完全不同的组件之间的切换；另一个是组件集中组件属性的切换。可以通过选择组件属性来进行切换，比如按钮内部的各种状态切换。

5. 结论

元件库是强大的性能改进工具，也是设计系统的重要组成部分。作为设计师与设计师、设计师与开发人员之间的桥梁，有了统一的标准，输出效率将会大大提升，可以大大提升团队产品的品牌感和体验感。另外，组件库需要随着产品不断发展，这就要求它易于维护。有必要明确其用户是谁。组件库必须作为设计团队的产品进行维护和升级，以方便对象的使用。查找、重用和理解。

由于时间和篇幅有限，对于组件库的介绍如有错误还望大家指正。欢迎大家一起学习、讨论。

参考：

“设计系统：数字产品设计的系统方法”

:///s/Iw

作者：何波波；深耕B端体验设计，持续学习和输出。