最近完成了一个公司的新项目，借此和大家分享一些产品KIT组件库搭建的经验。翻阅了很多资料，大多都是介绍组件思维文章，却很少看到真正讲解从0-1、从软件到实践一步步如何搭建组件库的文章。组件库的搭建还是要从基础开始夯实，就像建造大楼的地基，前期规则的制定和细节的把控也会为后期组件库维护提高效率。
本文将从理论到实践，从软件到插件，再到不同应用场景拆解和团队协同的重构，一步步教你如何搭建产品KIT组件库。也给大家带来逆天的Anima插件教程，组件化设计的必备插件，目前国内还比较少有文章讲到。手把手！嘴对嘴！堪称全网最细保姆级教程！
01. 什么是KIT组件库？
一个成熟的设计团队，都会为产品制定设计规范，搭建产品KIT组件库，组件化思维也是设计师的必备思维之一。组件库会让团队协作变得高效且一致，让团队成员专注于深耕体验和细节，实现设计向产品赋能。极大的节省设计和开发成本，优化用户在界面流转间的感知差异体验。
KIT组件库本质上是一个集合的Sketch文件，由原子、分子、组织、模板、页面组成。原子理论支撑可复用、可修改、易于协同和维护。
由Google推出的当时媲美苹果全新设计语言的Material Design，Material Design也是最为经典组件库设计。现如今阿里的Ant Design和Element给我们提供了一套完整可复用的组件库。
02. 原子设计理论
原子设计是将界面设计中最小元素——原子，组合嵌套为分子、组织、模板、页面的系统规范化设计过程。
1. 原子 Atoms
原子Atoms，我们知道是指化学反应不可再分的基本微粒。原子在化学反应中不可分割，但在物理状态中可以分割的。原子由原子核和绕核运动的电子组成，所以原子是构成物质的最小粒子这就不对了。
但在界面设计中我们所说的原子是构成界面的最小颗粒度元素，在设计中无法再被拆分或者拆分下去已无意义的最小单位。比如不同颜色样式、文字样式、输入框、icon图标、分割线等。
2. 分子 Molecules
由原子按照一定的规律和目的组成的部分为分子，在界面设计中比如Button按钮、swittch开关、非模态弹窗Toast等，可以理解为比较简单的小组件。
3. 组织 Organisms
将不同的分子与原子组合就组成了组织。比如头像与信息组成的联系人容器卡片、Table列表、Nav-bar、Tab-bar等等。
4. 模板 Templates
将组织与分子、原子进行特定的组合就形成了模板。这一步已经能展示界面的主要功能和交互了。一般这一步得到的结果就是我们日常工作中的原型图，产品的大致形态也慢慢清晰。所以模板可以理解成未上色的界面。
5. 页面 Pages
最终输出的高保真设计图即为我们说的表现层的页面Pages。将模板填充信息和图片内容，就得到了高保真设计界面。
03. KIT组件库搭建过程详解
以最近做的一个NFT项目为例子，展示具体搭建细节的全过程。
1. 命名规范
命名按照：一级分类 / 二级分类 / 三级分类 。例如：一级标题样式/苹方/常规/灰阶0
其中 “/” 为层级结构分隔符，Sketch会自动识别。组件库的搭建需要按照层级规范命名，从最外层到最内层，就像一个抽屉，每一层都对应放着东西。规范的命名会使后期调用维护、团队协同变得清晰高效。
2. 样式
（1）颜色样式
我们设计一般都需要定义颜色样式，一般有主色调（Main tone）、辅助色（Minor）、渐变色（Gradient）、字体的灰阶度（Gray scale）等。选中你需要创建样式的颜色，点击「外观 - 创建」，在输入框内输入层级规范命名。
（2）文字样式
定义文字样式，文字具有字体、大小、字重、灰阶等属性，选中文字，点击【外观-新建】，在输入框内输入层级规范命名。
（3）样式切换
当我们需要切换一个定义好的文字样式时，比如从“阅读文本样式”更换为“一级标题样式”，只需要选中文字 - 点击「当前文档」下定义的文字样式 - 点击需要更改的文字样式即可。
（4）样式修改 - 解绑与更新
当我们需要对定义好的文字样式进行修改时，比如在设计的过程中突然感觉"阅读文本样式"字体小了点，为了优化阅读体验需要增大字号。
1. 单个修改 - 解绑
将文字调整更改为你需要的大小或字重，此时只对单个文本修改，不对其他文本产生影响，点击解绑，便可与定义好的样式分离。
2. 整体同步 - 更新
将文字调整更改为你需要的大小或字重，样式名称后会出现 "*" 星号，此时代表未保存，且更新按钮激活，点击更新按钮则所有使用该样式的字段都会更改，整体同步更新。
3. 组件
组件是将元素定义为标准化可复用的集合体，对组件进行规范的命名，形成高效设计的KIT组件库。
（1）文本组件
选中我们需要定义的文本字段，注意！根据实际应用场景选择合适的文本对齐方式，否则修改字段信息是会出错。这里文本选择左对齐，点击 「创建控件」- 按照层级规范命名，选择从左往右布局 - 点击 「覆盖层」即可对文本字段内容进行修改。
（2）标签组件
1. 单个标签
当设计完标签后，对标签创建组件。依次选中便签中的文字“LIMIT”、“2000份”，依次将文本选择左对齐，步骤同上。将整个标签打组，点击 「创建控件」- 按照层级规范命名，选择从左往右布局（这里注意！从左往右布局表示标签在更改字段信息后，便签左边固定不动，从左往右自适应） - 在覆盖层修改文本字段信息，库存标签组件自适应。
2. 标签修改
如果我们觉得这个库存标签设计的不满意，或者还需新增倒计时标签、已售标签，那怎样又该怎么做的？
第一步：这时我们新建一个Sketch文件，命名为「 *** KIT 组件库」。选中标签图标复制，将图标粘贴到新建文件内，注意！此时需要给图标添加合适的画板，并按规范命名。
第二步：将Sketch文件保存到桌面，拖动到「首选项-组件库」内。
第三步：选中组件，回车可进入控件（组件）页面，可直接调用定义好的控件，进行修改。
Tips：这里画板的作用是
（1）画板是用来规范固定组件位置和大小的，成套系的KIT Library需要建立画板。
（2）画板组件在创建后，调用时只固定大小和边界。
（2）如果只是做较少的界面，较少的复用的样式，就可以不用做画板。
3. 多个标签
当页面需要不止一个标签时，就需要新增标签，通常为左右或上下布局。若直接增加一个标签修改字段，文本标签不会自适应。 和之前操作一致，将新建的标签新建组件后，可实现标签文本自适应。
4. Sketch素材调用
继续添加商品作者组件、价格组件。点击右边覆盖层可修改文本字段。点击文字右边小icon可调用Sketch自带的数据。
（3）容器组件整合
将前面定义好的所有组件整合到容器中，形成可直接复用的商品信息容器组件。
第一步：调用定义好的阅读文本样式，注意！直接拖过来即可，文本框的长度左右拉到合适的左右间距，这里不需要动文本框的高度，否则会出错。将底部容器（卡片）的收起到合适的高度
第二步：选中整体打组，创建组件。注意! 此时选择从上向下布局。
第三步：选中整体，在右侧覆盖层可对文本进行编辑，输入文本字段，此时容器高度实现自适应。
（4）组件的拆解与重构
页面可一步步拆解为模板、组织、分子到原子。原子和分子可组合嵌套重构为组织、模板和页面。
（5）Anima插件
如果上下同时有卡片的情况该怎么呢? 当然，我们完全可以将它们一起定义组件，但有没有其他更便捷，更灵活的方法呢？这里跟大家介绍Anima插件的使用，会使得大家在搭建组件库时变得更加灵活高效。
Anima插件为一款在线自动响应式的插件，其中的STACK与PADDING功能简直是Sketch设计必备，简直逆天。
1. PADDING功能
新建一个文本，当点击PADDING后，会自动生成一个底板，选中底板可对其进行编辑，更改颜色、原角度等。在PADDING输入框内可输入距离上下左右的边距。此时注意文本的对其方式，左对齐一般适合标签使用较多，而居中对齐适合一般的居中按钮，如立即支付、立即报名等。
2. STACK功能
将三个标签分别打组，再全选整体打一个组，点击STACK，选择左右排版和居中对齐，输入你需要的间距。此时Anima插件最牛的STACK功能就是可以双击选中任一个标签，拖拽可改变排列顺序，松手后还可以自适应。
04. 为什么要搭建组件库？
（1）统一（Unified）
1. 团队不同成员或新来设计师之间协同配合，保证输出的一致性和稳定性。
2. 统一的组件库样式，会减轻用户在页面流转间的疑惑感和理解成本，使用户体验得到了提高。
（2）效率（Efficientcy）
1. 减少相同模块的重复设计。一个产品功能流转、页面交互必定会涉及到大量的重复设计的样式与组件。试想一下，如果每一个都重新设计将是一个巨大的时间成本浪费。
2. 如果从产品的全生命周期来看，搭建好设计中台KIT组件库，并与开发进行沟通，能减少前端开发样式，将时间更多的放在功能交互体验和项目推动上，极大提高了效率。
（3）协同（Together）
1. 建立完善的设计规范和KIT组件库，提高组件库优化迭代效率。组件库团队协同自动更新。
2. KIT组件库一键修改，也可通过组件分离功能（解绑）单独对样式进行修改，工作中需要对设计反复调整打磨，可进行批量一键更改，单个模块的单独修改。
05. 什么时候搭建组件库？
什么时候时候搭建组件库？先定义规范都是扯淡！所谓实践才是检验真理的唯一标准，“在设计开始之前就制定设计规范，是不切实际的做法，你会发现做好的规范在实际操作中是无用且白费精力的”摘自《破茧成蝶 用户体验设计师的成长之路》。所以组件库中的组件必定是经过反复修改后适合产品以及可后期可复用的。
并不是所有的设计都需要做设计规范或者KIT组件库。组件库的搭建本身就是一个耗费时间人力的事情，如果是一次性项目那根本就没有必要做组件库了。是否需要创建样式或组件取决于该样式或组件在后续的工作中是否会被复用或复用的频次。也会减少前端工程师重复开发CSS样式以及后台数据的封装成本。
06. 团队协同
将组件都定义在新建的Sketch文件中，将文件发给你的团队其他成员。步骤同上。
第一步：新建一个Sketch文件，命名为「 *** KIT组件库」，将组件都创建在新建文件内。
第二步：将Sketch文件发送给团队其他成员，拖动到Sketch「首选项-组件库」内。
第三步：直接调用定义好的组件。
共享组件库个人使用 Sketch Cloud，但组件库有更新Sketch右上角会有提示，及时沟通更新即可。
07. 总结
以上为最近项目的一些基本组件的搭建全过程，由于项目涉密做了脱敏处理，因此只做部分展示，基本囊括了大家设计中常见的组件定义方法和原理。希望大家能够灵活运用，触类旁通、举一反三，也希望给大家一些帮助和启发。
需要Anima插件的小伙伴可留下邮箱地址，我会发给你呦~
