不会用UI设计干货Figma吗？
3.1组件
组件和实例:组件是父组件，而实例是副本。组件可以删除和修改，但不能反转成组。不能直接编辑实例，但可以将其反转成组，然后进行修改。存储组件没有固定的位置。最初模块化的组是唯一的组件矩阵，组件不会放在组件页面中，而是存在于原始位置。
组件和实例是分离的。简单的理解就是你原来设计的一个元素通过组件函数打包成组件A，也就是原来的组件A，这时在左边的Assert模块下面会有一个固定的组件(类似于组件库模块)。当您从assert模块中拖动一个新组件A或者从原始组件A中复制一个新组件A时，这个新组件A就是一个实例，并且该实例可以恢复到一个组中。
3.11如何找到原始组件？
首先需要说明的是，Figma的组件管理方式是灵活的，但是和Sketch相比，确实不够规范。在这里，仍然建议设计人员创建一个新层，以组件命名，并将所有原始组件放在此页面上，以便于管理。
这一层的主要目的是管理原有的组件，比如需要修改大量组件时，切换到组件层进行快速修改，修改后再快速映射到所有的设计草稿。
当需要调用组件时，建议使用官方提供的Assert模块，通过拖拽的方式调用组件实例。
在实际工作场景中，我们需要从实例跳转到原始组件，以便在进行大量效果修改时，可以通过属性检查器中的组件图标快速跳转到原始组件。
3.12示例操作
在实际工作中，我们会遇到用一个相似的组件创建一个新组件的场景。这时，我们需要将组件反转成组，然后进行编辑。在Figma中，只有实例可以通过右键单击或在属性检查器区域中执行“分离”来反转。
实例命令。
当直接在当前运行的实例上进行一些更改时，可以通过覆盖功能将当前属性同步到组件和所有实例。
方法是在右边的属性检查器中对主要组件执行推送覆盖。
3.13组件库的使用
如何上传和维护元件库？
Figma的组件库系统非常友好，易于维护。设计人员只需要将设计好的构件系统和样式系统放在一个文件中，然后就可以基于当前文件已有的样式和构件直接建立构件库。他们只需要在Assert的库入口进入组件窗口，通过组件库窗口的发布功能进行上传，团队成员就可以获得组件库的内容。
组件库的后续维护只需要修改完善文件，然后返回库窗口进行更新即可。当然，在你修改完组件库之后，Figma会自动弹出一个快捷窗口让你快速更新组件库，这也是一个不错的方法。
当您更新组件库时，使用组件库内容的其他设计人员将同步接收更新消息，并可以快速同步到最新版本，以确保设计一致性。
如何使用团队成员上传的组件库？
在库窗口中，团队已经公开的组件库将以列表的形式显示。设计师只需要点击你的目标元件库左侧的开关，就可以唤醒元件库，回到你的文件画板。此时，组件库的内容，如组件、颜色样式、字体系统等。，可以调用。
如果想快速查看组件库中的内容，可以使用Option+2快速调用Assert resource窗口，并在左侧的层列表中查看。
3.2反应约束
通过约束函数的官方定义，我们可以更容易理解这个函数。首先要说明一下它的约束条件。约束功能只能在框架中起作用，并且只有框架中的元素才会显示约束工具。所以官方定义为“允许你将设计元素固定在母框的不同位置”。所以请记住，约束函数是建立在框架的基础上的，其主流使用场景是构建平滑布局以适应不同的设备尺寸，即当设计者改变框架尺寸时，框架中的元素会自动按照预设的规则进行固定。
但在现实场景中，响应式约束的作用并不仅限于此，而是可重用、可快速编辑组件的必要条件。Figma的框架不同于Sketch的画板工具，可以互相嵌套，不影响增加复杂度的问题。所以可以通过约束和框架，再加上我们后面要讲的Auto，组合成一个布局标准化的组件系统。
布局功能可以构建一个自由度很高的超级组件，可以随意调用，可以根据真实的填充数据自动布局。这样构建的组件一方面还原了真实场景中的设计效果，另一方面也大大减少了设计人员的重复劳动。
以下是反应约束的不同条件及其相应的影响。
反应性约束的常规情况。
3.3自动布局(Auto layout)
自动布局工具是制作复杂组件的核心技能，它可以设计高度自由编辑的组件，甚至是带有响应约束的半成品页面。
一般来说，当我们谈到构件系统时，我们主要关注它的规范一致性和设计资源管理，但实际上，构件库在提高设计人员的效率和减少重复性工作方面可以发挥更强大的作用。常规组件被调用后进行修改需要一定的努力，但通过自动布局工具设置规则后，设计人员可以根据内容填充器沉淀出一组可以直接使用并自动更改的超级组件，甚至是成熟的典型页面，可以大大提高设计效率，减少移动、复制、填充内容等基本操作的时间浪费。
接下来，我实现了最简单的情况，然后搜索组件需要填充真实的数据来模拟真实场景中的样式。设计者只需要输入新的填充内容，组件中的其他元素就会自动匹配到相应的正确位置。
自动布局按照常规布局规则分为三个属性，即左右间距、上下间距和元素间间距。
选择多个元素，执行Shift+A(建议熟悉快捷键提高效率)后，会为这些元素建立自动布局，可以在右边的属性检查区设置规则。
例如，我需要创建一组水平排列的卡片。这时候我可以先设计三张卡片，然后选中，执行Shift+A，创建一套横排自动布局(横排竖排也可以根据你真实场景中元素的排列方式改为右边竖排)。还有一招就是直接在一张卡片上执行Shift+A命令，然后选择组内的卡片进行复制，命名为CMD+D，之后每张复制的卡片都会按照预定的规则进行排列。
如下例所示，元素和元素组合形成自动布局的组件，而自动布局的组件组合可以形成更复杂的大兴组件，甚至是典型的模块和页面。建议设计人员快速掌握这一技能的方法是，从提高设计效率、减少重复劳动的出发点出发，将其投入到实际需求中，设计出自己的典型组件模块。
3.4***享受时尚
关于* * *享受式，从素描转型到Figma的同学应该不陌生。* * *享受风格是组件库的核心组件之一，主要包括颜色、字体和各种风格效果。这里着重强调Figma***享受式和素描***享受式的区别。在Figma中，风格的划分更加细致，* *包括颜色、字体、效果三大类。
以颜色为例，Figma中的颜色样式可以自由应用于图形、笔画、字体等各种细分元素。，没有任何限制，可以自由搭配各个元素。以字体为例，字体样式只包括字体本身的属性，如字号、字重、行高，不包括颜色。换句话说，可以自由使用字体样式的颜色样式。
一般来说，sketch更注重常规理解下组件系统的实际应用场景。比如字体风格，是由字体族、字号、字重、行高、颜色的所有属性组成的，而Figma强调的是更高的自由度和可编辑性，孰优孰劣不是一句话能说清的。Sketch在组件的严密性和自封闭完整性方面更好，FIG在组件自由度和组件嵌套组合效率方面更好。
3.5交互式原型
在设计软件中，Figma我想称之为最强的交互功能，极简的操作逻辑，优秀的实现效果，使其在中小复杂度交互场景下，丝毫不逊于专业UI动态设计软件。在FIgma的交互模式中，可以看到原理的影子，背后的设计逻辑高度相似，符合UI设计领域产品交互快速输出的场景。
如下图所示，界面之间的交互逻辑可以通过选择初始画板或其元素，然后简单地连接它们来完成。当然，如果设计师对此不满意，可以在右边的属性检查器中做一个更精致的过渡效果。Figma所有者悬停完美的交互手势供设计师选择，如点击、悬停和拖动。
然后就是转场效应。这里我只推荐一种交互方式，就是Smart Animate，一句话，智能。
Animate重现了原理元素演化的逻辑，所以如果你是原理的忠实粉丝，可以在FIgma交互模式下无缝代入原理的体验中。
另外，一个需要特别说明的交互功能是弹出式交互打开。
过度地.使用这种交互将调出一个覆盖图，它适用于弹出的场景。方法如下图所示。Figma互动模块功能很多，有兴趣的可以自行探索。对于大多数设计师来说，掌握基本的Figma交互原型功能，已经可以让你的演示事半功倍。
不幸的是，一次只能演示一个过程。如下图所示，有编辑权限的设计师需要将回放功能固定在初始画板上，演示模块会以此作为当前交互线程的起点。如果您有多个交互式线程，您必须手动调整演示的起点。
3.5输出
将链接直接分享给相应的利益相关者。PM可以直接对视觉稿进行评论，快速沟通解决问题。开发人员可以切换到开发人员模式来查看草图注释。