往期回顾
「教程 | Figma」三步创建你的第一个 Figma 设计稿
「教程 | Figma」五分钟熟悉 Figma 的设计工作台
「教程 ｜ Figma」三步学会用图层插入功能划分页面布局
「教程｜Figma」两步学会在 Figma 中调用本地字
「教程｜Figma」三步学会使用 Smart Selection 玩转图层网格
Components 是指那些在整个项目中会被反复使用到的 UI 元素，可以是按钮、图标、模态或者形形色色的图层组合。通过对这些 Components 的复用可以保持整个设计稿的一致性。Components 算一个可玩性比较高的 Figma 功能，了解下面四条规则可以帮我们快速上手：
  1. 母版 Component 中所包含的图层定义了这个 Component 的所有属性；
  2. 实例是你可以在设计稿中复用的 Component；
  3. 你对母版做出的任何改变都会立刻应用在实例上；
  4. 实例中的一些属性可以复写，这些变化不会影响母版。
豆瓣电影的海报下面都会放置这部电影的评分星级和具体分数。上手制作了几个 Component 后，笔者发现其支持的复写属性比 Sketch 中的 Symbol 要多，这就使得原来需要 Nested Symbol 才能实现的一些组件机制可以依赖简单的样式复写搞定。我们今天一起来做一个评分控件，熟悉熟悉这个功能。

教程相关

  • Figma 地址：www.figma.com
  • 教材地址：戳这里
  • 阅读时长：4分钟
  • 操作时长：10分钟

第一步，制作一组五角星

从工具栏调用「插入图形」功能插入一颗五角星，调整其大小和形状，参数如图。
将制作好的五角星复制四个，把五个五角星框选起来后使用 Smart Selection 功能整理成一行等间距的五角星图层组。
使用布尔运算把五个分开的五角星图层合成一个完整的图形图层。
插入文字图层，制作 Rate 的评分部分。
第二步，调整图层样式
把这组五角星图层的填充方式改为线性渐变，设置四个渐变节点，非别为黄黄灰灰，中间两个节点紧邻。
第三步，创建 Component
框选已经调整好的五角星组和评分图层，点击工具栏正中间「Create Component」功能，完成创建。
在图层管理栏中找到「Assets」中拖拽刚刚制作好的 Component 就可以使用了。
依次调整实例 Component 中不同图层的属性，更改评分控件的分数。
另外，最近太多人问了，建了一个Figma的交流群。扫下面二维码加群。
如果二维码失效，加微信号： qawsedr0125   备注figma
继续阅读
阅读原文