figma的一些常见问题4.28

figma右下角添加投影时，里面有个Spread属性，会发现有时是禁用状态，原因是投影的Spread属性只对剪裁内容的Frame有效。

figma导入字体 figma如何导入字体

尝试一下把clip content前面的对勾勾上就可以了，去掉spread就是禁用。

在右上角点击下拉菜单，找到Pixel Preview，设置为1X即可，也可以用快捷键 ^P

选中一个字体样式——Edit编辑——select All with same Text Properties。

Similayer插件，批量选中，一键替换。

UI设计干货Figma的使用方式你还不会吗？

文中还提到了Sketch迁移到 Figma 的一些问题和解决方案，来，我们一起学习吧。Figma进阶功能

3.1 组件(components)

组件和实例：组件是母体，实例是复制体，组件可以删除和修改，不可逆向为组，实例不可直接编辑，但可以逆向为组，然后修改。没有一个固定位置用来存放组件，你最初组件化的那个组，就是唯一的组件母体，且组件不会被收起在一个组件页中，而是存在原本的位置。

组件和实例是分开的，简单理解就是，你最初设计的一个元素，通过Component功能打包为组件A，这个组件就是原始组件A，此时在左侧assert模块下就会存在一个固定组件(类似组件库模块)，当你从Assert模块中拖动出来一个新的组件A，或者从原始组件A复制一个新的组件A，这个新的组件A就是实例，实例可以被还原为组。

3.11我如何找到最初的组件?

首先需要说明，Figma的组件管理方式很灵活，但相较于Sketch的确不够规范，这里仍建议设计师新建一个layers,以组件来命名，将原始组件都放置在这个页面，易于管理。

该Layer主要目的在于管理原始组件，例如当需要大批量修改组件时，切换到组件Layer快速修改，修改后快速映射到所有设计稿。

当需要调用组件时，则推荐使用官方提供的Assert模块，通过拖拽调用组件实例。

在实际工作场景中，我们需要从实例跳转到原始组件，以进行大批量效果修改时，可通过属性检查器中的组件icon快捷跳转至原始组件。

3.12实例操作

在实际工作中，我们会遇到使用一个类似组件来建立新组件的场景，此时需要将组件逆向为组，然后进行编辑，在Figma中仅实例可以进行逆向，方法是右键，或者在属性检查器区域执行Detach

instance命令。

当直接在当前正在操作的实例上进行少量变更后，可以通过覆盖功能将当前的属性同步给组件和所有实例。

方法是在右侧属性检查器执行Push Overrides to Main Components。

3.13组件库的使用

如何上传和维护组件库?

Figma的组件库系统极其友好，易于维护。设计师只需要将已经设计完成的组件系统和样式系统放置在一个文件中，然后就可以基于当前的文件已有的样式和组件直接建立共享组件库，只需要在Assert的Library入口进入组件窗口，通过组件库窗口中的上传(Publish)功能,完成上传，团队成员就能获得该组件库内容。

后续维护组件库的工作只需要在该文件上进行修改和完善，随后回到library窗口进行更新。当然，在你对组件库进行修改后，Figma会自动弹出快捷窗口以供你迅速更新组件库，这也不失为一种好办法。

当你更新组件库后，其他使用了该组件库内容的设计师会同步收到更新消息，且可以快速同步到最新版本，以保证设计一致性。

如何使用团队成员已上传的组件库?

在Library窗口，团队已公开的组件库会以List的形式展示，设计师只需要点击你的目标组件库左侧的switch，即可唤醒该组件库，回到你的文件画板中，此时即可调用该组件库的内容，如组件、颜色样式、字体系统等。

想要快速查看组件库内的内容可以使用Option+2，快速调起Assert资源窗口，在左侧图层列表查看。

3.2响应式约束(constraints)

通过约束功能的官方定义我们更容易理解这个功能。首先要说明其限制条件，约束功能只有在Frame中才可以发挥作用，也只有Frame中的元素，才会展示Constraints工具。因此，官方定义其为：“允许你将设计元素固定在父框架的不同位置”，所以，请谨记约束功能以建立Frame为前提，而其主流使用场景就是构建流畅的布局以适应不同设备尺寸，即当设计师将Frame尺寸进行变更时，Frame内的元素会自动按照预先设定的规则固定位置。

但在真实场景下，响应式约束的功能并不局限于此，它更是可复用、可快速编辑组件的必要组成条件。Figma的Frame不同于Sketch的画板工具，可以互相嵌套且不会影响到复杂度产生墒增的问题，因此可以通过Constraints配合Frame组合成规范布局的组件系统，再加上我们后面要讲的Auto

layout功能，可以构建出高自由度，可任意调用，且能够根据真实填充数据自动布局的超级组件，这样构建的组件一方面还原了真实场景下的设计效果，一方面大大减少了设计师重复性工作。

下面是响应式约束的不同条件及对应的效果。

响应式约束的常规案例。

3.3自动化布局(Auto layout)

自动化布局工具是制作复杂组件的核心技巧，与响应式约束搭配可以设计出高度自由可编辑的组件乃至半成品页面。

一般来说，我们谈到组件系统主要聚焦的是其规范一致性，设计资源管理等方面，但实际上，组件库在提升设计师效率，减少重复性工作方面能够发挥更强大的作用。常规组件调用后需要花费一定精力修改，但通过自动化布局工具设定好规则后，设计师能沉淀一整套可直接使用、根据内容填充物自动布局变化的超级组件，甚至是成熟的典型页面，可极大提升设计效率，减少在移动、复制、填充内容等基础操作上的时间浪费。

下面我实现了一个最简单的案例，再该search组件中需要填充真实数据以模拟真实场景下的样式，设计师只需要输入新的填充内容，组件内其他元素会自动匹配到对应的正确位置。

自动布局按照常规布局规则划分为三个属性，分别是左右空隙、上下空隙、元素间空隙。

当选中多个元素，执行Shift+A(建议熟悉快捷键提升效率)后，会为这些元素建立自动布局，规则可以在右侧属性检查区设定。

例如我需要建立一组横排的card，此时可以先设计好三个card，然后选中它们，执行Shift+A即可创建一组横排的自动布局(横排竖排根据你真实场景下元素的排列情况，也可以在右侧更改横排为竖排)。另外一种小技巧是，直接给一个card执行Shift+A命令，然后选中组内的card执行复制命名cmd+D，后复制出的每一个card也会按照预定规则排列。

如下图案例所示，元素与元素组合构成自动布局的组件，自动布局的组件组合则能构成更复杂的大兴组件乃至典型模块、典型页面。建议设计师快速掌握该技巧的方法是将其套入实际需求中，从提升设计效率，减少重复工作的出发点开始设计自己的典型组件模块。

3.4共享样式 (style)

关于共享样式，从sketch转型到Figma的同学应该再熟悉不过了，共享样式是组件库的核心构成之一，主要包括颜色、字体及各种样式效果。这里着重说明一下Figma共享样式与Sketch共享样式的差异。Figma中对样式进行了更为细致的划分，共包括颜色、字体、效果三类。

以颜色为例，Figma中颜色样式可自由运用到图形、描边、字体等各细分元素上面，无任何限制，可与各元素自由搭配。以字体为例，字体样式仅包括字体字号、字重、行高等字体本身的属性，不包括颜色，换言之，Font样式的颜色可以自由使用Color样式。

概括来讲，Sketch更注重常规理解下，组件系统的实际应用时的场景，如字体样式是由字体字族、字号、字重、行高、颜色所有属性一同构成的，而Figma强调更高的自由和编辑性，孰优孰劣无法一言蔽之，从严谨性和组件自我封闭完整性来讲，sketch的要更好一些，但从组件自由度，组件嵌套组合的效率上来讲Figma要更好一些，所以关键在于设计师能否合理运用，快速掌握技巧并提高效率。

3.5交互原型

Figma的交互功能，在设计软件中我愿称之为最强，极简的操作逻辑以及优秀的实现效果使其在中小复杂度的交互场景下不逊色于专业UI动效设计软件。在FIgma的交互模式下能看到Principle的影子，其背后的设计逻辑高度相似，符合UI设计领域快速输出产品交互物的场景。

如下图所示，界面间的交互逻辑通过选择起始画板或其中的元素然后简单的连线即可完成。当然，如果设计师不满足于此可以在右侧属性检查器制作更精致的过度效果。Figma拥有者完善的交互手势可供设计师选择，如点击、hover、拖拽等。

然后是过渡效果，在这里我只推荐一种交互方式，那就是Smart Animate，一句话概括，Smart

Animate复刻了Principle元素演变的逻辑，所以如果你是Principle的忠实拥趸，那在FIgma交互模式下你可以无缝代入到Principle的使用经验中。

除此之外，需要特殊说明的一个交互功能是弹窗交互Open

Overly。使用该交互会调起一个覆盖层，适合弹窗类场景。方法如下图所示。Figma交互模块有很多功能，感兴趣的可以自行探索，而对于大部分设计师来讲，掌握最基础的Figma交互原型功能就已经能够让你的演示事半功倍了。

遗憾的是，每次演示只能演示一条流程。如下图所示，有编辑权限的设计师需要将播放功能固定到起始画板，演示模块会以此为当前交互线程的出发点。若你有多条交互线程，那只能手动调整起点进行演示了。

3.5输出

直接分享链接给对应的利益相关者即可。PM可以在视觉稿上直接评论，快捷沟通解决问题。开发可以切换到开发者模式查看切图标注。

Figma设计流程实用技巧

本文将带你近距离了解Figma的用途，并提供给你20个实用技巧，让你更快更好的使用这个著名的协作交互设计工具进行工作。

本文中大多数快捷键都提供Windows和Mac两个版本，Windows上的 Ctrl 键对应Mac上的 Cmd 键， Alt 键在Windows和Mac上（Option/Alt）通用。

例如： Ctrl / Cmd + Alt + C 对应 Windows上的 Ctrl + Alt + C 以及Mac上的 Cmd + Alt / Option + C 。

我们做设计的时候无时无刻不在使用图片，如果我们能够更轻松、更直接地改变单个和多个图像，那将非常有用。

Figma可以导入多张图片（使用快捷键 Ctrl / Cmd + Shift + K ），并将其一一对应到你希望它们出现的图层（对象）上。这个功能非常方便，你可以看到导入的图像然后进行实时放置。

[图片上传失败...(image-2c49fe-1568608600577)]

很多时候，我们在准备导出设计（如icon或者一组图片）的时候，或是当我们对设计文件需要执行“深度整理”的时候，都需要重命名一组图层。

Figma可以让你批量重命名图层（以及frame），这个功能非常方便。你可以重命名整个图层的名字，也可以只是图层名字中的一部分。你也可以查找重命名一个图层的某个字符，添加不同的数字到图层以方便导出到独立的文件。你也可以通过在“Match”字段里面输入关键字后执行查找替换。

[图片上传失败...(image-17f202-1568608600577)]

在设计团队中使用Figma会让工作更加具有协作性。但是通常需要在同一个设计文件上进行工作，而且有时还是同时展开的。

为了知道哪个Frame正在工作中，以及哪个已经完成了，我们可以添加emoji表情符号（ Windows快捷键: win + . 或者 win + ; ， Mac快捷键： Cmd + Ctrl + space ）在frame名称的前面，这样，每一个人就可以知道当前frame的工作状态了。

[图片上传失败...(image-915a3d-1568608600577)]

Figma最伟大的功能之一就是可以在Frame中重组物件。特别是在使用icon，列表以及标签组的时候非常有用。

[图片上传失败...(image-acf8dd-1568608600577)]

本地样式（Local Styles）是Figma最棒的功能之一。它可以让你创建设计系统（design system）以方便你重复使用组件。如果你修改了母版样式，它将同时改变所有相关联的组件。非常强大，对不？但是，如果没有使用正确的方式进行命名和分组，那么你将丢失所有的样式。下面将分享几个组织样式的实用技巧。

你可以通过添加“/”在子分类来组织你的文本样式。例如，在“ Heading ”后面加上“ / ”，这样所有的标题文本都将在“ Heading ”这个分类下面了。这对于有很多不同尺寸字体的情况非常有用，可以让你更快定位到指定的文本。这个方法对于“文本”和“颜色”都适用。

[图片上传失败...(image-37e624-1568608600577)]

对在什么地方使用不同的组件及如何使用这些组件的样式添加快速说明是非常有用的，特别是当你与团队或者其他设计师共同协作的时候。你可以在编辑文本样式，颜色样式或其他组件的同时添加说明文字。

很多时候我们会遇到大量的组件，图标等。而通过使用下拉菜单切换实例并不是最好的做法。这里有个小技巧，就是你可以按住 Alt + Ctrl / Cmd 键从侧栏拖动组件到你想要替换的组件上。简单，快速！

[图片上传失败...(image-b5c7ad-1568608600577)]

当复制一个元素或拷贝一个元素样式的时候，可以快速拷贝元素属性（ Ctrl / Cmd + Alt + C ），然后粘贴（ Ctrl / Cmd + V ）到一个新的元素上。对于具有多属性的图像或者样式元素，这个功能非常有用，例如：填充或者描边等。

[图片上传失败...(image-c23b37-1568608600577)]

另外一个有用的快捷方式就是拷贝单一属性，也就是说你可以选择拷贝哪个属性。从右侧面板选择属性，然后使用快捷键 Ctrl / Cmd + C 复制，再用 Ctrl / Cmd + V 进行粘贴到另外一个对象上。

[图片上传失败...(image-bdb085-1568608600577)]

当你的设计文件非常复杂，或者你想清理你的设计系统，搜索相同的属性（例如一个特定的颜色），然后修改 颜色样式 中的颜色这个功能将会非常有用。特别是你正在处理设计系统并且需要更好的组织所有的组件的时候，这个功能异常实用。

[图片上传失败...(image-731ff4-1568608600577)]

缩放元素以及它们的属性（描边，对象上的效果等）是非常有用的。在这一点上，Figma要比Sketch使用起来更简单，因为你无需选择对象的尺寸。当你缩放对象的时候，对象的尺寸和它的属性都将按比例调整大小。通过按住 Shift 键，你可以在放大或缩小物体的同时保持比例。

提示： 如果你只想改变对象的尺寸而不修改它的属性（描边，效果等），使用“Select”工具选择对象，然后使用属性面板进行尺寸修改。如果你使用缩放工具并且调整对象的尺寸，那么对象的尺寸和属性都会发生变化。

[图片上传失败...(image-d8cc74-1568608600577)]

当为不同的屏幕分辨率进行设计的时候，你希望调整的是屏幕frame的尺寸而不调整其内部frame所有元素的尺寸。为了实现这个，当你执行调整尺寸操作的时候需要按住 Ctrl / Cmd 键。奇迹出现啦！

[图片上传失败...(image-1146b9-1568608600577)]

使用Figma，你可以快速创建图表/弧形。无需在圆弧上剪裁路径来创建自定义的图形。看看下图如何创建一个加载圆弧，并且所有的数值都可以通过右侧的属性面板进行精确的控制。

Figma中改变群组元素边距的功能很实用。它让你在屏幕上布置一组元素变得垂手可得。该功能不仅适用于多个元素，同时也适用于单个元素。

当你开始着手大量组件的时候，在你的库中查找指定的组件有时会变的非常困难。而 组件关键字（component keywords） 功能让搜索变得容易起来。你可以对任何组件添加关键字，即使和组件的名字不同也可以，这些关键字让你查找组件更加容易。看下图的示例：

能够回到文件的之前版本这一功能非常让人欣喜。

无论出于什么原因（你犯了一个错误，或者客户需要你切换回较早的版本等。），能够返回较早的版本这一功能都非常有用。不仅如此，Figma还允许你拷贝 较早版本的链接 ，这样你就不必删除文件的近期版本了。非常聪明！

[图片上传失败...(image-f59769-1568608600577)]

通常需要使用UI套件库来开始新的项目。例如，当设计一些线框模型的时候会使用 Wireframy 套件。你只要激活该库就可以使用了。另外，Bootstrap Grid 和 Figma Redlines 也是会经常用到的套件。你可以在这里找到很多 免费的资源 供你使用。

[图片上传失败...(image-6bd3d2-1568608600577)]

Figma刚刚增加了将GIF文件添加到原型的功能，从而增加了在原型中添加用户交互动画的可能性。以下是Aris Acoba的预览：

[图片上传失败...(image-dc3953-1568608600577)]

Figma的 整理功能（Tidy Up） 非常实用，特别是当你需要快速重排网格中的元素或者将元素对齐的时候。结合第4条和第14条提到的实用技巧，该功能变得非常强大。此外，另一个执行整理的方式就是鼠标悬浮在所选元素的右下角，然后点击蓝色的图标。

[图片上传失败...(image-e269d5-1568608600577)]

Figma的查看功能也非常实用，虽然它比较难找到在哪里。在窗口右上角的设置（Settings）的下拉菜单中，你可以看到工作区域的设置。不仅可以显示标尺（Rulers），网格（Grid），启用/停用与网格对齐（Snap to Pixel Grid），而且当你需要专注不想被其他设计师干扰的时候，还可以隐藏其他参与者的光标。

[图片上传失败...(image-777ec-1568608600577)]

Figma最近发布了它全新的 插件功能 ，允许人们为他们的工作流程创建自定义的插件扩展。

插件对于整个Figma的生态系统来说意义非凡，并且可以提升工作流程 ，下面推荐几个常用的插件：

[图片上传失败...(image-81ad97-1568608600577)]

[图片上传失败...(image-9ae8da-1568608600577)]