接下来，将图标设置为蒙板「按住Control键，点选图标，在菜单中选择Mask」，如此一来，我们刚刚从AIN-Colors Library当中插入的Symbol就能将其颜色附着到图标形状的蒙板上了。

　　需要注意，在Sketch左侧的图层列表当中，带有连环图标的便是从外部Libraries插入的Symbols。

　　这里的核心思路在于Libraries的嵌套。通过这种方式，每当我需要修改颜色定义，只需要在「AIN-colors」文档中进行编辑，然后所有用到了这个颜色的图标或其他UI元素就会自动更新了。

　　现在，我们就可以将图标画板转换为Symbols了。需要注意的是，对于这些图标画板，要确保在右侧检查器中选中「Adjust content on resize」;此外还要将图标的Resizing选项设置为四边同时吸附，并锁定宽高比例，以确保图标Symbols在实际使用的时候可以被灵活地调整大小。

　　重复这一过程，直到完成所有图标Symbols的定义。期间同样要注意层级化的命名方式，以便最后可以通过Symbols Organizer插件将它们组织起来。

　　第四步：将图标定义文档添加到Libraries体系

　　具体方法与我们在第二步当中描述的相同。

　　此时，我们已经完成了两个Libraries文档的创建，对于我的情况来说，就是「AIN-colors和AIN-icons」。现在我们的图标已经可以通过Libraries的方式被其他文档统一调用了。

　　第五步：重复以上步骤，对其他元素进行定义

　　希望前面四步的介绍已经可以帮你了解到流程的主旨。

　　你可以参考这样的方式继续完善其他基础元素的定义，期间始终保持Libraries的逐层嵌套。

　　在我们的AIN设计体系当中，同类元素还包括按钮、表单元素等等;这些Libraries文档与「AIN-colors和AIN-icons」一起被保存在同一个路径当中，当我开始制作分子或更高级别UI元素的Libraries时，便会进行调用。

　　Libraries的更新

　　随着产品的进化，你总会需要对核心Libraries当中的某些元素进行更新。Sketch提供的机制使这件事变得很简单，你只要在Libraries文件当中像操作普通Symbols那样进行修改便可以，然后所有调用过这些Symbols的Sketch文件都会收到更新提示「Sketch界面右上角」。点击提示信息，查看变更并进行确认，所有更新工作就会自动完成。

　　接下来

　　完成了所有原子级别UI元素的定义之后，你就要着手整理更为复杂的元素了，例如「分子」，然后是「有机体」，等等。整个过程中，你都可以对之前创建的各级Libraries进行嵌套，通过小颗粒元素组合大颗粒元素。

　　以此类推，这套基于Sketch Libraries机制逐层构建的设计体系终将越发复杂和完善，并最终有能力帮你实现完整的界面。届时，你便可以在任何项目当中对这套体系进行调用。

　　在本文的后续部分中，我将带各位一起了解一下创建更为复杂的组件的过程，可能包括页头、导航、卡片视图、页脚等部分;同时也将展示如何在实际当中使用这套设计体系。

　　需要说明的是，原子化设计理论只是一种指导原则，而非硬性规则，你最终还是需要一边结合理论，一边根据自己产品的特定情况来判断以怎样的方式对UI元素进行层级划分。

　　此外，关于Libraries在多设备之间的同步使用，我个人目前还没有涉及到这方面的实际运用。正如Sketch在官方文档之中建议的，你可以通过Dropbox、Google Drive或类似的存储服务来实现同步;这对于团队共享和协作将非常有用。

　　总结

　　在本文中，我们一同了解了如何使用Sketch Libraries构建模块化的UI组件库/设计体系，希望此时你已经感受到了Libraries功能的巨大潜力。

　　如果你是设计团队中的一员，或是一名需要更好的方式来管理项目的独立设计师，那么不妨试着将Libraries功能运用到设计流程当中。自Symbols以来意义最为重大的新功能将能越发有效的帮助我们构建和维护设计体系。

　　你可以下载我提供的范例项目作为参考，其中包括了颜色、图标、按钮等元素的定义，以及一个简单的项目案例。希望这套范例能帮你更好的理解本文的内容。需要注意，你需要更新到Sketch 47才能打开这份文档。

　　相关资源

　　Sketch Libraries by Jon Moore

　　Brad Frost’s Atomic Design Methodology

　　Pablo Stanley on Sketch Libraries

　　Airbnb: Building a Visual Language