10 分钟学会 Figma 组件库的搭建和使用.docxVIP

10 分钟学会 Figma 组件库的搭建和使用 一、背景 1. 为什么需要 Figma 组件库 当我们在做设计稿的时候，例如做一个按钮，如果没有做成可复用的组件，那后面在其他模块要用到按钮的地方可能又需要重新画，会有很多的重复劳动。又或是另一种场景，我们需要把按钮的尺寸或颜色统一调整，可能需要一个一个去改，很容易改错或者疏忽。 总之，一次性设计是使设计师沦为做图机器的罪魁祸首。如果我们提前搭建好可复用的组件模板，就可以达到复用的目的，而且可以一键批量修改，从而解放生产力，把更多的时间精力投入到业务需求的深入思考中。 2. Figma 组件库在设计体系中的定位 设计体系（Design System，也可以叫设计系统）是可复用组件的集合，由清晰的标准引导，通过机制化的组织流程和具象的指南与工具加以整合，以帮助开发者（设计、研发等）高效且一致地创建大量的应用，并且动态地确保用户体验的一致性。 需要指出的是，设计体系不只是组件库，不只是样式指南。当你浏览上面这些案例内容的时候，你固然会看到组件库和样式指南，但更值得关注的是它们陈述的设计目的、设计理念、设计原则、设计模式、设计与工程同步的方法等等。 Figma 团队做了一个专门以设计体系为题的网刊，域名为 。该网站有大量围绕设计体系的文章、教程及代码库。 总的来讲，Figma 组件库是设计系统中的一部分，是沉淀设计规范的设计资产。作为连接设计师和设计师、设计师和开发的桥梁，组件库首先应该是灵活易用的；其次，组件库是需要跟随产品不断进化的，这就要求它是容易被维护的，否则它就会落后于产品迭代，直至逐渐被遗弃。 二、Figma 组件库如何助力设计提效 1. 线上调用、实时同步 跨团队使用组件库(样式、组件)、实时更新、组件库的主题颜色一键切换、组件可以增加提示语等功能，所有的调用方式都是线上的，不需要任何本地文件的传输。如果组件库有更新，只需要 Review 之后 Update 即可实时同步。 2. 多人协作、共创共建 Figma 组件库可以有多个设计师共同创建，大家只需要约束好相应的组件层级嵌套规范，每个人可以负责自己所属的模块，分别更新、分别发布。 3. 灵活拼装、自由组合 Figma 组件库有非常高的自定义拼装能力，不解除组件的基础上也能够改变一些颜色、圆角、布局间距等。对于一些特殊的业务场景，也能将基础组件拆分开进行组合。 三、Figma 组件库搭建经验分享 1. 原子设计理论 提到组件库，不得不提到原子构建理论。Atomic Design(原子设计)是构建Design System 的核心指导理论。化学中，所有的物体都是由原子构成，原子组合构成分子，分子组合构成有机物，最终形成了宇宙万物。 2013年 Brad Forst 将此理论运用在界面设计中，形成一套设计系统，包含5个层面：原子、分子、组织、模板、页面。那么对应设计系统来说，我们的颜色、字体、图标以及按钮、标签等都会对应到相应的原子和分子，通过组件之间的搭配组合，最终构成页面。 2. Foundation 全局基础样式 在设计系统中，基础样式可以理解为构成设计稿最基础的「原子」。如果你的设计稿中全部都使用共享样式，当后续需要调整时，只需要调整样式库即可，设计稿会跟着变化，而不需要一个个调整；样式库还可以通过 Design Token 来映射到前端代码中，以提高最终开发的还原度。 样式是 Figma 中的一些可以复用的模式，目前支持四种： 1）颜色样式（Color） 颜色样式可以用于填充颜色、描边颜色、文字颜色。是页面整体风格表现的重要基本元素，它可以建立品牌的识别性，梳理页面的视觉层级关系，突出内容并平衡其他视觉元素。建议大家可以按照功能和属性将颜色进行分组命名，比如，比如品牌色、成功色、警告色等，并将默认、悬浮、点击、禁用等颜色放在一组，方便团队其他设计师使用。 2）文本样式（Text） 文本样式中包括：字号、字重、行高和字距等。需要注意的是不要单纯的将名称命名为T1、T2等纯符号性的名称，可以在后面加上适当的语义化描述，比如一级标题、常规正文等文案，同时也可以在描述里添加对应的使用说明，这样当鼠标悬浮在这个样式上，会给用户带来提示性的预览。这种办法同样适用于颜色、阴影等全局样式，会更加方便大家调用且能够很好的解除新用户的使用疑虑。 3）效果样式（Effect） 效果样式包括：外阴影、内阴影、模糊、背景模糊等。阴影值应该遵循现实物理世界中物体的特性。因此在阴影的设定上采用了三层阴影的表达方式，让阴影更加柔和，更符合真实光源下的物体状态。物体的高度直接影响阴影，离地面越高阴影越大，模糊值越高，反之相反。 4）布局栅格（Layout Grid） 横向和纵向布局参考。可以通过栅格样式来制定全局的尺寸和间距规范，尤其是用在响应式网