2021年的第 21篇原创文章
距离2021年40篇原创目标还剩19篇
一年前，我发布了《sketch搭建组件库》系列的第一篇文章，带各位熟悉了组件库搭建所必要的两个功能——组件和样式。
而如今，当我们将战场迁移到figma后，组件库搭建同样是以这两个功能起手，看似差异不大，实则天壤之别，不论是底层逻辑还是用法都有着明显差异，这也是为什么很多初学者会觉得figma样式和组件不好用。
但如果能够掌握，效率提升的幅度非常可观。
今天，咱们就来讲下figma的样式和组件，文章依旧比较长，建议先收藏。动画较多，建议保持良好网络。
-
开头先说一个观点：任何时候，我们都要避免一次性设计。
01为什么要避免一次性设计
why
老朋友应该知道，我在之前的这篇文章里《我就不信了，看了这篇文章你还不懂原子设计》优雅而不失礼貌得diss过「一次性设计」。
一次性设计是啥？
它就好像我们吃外卖用的一次性碗筷，用了就没了，没办法复用到后续的每一顿干饭中。
设计同理，比如我做了一个按钮，定义了一个颜色，但不去考虑做成可复用的模板，那在后面的需求就又得投入新的成本去制作。不断用相同的时间干着同样一件事，不断得重复劳动。
一次性设计拖慢效率、摧残精力，总之，它是沦为作图机器的罪魁祸首。
但如果我们提前搭建好固定的模板套路，就可以达到「复用」的目的，从而真正得解放生产力。
而设计领域中将复用性践行到极致的一套理论，就是我之前所讲的原子设计。下面再简单和铁汁们讲下。
02原子设计
atom design
原子设计理论类似开发领域的组件化思维，它由著名网页设计师Brad Frost创建。这个理论由五个层级来作为核心支撑：
1.Atoms原子
比如色彩、文字、图标、形状等；
2.Molecules分子
比如搜索框、选择器、按钮等；
3.Organisms有机体（组织）
比如各种导流卡片、导航栏等；
4.Templates模板
交互设计师产出的原型图；
5.Pages页面
UI设计师产出的高保真视觉
原子设计的用处
1.基于原子设计理论，可以将原子、分子、组织作为一个个可复用的组件进行有序拼装，帮助我们像搭积木一样快速搭建页面，大幅提升效率，避免一次性设计；
2.标准化的规则保证产出物的高度一致；
3.易于扩展维护。产品迭代时，仅改动原子分子的属性，即可实现全局同步更新。
而在figma中，style样式共享和component组件两类功能完美契合了原子设计的理念。因此基于这俩功能，我们可以便捷得搭建页面乃至设计系统。
下面先聊聊共享样式——
03共享样式
style
我们都知道，静态视觉样式基本可以抽离出下面这五要素：形、色、字、构、质。
落实到figma中，形对应了圆角，色对应了颜色，字对应了文字，构对应了网格基准，质对应了效果（一般为投影）。
而其中可作为模板进行共享的样式包括颜色、文字、网格和效果。
在figma中，这四类样式的创建和管理方法是一样的，因此下面就单以颜色样式为例来讲讲。
颜色样式
相比sketch 69前的版本，figma的颜色原子更加透彻。只要定义了一个颜色，即可应用到填充、边框、文本及效果的任意样式中。
以蓝色为例演示下样式的创建、复用及编辑过程。
1.创建：
1.选中想共享的样式；
2.点击象征样式的四点按钮；
3.点击创建样式；
4.命名，可以通过/格式化命名实现
样式命名也可以跳过/格式化命名，因为figma样式面板支持拖拽嵌套编组，简单的拖拽操作即可快速分类。
2.复用：
1.选中想复用样式的对象；
2点击样式按钮；
3.选中目标样式；
4.复用成功
3.编辑：
1.点击空白处，右键属性面板就出现了定义的样式（这一步很隐晦，当时好长一段时间不知道样式在哪- -）；
2.hover至目标样式，点编辑按钮；
3.换个骚气的紫色；
4.按钮颜色也就跟着骚气了
基于这样的样式定义，我们便可以搭建出一整套的、可复用的色彩体系。网格、文本和效果的搭建方式与此一致，不再赘述。
04组件
component
颜色、文本、网格、效果，通过将上面这些原子进行组合，即可构建成一个拥有特定功能的分子。
比如一个按钮，它便可以通过8点网格、容器颜色、文本颜色和文本样式这些原子构成。
分子做好了，下面也同样该考虑它的复用性。原子通过样式复用，分子就通过组件复用。
组件的两类属性
figma中的component组件类似sketch中的symbol，都是通过搭建好模板来达到复用的目的。
组件分为以下两类属性，母版和实例
1.main component母版
由非组件状态的对象组件化而来，具有唯一性，统称为main component母板。
2.instance实例
由组件通过拷贝生成的子件，统一称之为instance实例。
实例拥有下面两层属性：
1.所有实例全部继承组件的变化
组件的最基本属性，对于组件化后的对象，只需要修改母件即可实现全局实例的同步更新。
2.实例不受母版束缚，可独立调整样式
sketch组件逻辑非常蛋疼，只能通过master来修改样式。如果有不同样式实例的制作需求，得为每个属性单独创建symbol再进行嵌套，随之而来的就是越来越多的组件数量，后续维护也会越来越复杂和难用。
但figma的实例，可以直接访问和编辑任何一个图层的样式，组件灵活性上完爆sketch！
组件的创建：
点击顶部四菱形图标即可创建；想创建多个组件直接下拉框里选择即可。
组件的复用：
除了复制粘贴的方法外，可以去Assets面板、或者今年8月刚上线的Components弹窗面板里去查找调用（快捷键shift+I）。
⚠️注意：
组件通过复制粘贴来复用只适用于两种情况：
1.同文件下完全适用；
2.对于跨文件的情况，组件只有在libraries中作为组件库发布后才可以跨文件粘贴复用（组件库下面会讲），否则，复制粘贴的方式只能直接拷贝母版，无法以实例的状态拷贝！
比如上面做好的button组件，同文件复制粘贴没有问题。
但对于跨文件复用的场景，如果跳过发布，由文件A直接拷贝到文件B，拷贝后显示的就是没有正确复用的母版状态；只有在libraries发布后，拷贝到文件B时才显示为被复用的实例状态。
组件的替换：
两种替换方式，一个是在右侧实例替换面板中查找替换；
另一种就是组件复用面板中（assets和components面板皆可），选中后拖拽到目标对象后，按住cmd+alt即可替换。
组件的编辑：
对于母版：
母版可以像普通图层那样任意编辑，而且产生的变化都会实时同步到实例当中。
相比sketch，figma的母版直接原位生成，可以边调整母版边查看它的效果，这一点非常灵活。
对于实例：
1.实例不受母版束缚，可以直接访问和编辑任意图层的样式，非常灵活和方便。另外，实例也支持元素的增减删除和复制移动。但无法调整布局。
2.实例的编辑可以逆向覆盖。只要在实例替换面板中点选 push overrides to main component，即可将当前的实例属性同步给母版及所有的实例。这也就意味着，全局组件的更新不需要都在母版中进行，非常灵活。
组件的管理
sketch的组件管理，需要通过大量的「/」格式化命名来实现编组嵌套，figma其实完全不需要。
如果你看过我上一篇文章应该就知道，基于frame的三大属性，只需要创建具有嵌套属性的frame，就可以轻轻松松得通过拖拽动作完成所有组件的组织。
可能有些小伙伴遗忘了，我再把这个例子拿过来复习～
比如，一个button分为了有icon和无icon两类，并且各自包含主、次两个状态。
传统的管理方式，是在所有的组件上都以/重命名来实现父子级关系的嵌套，这种管理方法效率很低，而且还得额外花费时间在画布上进行组件的整理。
但现在，只需要提前建好嵌套好的frame即可：
1.创建好frame画板（画板属性），将其命名为button作为一级容器；
2.frame画板内创建两个更小的frame（编组属性），分别命名default和icon，作为二级容器，并进行填充（形状图层属性）；
3.按钮命名无需再考虑嵌套，命名primary和secondary后，轻松的拖拽操作即可实现分组。
一方面省去了大量的命名时间，另一方面嵌套的过程也是组件可视化整理的过程，便于日后查看和管理，不至于组件散落在各处。
组件的嵌套
组件的嵌套，类似原子理论中「分子组合成组织」的过程。它所对应的元素往往是一些较为复杂的控件、卡片等。
它的嵌套逻辑和sketch类似，只需要将实例作为子级放到父级frame中即可。
比如我们上面做的按钮组件，将它的实例结合title、内容编为一个对话框frame，再将frame组件化即可完成一个组件的嵌套。
即便你忘了拷贝实例也没关系，组件嵌套后，会自动将原先的母版替换成实例。
05组件库
library
组件库制定的意义，就是让团队每一位成员都能用到最新的组件，提升效率、保证一致输出。那么figma中该如何创建和使用组件库呢？
那我们制作的按钮举例，我们希望它们能作为组件库被其他成员复用，那该怎么搞呢？
1.创建
1.Assert点击team library按钮（书本icon）；
2.library面板上，点publish；
3.二次确认面板，继续publish即可发布成功；
4.点击unpublish即删除组件库（慎点）
2.复用及更新
创完了组件库，团队成员的复用步骤如下：
1.team library开启想生效的组件库，开启后在assets中就可以找到组件库对应的组件了（可以同时开启多个）；
2.assets中查找和复用；
3.当原组件库发生变化，Review进行查看；
4.更新后，即可将变化同步到所有用到此组件库的文件～
至于编辑、替换和管理，在组件那儿已经说过了，这里不赘述。
✅一些小tips
1.组件库建好后，尽量鼓励团队小伙伴们从组件库中调用，而不是继续依赖于自己文件上制作的组件，否则组件库就失去了复用的意义（sketch习惯问题，这一步确实有些难，但很有必要）
2.规矩是死的，人是活的。组件库可以不断迭代升级，因此一旦发现体验不好等问题，完全可以提出来进行修正；
3.建议拉一个团队群来共同维护，任何新增或修正都需要告知团队所有人。
但是！！
我们的组件因为使用场景、业务的不同，并不会乖乖得维持一个理想状态。、
比如我们制作的按钮组件，它会基于当前优先级及交互态衍生出尺寸、颜色和线面三类维度。三类维度叠加后，生成的组件数足足有18个。
这就意味着，我们在调用某个组件的时候，你得大海捞针。
是不是跟sketch很像？冗余繁多的组件数量导致查找、替换所花费的认知成本都极高。而这个痛点，同样被figma的一个功能——变体所解决了。
这个变体算是个进阶功能，所以我把它放到了第三个章节——「成为高手」。小伙伴们敬请期待~
最后
finally
figma【稳扎稳打】章节的最后一部分，样式和组件篇到此结束。但愿这篇文章能让你远离一次性设计、保持复用思维，从而真正得解决生产力。
如果这篇文章对你产生了些许帮助，点个「在看」，让它帮助到更多的设计师。
我是Andrew，一位将写作当成事业的设计师。
下期见。
/ figma系列的其他文章，欢迎回看/
一起聊设计
公众号推送机制改版，文章不按发布时间排序啦。各位在公众号的右上角“…”（不是文章的右上角~）将转行人的设计笔记设为星标⭐，这样就不会错过每一篇文章了！
文章标题：figma样式和组件，一篇文章帮你全盘搞定（建议收藏）
文章链接：https://www.uied.cn/15348.html
更新时间：2023年04月16日
本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
