figma-组件教程

原文链接https://www.cxyzjd.com/article/weixin_33586619/112414043
Figma 最强大的两个特性就是组件和共享样式。你可以通过它们来系统性地复用一些界面模块和样式属性。我们创建一个组件后，它就是一个 master 组件，之后从它复制出去的组件都是它的组件实例，修改 master 组件会同步到它所有的实例。所以，当你需要更新一些东西时，比如说基本链接颜色和某个图标，只需要调整 master 组件或来源样式即可。
对于不同的付费计划，Figma 组件和共享样式有不同的使用范围：

• 免费模式：在 Figma 的单个文件内
• 专业版：在 Figma 的不同项目或文件内
• 团队版：在 Figma 的不同团队之间

当我们在创建、命名或组织组件和样式时，需要考虑很多很多事情。所以，在这里我们整理了一份最佳实践指南，来帮助你更好地使用 Figma。文章较长，你可以冲一杯咖啡，边喝边看。
在开始之前，你需要先弄明白哪种付费计划适合你。下面有一份文章目录，你可以选择性地跳跃着观看感兴趣的部分。

• 快速概览
• 什么时候该创建组件？
• 组件最佳实践
• 样式库和一些小技巧
• 组织你的共享库

• 最后的想法

  快速概览：组件和样式是什么？

  如果你已经知道了组件、样式和共享库，可以跳过这一章节。
  
  创建、发布、共享组件和样式
  组件是可以在你的设计中反复使用的页面元素。它可以简单到一个独立的按钮，也可以复杂至一个完整的导航条（有很多元素组成，比如 logo、头像、按钮和菜单）。你会发现 Figma 组件类似于 Sketch 中的 Symbol，但是又有一些不同之处，稍后会详细介绍
  这里有一份设计师通常会转为组件的元素列表：

• UI 组件

• 公司 logo 或其它品牌资源
• 图标
• 设备模型
• 各平台原生组件（Android、iOS、Linux、OSX 等）
• 鼠标光标
• 参考线R或注释
• 设计协作中使用的便利贴或投票贴纸
• 流程图元素，比如箭头、流程节点形状

组件实例：一旦你创建了一个组件，我们称之为 master 组件，就可以从它这里复制出组件的实例。当我们改变 master 组件时，他的所有实例组件都会跟着改变。比如说，如果你将一个按钮组件的颜色改为红色，然后发布这些更新，所有从这个组件复制出去的组件实例都将会接到更改通知，你可以决定是否要更新它们。
共享样式：共享样式是一些可以复用的属性，比如说字号、颜色等。在 Figma 中，你可以从文字、颜色、栅格和效果（投影、模糊等）来创建共享样式。如果你发现某个元素样式复用频率很高，可以考虑将它的样式属性提取为共享样式。
库：在 Figma 中，你可以通过发布组件和样式来将它们共享出去，这样就可以在其他文件中使用了。发布之后，在其它使用了该组件或样式的文件中就会接收到更新提示，你可以选择更新或仍然使用旧版本。

你可以在共享库中放任何需要复用的元素

组件

何时应该创建组件？

这个问题会经常浮现，而它的答案也会因为设计师的工作偏好而不同。通常地，我们推荐在设计流程中越早创建组件越好。一旦你发现两个页面中出现了重复的元素，就是时候考虑是否要将它转换为组件了（即使此时还处于低保真阶段）。可能你会不断地打磨修改设计，但是在早期将它们做成组件意味着以后的每次修改都只需要做一次就可以了，因为当你修改了 master 组件之后，它所有的组件实例都将会随之更新。
不同于 Sketch，你可以将 master 组件放在任意地方，一般来说我们会就近放置，这样当我们想要调整时会很方便。但是一些公司会将这些组件放在一个单独的设计系统文件中来管理。如果你觉得你还在探索产品设计，不想过早地考虑组件，那么就再等等吧，不必因此影响了设计的流畅性。

在你的工作流程中尽早创建组件可以帮助你在大面积更新时节约时间
当你的团队想要把这些组件模式应用于其它产品时，就要考虑将其拆分到一个独立的文件中，形成一整套设计系统了。在这个阶段你可以将它们的结构、命名和属性进行精细化组织，来保持设计系统的统一和易用。那么该如何设计更好的组件呢？让我们来看看最佳的设计实践需要考虑哪些内容。

将组件进行原子级的结构划分

当你开始构建高保真的组件时，尤其是当你想把它们作为共享组件时，就需要考虑从最小的层级去创建组件，即不可再分的原子级。这样，你就会发现你的设计模式会很统一，比如说按钮的形状或卡片的形状。
一个比较好的习惯是创建一些原子级可复用的元素，将其嵌套在其它组件中。想象一下这个场景：将一个基本形状转换为组件（可复用的原子级组件），然后将它嵌套进所有按钮组件内作为基本形状。这样，当你想要改变所有按钮的形状时，只需要改变这个原子级组件就可以了。
继续考虑上面的例子，假设我们的按钮有主要按钮和次要按钮两大类，每一类都有桌面版和移动版，每一种都有四种状态（正常、禁用、按下和聚焦）。这么算来，我们一共有 16 种不同的按钮组件。假如你没有在它们里面嵌套一个原子组件，当你需要改变所有按钮的形状时，就需要一个个去修改。所以说，合理地使用原子级组件进行嵌套可以让你的设计系统更易维护。

在组件内嵌套原子级组件让你在需要统一修改时更加方便
小技巧：以 _ 和 . 开头的组件在发布时将会被排除在外。所以，我们可以以 _ 和 . 作为原子级组件的开头，因为我们不需要在其它地方使用这些原子级的组件，它们只是作为其它组件的公共部分嵌套之用。这样当你发布了组件时，这些原子级组件就不会在组件面板中出现，可以极大地提高组件面板的使用体验。

通过合理地结构层级来处理组件的状态、层级和变体

当你在构建 UI 组件时，肯定需要经常思考如何处理相关联组件——比如不同状态、主题（白昼模式和暗黑模式）或其它一些变化。那么，该怎么处理它们呢？设计师又是如何与之交互的呢？这里有几种方法：
在一个单一组件内嵌套状态和变体
Figma 允许你改变一个组件实例的图层样式，这样你就可以在需要修改时随时修改它。因此，你可以将一些组件嵌套在另一个组件内，通过显示隐藏内部的嵌套组件来改变外层组件的状态。这样，你就可以通过一个组件来变化出不同的状态。这样做有一些好处，但也有一些缺点。

一个组件内嵌套四个不同样式的组件，通过切换它们的显示隐藏来变化出不同状态
好处：你只需要维护一个组件，使用时在左侧组件面板中也只需要找到这一个组件，很容易找到。
缺点：对于其他使用这个组件的设计师来说可能不太直观，因为他不能直接看到这个组件有多少种状态。这个组件的不同状态不够明显，这是因为只有当你在左侧图层面板中更改了内部嵌套组件的可见性时，才能看到它的不同状态。同时，这种方式也会产生很多多余的图层。比如说，一个按钮组件如果由一个文字图层和一个矩形图层组成，那么当你需要修改文字时，就需要修改每个状态下的文字图层。这种场景使用下面的方式处理会更加优雅：
将不同状态和变体拆分为单独的组件
另外一种方法，也是我们推荐的方法，就是将不同的状态和变体拆分为单一组件。

我们推荐将组件的不同状态拆分为一个个的独立组件
好处：这样做的好处是，我们可以从左侧组件面板中，或者右侧相关组件菜单中很方便地找到想要的状态。当我们想要切换状态时，不需要通过切换内部组件的可见性来实现，而是直接在右侧相关组件中切换。如果你在不同状态的组件内使用了同名的文本图层，当你切换相关组件时文字内容还会保持原样。这样做对于大型组件性能也更高，试想一下，一个复杂组件如果有上百个不同状态，在内部嵌套那么多组件将会非常复杂。
缺点：这种方式的缺点是当业务变化时组件数量会不断增多，你需要维护更多的组件。但是，只要你按照上述的原子层级去构建组件，维护起来就不会太难。最后还有个小技巧，当组件增多时，在组件面板中的列表看缩略图将很难分辨，此时你可以考虑给组件增加一些描述信息，这样鼠标移上去就可以看到提示。
使用组件来实现不同主题
你肯定会遇到过这样的场景——需要设计一系列组件，拥有不同的视觉风格，比如说不同主题、白昼和暗夜模式，或者不同的品牌感。这里有一个办法可以帮你实现：你可以选择一个已经存在的组件实例，改变它的一些样式，然后再从它再创建一个组件。这样，你就得到了一个新的组件，而它的内部是另外一个组件的实例。这样，你可以单独调节它的样式，并且当你调节内部组件的 master 时它也会跟着变。下面这幅图展示了这种方法的应用。

通过组件内嵌套组件，你可以调节原始组件（内部的组件）的样式，来做到不同主题的组件同步变化

本文链接：https://blog.csdn.net/weixin_33586619/article/details/112414043