我们所创建的任何一个组件都是由若干“属性”组成的。这些属性就是设计体系当中最为「原始化」的元素。开发人员会在代码当中为这些属性创造各自的变量，以提升代码的复用性;对于设计师来说也是同理，我们可以为各种原始化UI元素创建Libraries，以便逐层构筑更高级别的组件。

　　原子化设计理论

　　为了确保组件库的扩展性，我将Brad Frost提出的原子化设计理论作为指导。这套理论简单易行，很容易理解。

　　简而言之，原子化设计的灵感来自于现实世界当中的分子结构。UI当中颗粒度最小的元素，即「原子」，组成了颗粒度较大的控件，即「分子」;而诸多分子又组成了更加复杂的组件与模块，即「有机体」。

　　将不同类型的Symbols放在各自的Library文件中

　　当然，如果你愿意，你仍然可以将所有组件都放置在同一个Library文件当中;而我的建议则是为每种类型的Symbols各自创建一个独立的Library文档。

　　类似于开发人员使用Sass partials的方式，调用多个Libraries文档可以使我们的设计体系更为优雅，更易维护。经过合理拆分的Libraries文档将更有利于被不同的项目调用;在需要的时候，也可以更加方便地进行扩展。

　　参照「原始元素」的思路，我们将从最为基础和核心的UI元素入手，包括颜色、图标等等，这些元素将在整个设计体系范围内被使用到;所有「原子、分子、有机体」级别的UI元素也正是由这些原始元素所构成的。

　　我们首先要对全局所用到的各类颜色进行定义。

　　第一步：创建新的Sketch文档，用于颜色定义

　　对于团队项目，我会在Sketch文件名当中统一添加「AIN」作为前缀，例如「AIN-Colors」等等，以便与其他项目进行区分。当然，命名方式和习惯因人而异，如果你和我一样需要处理很多不同的项目，通过前缀进行区分的方式或许值得考虑。

　　我会为设计体系当中的每一种颜色生成一个Shared Style，并按照不同的作用进行分类，包括「brand、greyscale、UI」等等;具体的分类方式就是在Shared Style命名当中通过「/」符号表示层级结构，Sketch会识别到该符号，并自动生成相应的架构。

　　接下来，我会为每一种颜色制作一个Symbol，并使用Symbol Organizer插件在Symbols页面当中对它们进行组织 – 在层级化命名方式的辅助下，Symbols页面将自动呈现出清晰的架构体系。

　　第二步：将颜色定义文档添加到Libraries体系

　　完成了颜色定义之后，我们需要将这份Sketch文档添加到Libraries体系当中。设计体系当中所有原子级元素的定义都需要这一步骤。

　　在顶部菜单栏选择「Sketch › Preferences」，然后进入「Libraries」选项卡，点击“Add Library」按钮，选择我们在上一步里创建的Sketch文档。

　　如图所示，我将AIN-colors文档添加到了Libraries体系当中，这样我就可以在任何其他Sketch文件里对其进行调用了;这便是Libraries功能的强大之处。

　　怎样使用这些颜色Symbols呢?在接下来创建图标Library的过程中，我将进行演示。

　　第三步：创建新的Sketch文档，用于图标定义

　　类似于我们在第一步当中的做法，这一次我们对图标进行定义。新文档名为「AIN-icons」，与之前的「AIN-colors」文档保存在相同的路径中;之后所有原子级UI元素的Libraries文档也都将被保存在这里。

　　每个图标都被放置在相同规格的24×24像素的画板当中，下面铺着24×24像素的透明图层以确保规格统一。然后我会从AIN-colors Library当中选择恰当的颜色Symbol插入到图标画板当中，覆盖在图标图层之上，并将其尺寸调整为24×24像素。