用四大章节，帮你10分钟学会 Figma 组件库的搭建和使用收藏 2022/08/01 推荐：波波BobbyHe阅读 2.0w点赞 18评论有奖阅读本文需 19 分钟

Untitled

背景

1. 为什么需要 Figma 组件库

当我们在做设计稿的时候，例如做一个按钮，如果没有做成可复用的组件，那后面在其他模块要用到按钮的地方可能又需要重新画，会有很多的重复劳动。又或是另一种场景，我们需要把按钮的尺寸或颜色统一调整，可能需要一个一个去改，很容易改错或者疏忽。

总之，一次性设计是使设计师沦为做图机器的罪魁祸首。如果我们提前搭建好可复用的组件模板，就可以达到复用的目的，而且可以一键批量修改，从而解放生产力，把更多的时间精力投入到业务需求的深入思考中。

2. Figma 组件库在设计体系中的定位

设计体系（Design System，也可以叫设计系统）是可复用组件的集合，由清晰的标准引导，通过机制化的组织流程和具象的指南与工具加以整合，以帮助开发者（设计、研发等）高效且一致地创建大量的应用，并且动态地确保用户体验的一致性。

需要指出的是，设计体系不只是组件库，不只是样式指南。当你浏览上面这些案例内容的时候，你固然会看到组件库和样式指南，但更值得关注的是它们陈述的设计目的、设计理念、设计原则、设计模式、设计与工程同步的方法等等。

Figma 团队做了一个专门以设计体系为题的网刊，域名为 designsystems.com。该网站有大量围绕设计体系的文章、教程及代码库。

总的来讲，Figma 组件库是设计系统中的一部分，是沉淀设计规范的设计资产。作为连接设计师和设计师、设计师和开发的桥梁，组件库首先应该是灵活易用的；其次，组件库是需要跟随产品不断进化的，这就要求它是容易被维护的，否则它就会落后于产品迭代，直至逐渐被遗弃。