随着设计工具的不断发展，Figma逐渐成为各大公司的主流设计软件。

Figma强大的组件库能力，非常适合团队设计系统的建设与应用。

相比Sketch，Figma在Auto layout、变体和实例等方面极大的提升了组件库的设计灵活度和效率。

看完本文你将会学到：

1、Sketch与Figma组件库的区别2、Figma组件库搭建经验分享

• 基础样式：字体(分层分级技巧)、颜色(分组排列规则)、阴影(分类、三层阴影)等
• 组件与变体：组件分类结构化原则、变体创建命名技巧、优化变体层级、组件预览展开还是合并、开关的使用和组件的链接等
• 组件文档：文档结构层级
• 组件库发布、使用、更新

3、Figma组件库搭建Tips分享

先简单聊一下为什么要做组件库？

组件库是将界面设计中的具有通用性和标准规范的基础元素和重复出现的控件进行归纳整理，通过对控件进行分类和命名，最终形成一个可快速复用，便捷维护的资源库。对于设计师和开发来说，简单上手，可复用强，稳定且高效的组件库是非常有必要的。组件库更像是一个强大的工具库，既能提高团队的协作效率，也能保证团队设计输出的统一性、高效性和延续性。

相对Sketch，Figma组件库有哪些特点？

在Figma之前，我们都习惯了用Sketch创建组件库。但当开始使用Figma后，发现Figma不仅继承了Sketch组件库的优点，并且更加灵活和强大。 举一个简单的例子，如果想要修改组件的文本样式或者不同组件的颜色时，在Sketch中，就必须提前做好所有可能的文本/图层样式，非常的费时费力。但Figma强大的实例Instances功能，无须提前做好所有的样式，可以直接在实例上修改字体、颜色、描边、投影等，但又不会干扰到父级的样式，而修改父级的样式又能修改全局，非常的方便。又比如想要去切换一个按钮的状态，或者是否带图标时，Figma强大的变体功能可以将这些属性进行分类整合在一起，组件调用更便捷，这都是Sketch组件不具备的功能。 除了实例、变体功能外，跨团队使用组件库(样式、组件)、实时更新、组件库的主题颜色一键切换、组件可以增加提示语等功能，都是Sketch不具备的。

Figma组件库搭建

提到组件库，不得不提到原子构建理论。Atomic Design(原子设计)是构建Design System 的核心指导理论。化学中，所有的物体都是由原子构成，原子组合构成分子，分子组合构成有机物，最终形成了宇宙万物。 2013年Brad Forst将此理论运用在界面设计中，形成一套设计系统，包含5个层面：原子、分子、组织、模板、页面。那么对应设计系统来说，我们的颜色、字体、图标以及按钮、标签等都会对应到相应的原子和分子，通过组件之间的搭配组合，最终构成页面。

组件库的基础构成

按照原子设计理论的思路，首先需要将组件库的类型进行分类，然后再从基础和核心的元素入手，进行元素、组件、模块的搭建。 组件库一般由基础样式、控件和组件文档构成。基础样式包括颜色样式、文字样式、效果样式(主要是阴影)，组件主要就是控件(相当于Sketch的Symbols)，组件文档相当于对组件的样式和状态的展示说明。