深度解析Figma实用技巧

5月 3, 2021 发表于: 视觉设计. 评论

本文主要根据我组的近期FIGMA实战经验，从实用性的角度，总结的一些实际应用中的问题，并提供解决方案和使用建议。

Figma 是一款基于 Web 的在线设计工具，其以其轻量、便捷、跨平台使用、协同便捷的特点，迅速吸引了广大设计师们的注意。

本文主要根据我组的近期FIGMA实战经验，从实用性的角度，总结的一些实际应用中的问题，并提供解决方案和使用建议。帮助新晋FIGMA设计师们，快速了解FIGMA设计应用逻辑。更好的去使用这个工具，给自己的工作提效加分。

适用人群

· 准备使用，或者正在使用FIGMA的设计师

· 想要给自己的设计工作提效，获得设计技巧

· 热心网友，在线交流

工具更换过程中，一定会有一段时间的适应期。希望大家积极拥抱变化，迎来真香时代.

文章总览：

跨多业务协同+较低成本

近年，UI设计师们经历了从PS到Sketch、XD等工具时代。爽快多年后，发现它亦步上了先驱的老路：日趋卡顿。

协作工具Zplin → 蓝湖，解决了国外服务器网络慢的问题，但没多久按人头收费了。一刀一个快很准。对于我组：业务数量多，设计师交叉频率高；开发+产品查看权限50+等问题，促使我们必须对设计软件进行迭代。

总结就是：卡+穷，推动我们含泪成长

1、基础元素

Figma设计中应用的最小单位，可以独立拥有自己的样式/交互属性

2、组合元素

最小设计单位的组合形式，帮助设计师们完成设计元素分类和快捷操作

1、元素类型

Figma有两种顶层元素，分别是Frame（框架）和Group（组）

Frame可以独立存在，拥有自己的样式属性，空白的Frame可以直接将看做一个矩形元素；

Group不能单独存在，如果删除Group内所有元素，那么Group也就不存在了

2、适用场景

3、实际应用

3.1、忽略约束

如果您想调整框架或主组件的大小，而不让所有内容都根据其约进行“适应”，可以在按COMMAND（Mac）进行调整。

3.2、批量替换颜色

通过 Selection Color，可以整体替换顶层组内颜色

这便于我们对整个页面进行颜色替换

3.3、边界差异

Group的边界随元素变化，元素调整则Group边界跟随调整

Frame的边界与元素大小无关，在Clip content模式下可以隐藏超出Frame的元素

3.4、缩放模式

放大缩小group时，内部元素会随组的边界大小缩放

(非K模式下，效果、文字尺寸和描边的大小不会自动进行缩放）

放大缩小Frame时，内部元素会随组的边界大小缩放

(非K模式下，效果、文字尺寸和描边的大小不会自动进行缩放）

Frame可以设置内部元素布局来约束条件

1、组件类型

1.1、Library 资源库

单击小书本图标，可以在“资源”面板中查看所有可用的已发布的库。（Mac快捷键：OPTION + 3），免费版本资源库没办法跨文件共享

1.2、Style 样式库

基础元素的样式属性（颜色、文本样式、阴影等）都可以在其属性旁边使用相同的“四点”图标保存它们，形成固定的样式库

2、实际应用

2.1、原始组件&组件实例

Figma 里的原始组件 叫做 Master ，从它复制出去的组件叫做 Instance（实例）

Figma 允许将 master 组件就近放在页面旁边，后面需要调整细节时，就可以边调整 master 细节边看它在整个页面中的效果。

Alt+拖拽，或者复制原始组件可以生成实例

调整原始组件，实例跟随改变；调整实例，不影响原始组件展示

2.2、组件实例

实例可以改变组件内元素样式属性（如颜色、边框、阴影等），需要改变元素数量时建议创建【组件变体】

2.3、组件变体

通过原始组件右侧“Variant”选项或者“➕”，可以生成“变体组件”

拥有变体组件的实例，可以通过右侧Property选择并替换现有组件样式（类似sketch组件通过“/”后缀命名分组功能）

3、组件实用技巧

3.1、即时添加组件描述信息

组件可以添加描述信息，这个信息在Inspect模式下也会展示出来，便于协同设计师或者开发小伙伴了解组件的应用方式和应用场景。

如果你添加了文件链接，Inspect会展示自动跳转按钮。使同类型组件快速产生关联。

3.2、隐藏禁用的组件

将组件名命名为 __/xxx （两个英文下划线，/为路径）

之后会发现在资源中，生成了一个叫做“Privite to this file”的分组，引用的资源库中就看不到这些内容了

3.3、如何查看原始组件

如果你想了解当前应用的组件（◇标记图层）更多信息，课通过右键单击一个实例并选择“转到主组件”查看。它很可能让你打开一个新文件*，一个团队库，在那里您可以找到您正在查看的实例的原始主组件。

如果你想继续之前的浏览，可能需要你转回上个文件或者将左侧asset切换回pages选项

1、快捷键一览

点击界面右下角的“？”浮标，选中“keybpard shortcuts”（或者快捷键control+shift+?），可以看见详细的快捷键使用说明。

2、更换画布背景色

你可以通过点击空吧画板区域，随时更改画布的颜色。或在“属性”中调整

3、复制图像

右键“复制图片”图片文件后，课直接粘贴到Figma中（在Mac中使用CMD+V，在Windows中使用CTRL+V）。如果粘贴时没有选中任何内容，它将浮动粘贴在画布上。如果选择一个形状，甚至另一个图像，然后粘贴，它将添加此图像作为该形状的填充，或替换现有图像。

4、只看外轮廓线（command+Y）

快捷键command+3,可以像AI一样隐藏图层信息，仅展示外轮廓线。

figma内图层常见符号和含义（figma内所有图层大致分4类，切合我们）

组、Frame、组件使用技巧

组件库使用和快捷方式

5、快捷定位图层

右键单击对象并使用“选择层”，可以快捷查找当前鼠标停留位置下的所有所需的对象并进行选择。

6、设置文件封面

右键单击文件，选择“set as thumbail”，就可以将任何Frame设置为文件封面。封面 1140*1024尺寸比例下，任意尺寸适合

7、 文件置顶展示

右键选中文件后，选中pin可以再当前团队文件夹下将选中文件置顶，置顶的文件显示在页面内容区最顶层。通过取消removed from Pinned可以取消置顶

8、快速收起所有的组（Alt+L）

当文件图层多个组都被打开，无法快速定位去选择一个或多个顶层组的时候，可以通过Alt+L的快捷键，一切收起所有图层子集，只显示顶层组。

9、制定Figma产研对接手册

figma的使用不光是设计师的工作，针对产研对接过程中常见问题，我们也做了对应协同文档。产研对接手册需要站在开发和产品的角度，解决他们关注的核心问题并给出三方协同建议。它可以有效的减少沟通成本，使兄弟部门快速上手，实现高效协同

感谢阅读！

作者 | w大魔王
来源 | 站酷（zcool.com.cn/u/2240875）

赞助商链接