Figma 使用技巧

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

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

适用人群

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

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

· 热心网友，在线交流

贴心提示

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

另有跨团队协同落地文档，适合小白设计师和研发老铁。有兴趣的小伙伴可以看看

跨多业务协同+较低成本

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

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

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

现在各大平台分析各种设计工具使用利弊的帖子很多，这里简述部分核心功能给出入FIGMA的设计师们。

1、全平台使用，起步免费

通过figma官网（https://www.figma.com/）或分享的链接，用邮箱（企业邮箱可用）注册账号即可。

注册时的账户名尽量保证协同小伙伴可以识别你的姓名，便于维护和管理团队名单。

2、实时协作

Figma支持多人在一个页面共同完成一个项目，并可以即时看到更新和评论信息。项目组成员包括设计、产品、开发、测试等相关的同事，均可以实时在一个设计文档中沟通，讨论方案，甚至完成线上实时设计评审

3、云端储存，实时同步

Figma拥有自动保存功能，并可以随时追溯历史版本（免费版最多保存 30 天。专业或团队版无限制）。

Figma的文件可以直接通过分享链接进行 传播，减少了文件传输的成本

4、设计稿交付

国内我们Sketch一般是使用蓝湖插件，将设计稿导出之后，上传到蓝湖，开发只要打开蓝湖对应的地址即可获得标注、切图。目前蓝湖也进行了收费，企业级年费按照协作人数算（60人团队，一年费用大概是1W元左右）

Figma设计稿通过切换右侧视角，即可查看标注信息和获得切图

5、资源库共享

你可以使用这个功能，它们来系统性地复用一些界面模块和样式属性。创建一个组件后，它就是一个主 组件，之后从它复制出去的组件都是它的组件实例，修改 主组件会同步到它所有的实例。所以，当你需要更新一些东西时，比如说基本链接颜色和某个图标，只需要调整主组件或来源样式即可

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、组件类型

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

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

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的快捷键，一切收起所有图层子集，只显示顶层组。

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

----------------------------

下期干货内容预告

1、团队项目的分组逻辑

2、pages文件集体迁移

3、网格体系使用逻辑

4、Figma自动布局功能的限制逻辑

5、交互功能应用和简单的动效文件输出

6、常见问题解疑：如frame导出图片，出现尺寸不匹配（如超出画布范围情况）

欢迎评论区留言，说出你的疑惑~

我们会乐于分享自己的经验和解决方案，共同学习