永不止步

本文约5669字，阅读大约需要15分钟。

国内每年有50万设计专业毕业生，相比之下，能进入大公司的屈指可数。但所有投身设计的设计师，都有一颗渴望成长的心。《体验设计师入门实战课》是vivo VMIC UED为新锐设计师量身定制的职业成长课程，是全体UED讲师们的心血结晶。现在，我们将这套课程整理成一篇文章发布出来，希望能够给选择从事设计行业的你一些成长的力量。感兴趣的朋友记得关注我们VMIC UED公众号，和我们一起成长~

本文总结了设计团队接触 Figma 以来的重要感悟和经验，帮助大家更好的理解和掌握 Figma。本文主要介绍了 Figma 中最重要也是最高效的两个概念——框架和自动布局。

我先简单解释一下什么是 Figma。

用一句话来定义 figma，它是一款基于浏览器的全能设计工具。简而言之，你只需要一个浏览器和一个网络连接，就可以开始工作了。

figma 的多功能性在于，在基于浏览器的环境中，你可以做所有这些事情：UI、原型、云同步、实时讨论、开发协作、实时分享、团队库等等。

基本但重要的概念——框架

大多数人对框架都有误解，认为它无害，只是在 Figma 中扮演一个绘图板的小角色，但事实并非如此。

SD12的时候，大猩猩对樱木说：如果你能控制篮板，你就能控制比赛。

这里我想说的是，如果你能控制框架，你就能控制 figma。

Figma 中的对象关系

在讲框架之前，先讲一下对象关系，理解它们可以帮助你更好的理解框架的底层逻辑，甚至是figma中的布局。

Figma 官方用这三个词来描述所有对象之间的关系——父、子、同级。

对开发有些了解的朋友对这些术语应该很熟悉，这些术语全部来自于前端语言中的DOM树，它和金字塔原理中的“归纳分组”是一样的，通过父子节点链接形成一个树形结构，这个结构可以解释所有对象之间的关系。

例如，以下模块中的所有元素都可以用这种关系来解释：

关注按钮与内部的图标、文字和背景是父关系，与整个作者模块是子关系。

在 Figma 中，有三种类型的元素可以作为父元素来包裹子元素：组件、组和框架，下面会进行讨论。

什么是框架

Figma 的很多概念和逻辑都源自于前端，其中第一个就是框架。

它在概念上相当于前端的div，简单来说就是用来包裹设计元素的容器。

容器可以嵌套，小容器可以嵌套在大容器中，大容器可以嵌套在更大的容器中。

正是这个框架的存在，让figma形成了完全不同的绘制逻辑。

绘制逻辑就是机械地一层一层堆叠，比如一个按钮，画一个矩形和文字，然后把它们组合起来，我们的目的就是画一个像真按钮一样的按钮。

Figma 的绘制逻辑是基于嵌套的“盒子”进行嵌套布局，这和开发 CSS+div 布局的逻辑一致。我们的目标不是绘制它，而是做出一个动态响应、可灵活扩展的布局。

看到这里，是不是感觉frame跟我们经常用的group很像呢？这两个概念在图层面板中都是用虚线框和#号来表示的，是除了组件之外两个非常典型的父类。

很多朋友可能和我一样，受、PS等软件的影响，凡是涉及元素分组的，都用group来做，觉得frame就是一个没用的画板。

然而我发现我完全错了。现在，我想大声说出我的结论：

在 figma 中，请始终使用框架，如果可以的话不要使用组，因为

框架具有以下优点：1.框架的约束功能

例如：

分别用group和frame进行分组时，group在父级尺寸改变后会发生扭曲；而frame默认有内置约束（固定内距，类似pin to edge），所以可以动态响应，不会变形。

换句话说，当你创建一个组时，你正在创建一个不稳定的对象，它随时可能被摧毁。

2.frame 具有 all-in-one 属性的优势

Group 唯一的功能就是分组。并且组的大小完全由子元素的大小决定，不能自由设置，不利于提高布局的效率。

该框架不仅方便灵活布局，其一体化的属性还可以减少大量的绘图成本。

这里我们将直接使用三种类型的属性：画板、组和形状层。

画板属性

相当于画板，Figma 官方用 Top level frame 来指代有此属性的框架，也就是最顶层最上面的框架，这种类型的框架只能作为父级使用。

例如在信息流页面中，Top level frame就是整个界面画板，它直接放在画布上，只能作为父级存在。

值得一提的是，Figma 为了照顾到用户的使用习惯，特意将新建画板的快捷键扩展为框架，现在可以使用 A 和 F 快捷键来创建画板。

组属性

该属性和group类似，有该属性的框架官方称之为frame，也就是嵌套框架的意思。

任何嵌套在另一个框架中的框架都可以称为框架。

即画板中的所有框架都是具有分组属性的框架，它们既可以是父级，也可以是子级，例如信息流中的每个卡片都嵌套在画板中，既是画板的子级，又是卡片内元素的父级。

最后，那些无法进一步细分且无法主动分组的对象统称为子元素（即非父对象、框架、组及其外面的所有对象）。

frame的分组方法也很简单，选中需要分组的对象后，按cmd+alt+G即可完成。

形状图层属性

这是一个常见的属性，无论是顶层框架还是框架。

它允许框架像普通矩形一样自由定义大小和样式sketch 画三维图标，样式包括圆角、填充、描边、效果等，但群组无法定义大小和添加样式，即使选中群组添加样式，也只能添加到群组内的子元素上。

可以看到，以前要实现这三个功能需要group、三个元素，但是在Figma中只需要frame一个元素就可以完成所有任务。

3.框架可切割

每帧额外提供剪辑功能，可以快速实现裁剪效果。

例如在横向滚动卡片的最后，需要有一张切卡，让用户感知到连续性。

如果使用群组，需要手动调整矩形的大小和圆角半径来制作裁剪效果（如果裁剪对象有文字，群组还需要手动新建一个矩形覆盖，非常麻烦）。而使用框架，只需要在面板中勾选裁剪选项，就可以自由控制裁剪范围。

最后，基于上面的属性，我们来看一些例子。

1. 制作一个按钮

传统的团体方法包括六个步骤：

1.创建文本；

2.创建一个矩形；

3. 定义矩形样式

4.矩形底部；

5.手动对位；

6. 团体

如果使用框架，则只需四个步骤

1.创建文本；

2、使用快捷键cmd+alt+G或F创建框架（根据框架的分组属性）；

3.确定约束条件；

4. 定义框架大小和样式（基于框架的形状图层属性）

可以看出，使用框架制作按钮的操作成本要低得多。

而且框架生成的层数更加精简，减少了后续的维护和管理成本。

此外，由于框架支持约束，它可以完美地响应父级尺寸的变化。

当然按钮只是一种表象，所有控件都可以使用框架来快速绘制。

2. 创建具有裁剪效果的图标

例如，我想绘制一个图像图标，其中的山形图形具有裁剪效果。

传统做法是mask+group，五步：

1.绘制图形；

2.创建一个矩形；

3.在原处复制一层矩形底部；

4. 选择山峰和复制的矩形以创建剪贴蒙版；

5. 团体

现在再次尝试框架，三步到位

1.绘制图形；

2.创建一个框架（记得检查裁剪选项）；

3.添加样式就完成了。

从层数来看，group+mask方式生成的元素数量是frame的2倍，且嵌套关系复杂，单看层结构比较难理解，frame的结构非常简单，很容易理解。

而且frame可以直接通过控制大小来控制裁剪范围，而group+mask格式需要分别调整mask和base元素的大小来调整裁剪范围。

使用框架时的常见问题及解决方法

最后跟大家分享一下我和我的团队成员在使用frame时遇到的一些非常典型的问题。

1. 当画板高度改变时，画板内的元素随之移动

这大概是最典型的框架问题了，我掉入这个坑很多次，体验极其糟糕。

原因分析：

都怪这个邪恶的群组，群组不支持约束，无法跟随响应，因此当群组的父级改变大小时，群组也会跟随拉伸。

解决方案：

按住 cmd 并拖动以将其删除。

2. 拖动时始终移动到画板外

比如我想对画板中的某个元素实现裁剪效果，但是将其移动到一定距离后，总是脱离画板的父级，只能到图层面板手动将元素拖拽到画板上。

原因分析：

Frame 奇怪的吸附逻辑。

解决方案：

拖动时按住空格键可修复父子关系。即使将元素移出画板，您也会发现该元素仍然是框架的子元素！

3.画板中的框架有一个名称

原因分析：

所有直接放置在画布上的框架（即上面提到的顶层框架）都被视为画板并显示其名称。因此，框架有名称的唯一原因是它是最外层的画板并且没有嵌套为子级。

解决方案：

非常简单，只需将其拖入画板并使其成为画板的子项。

注意这里有一个新问题，包括我在内的很多朋友在拖动的时候都会遇到无法嵌套的情况，其实只需要点击空白处重新选择，就可以嵌套成功。

说完了 Frame，我们再来说说 Figma 的杀手级功能——自动布局

auto 自动布局无疑是 figma 的杀手级功能，正如它对于 、对于 一样。

正是这一无可争议的核心卖点和致胜因素，让其在设计工具之战中突围而出。

为什么要强调自动布局

设计师的日常工作中存在着大量的重复性劳动，而这些重复性劳动大多与布局有关。

当元素的大小、增减、顺序发生变化时，为了保持原有的规则，你又得花费新一轮的成本重新调整布局。所以，很多时候每天看上去都做了很多，但回头想想，却觉得自己什么都没做。

自动排版的出现完美解决了这个痛点，一个善于使用自动排版的设计师，拥有别人两倍以上的生产力，也能预留出两倍以上的时间用于创意或者自我成长。

什么是自动布局

自动布局简单来说就是你先设定一个标准化的布局规则（比如你要保持20px的间距，保持左对齐等），然后当子项发生尺寸变化、增大或者减小时，父项能根据这个布局规则来适应变化，或者当父项发生尺寸变化时，子项能根据规则来适应变化。

例如下面的例子是自动布局的结果：

自动布局图标

自动布局图标是由两个排列好的矩形组成，图标内的排列方向就是当前对象布局的方向，可以说是非常形象了。

仅框架可以自动布局

如果自动布局的对象不是框架，figma 会在自动布局过程中自动创建一个框架。所以你只需要创建它，不用担心对象不是框架。

如何创建和恢复自动布局

如图，使用快捷键shift+A或者点击“添加”按钮进行创建，shift+alt+A或者点击“删除”按钮进行恢复。

两种自动布局组合

自动布局的组装方式取决于初始放置。

并联型

比如我们随意画几个矩形，并将它们随机散布在画布上，按下shift+A之后，四个元素就会自动对齐，这种组合方式就叫做“平行型”。

从左侧的图层列表可以看到，figma 自动布局后会自动帮你创建一个框架，虽然图标变了，但是无论是图层名还是属性名都明确的告诉你这还是一个框架！

包括的

如果我把其中三个矩形放在最大的矩形上面，让它们形成包含关系，那么按下 shift+A 之后sketch 画三维图标，你会发现最大的矩形真的变成了三个小矩形的容器。我们可以把这种组合称为“包含型”。

如果用一行文本替换这三个矩形，就会创建一个自动布局按钮。

另外，切换到“包含式”自动布局后，左侧的图层列表会发生一些有趣的事情——原来的容器图层会消失，框架本身会充当容器的角色。这其实也是利用了框架的形状图层属性。

因此，创建按钮变得非常容易。

我们不需要预先创建容器，只需在一行文本上按下 Shift+A 即可。根据框架的形状图层属性，您可以添加任何您想要的样式。

可以想象如果继续使用传统的分组+矩形的格式，需要增加多少操作，以及后续维护需要花费多少成本。

创建后，先设置规则

创建自动布局后，右侧会出现自动面板，你可以把它看作你的控制室，因为后续所有的布局规则都将在这里设置。

让我们逐一拆开它们。

布局方向

是子元素的横竖向，点击可切换，一层自动布局只能设置一个方向，若要构建多个方向，需要嵌套。

这里我们选择垂直。

子间距

是子元素之间的距离，一层自动布局只能设置一个间距，如果需要多个间距，也需要嵌套。

这里我们将其设置为24px。

内部间距

即父元素边缘到整个子元素的内间距，其设置有两个条目。

第一个设置入口：返回按钮，可以一键等距设置。

如果需要设置不同的间距，可以用逗号分隔，比如输入“10,20,30,40”，这四个值分别对应顶部、右侧、底部、左侧的间距。

第二个设置入口是尾部按钮，其中上下左右四个内侧间距可以独立设置。

这里我们把等间距设置为24px，然后在输入框里输入即可。

因为自动排版属于框架，而框架有自己的形状层属性，所以可以在这里添加填充和圆角。

内部布局

可以控制子元素的对齐方式以及在整个父元素中的位置（常用于父元素大小发生变化时）

例如增加父元素和子元素的尺寸，则可以通过内部布局来控制布局。

内部布局共有9种，可以根据需要自由选择。

分层分布法

堆叠：

也就是说，所有子项都组合在一起，当父项大小改变时，子项布局保持固定在某个位置。

比如，如果我们将子元素的位置固定到左上角，那么无论父元素如何拉伸，它的位置都不会改变。这和约束逻辑很相似。

等距：

无论父级尺寸如何变化，最外层的子级两端都是固定的，所有子级的间距均匀分布。这在控制一些等距元素（例如底部标签栏）的响应时会用到，使用频率很高。

自动布局的嵌套

之前提到过，一层自动布局只能有一个布局方向和一个子间距，需要添加新的时需要嵌套。

如何嵌套也很简单，只需选择要嵌套的子级别并按 shift+A。

比如我们想增加中间两个矩形之间的距离，那么只需要为上下两个矩形分别创建一层自动布局即可。

比如我们想添加一个新的头像，但是添加完头像之后，会多出一个横向的布局方向，这时候我们也可以再做一次嵌套。

最后就能得到类似feed流程的骨架图了。

为了模拟真实的场景，我们将这些抽象的矩形定义为昵称、介绍、图片、内容，并分别进行填充，一张带有自动排版属性的卡片就完成了。

是时候展示一些真正的技能了

规则定好了之后，你想干什么都可以。

接下来我会用三类场景来给大家一一演示。

重新排序

在自动布局设计中，您可以调整任意元素的位置而不影响布局。您可以通过拖动或使用箭头键来调整顺序。

拉紧

随意拉伸一些元素来改变它们的大小，父元素会跟随并根据当前规则进行适应。

比如我们改变了封面大小和头像，那么上下两个内嵌的父级（自动布局的顶部框架）就会做相应的适应，而这两个父级又是整个卡片（自动布局的顶部框架）的子级，因此卡片也会做相应的适应。

另外，在增加或者删除文字之后，文本框的高度变化也可以看作是一种拉伸，卡片也会进行相应的自适应。

增加或减少

添加或者删除子项也会根据当前布局产生自适应效果。

关于加减运算的一些技巧：

1.隐藏一个层可以达到和删除它一样的效果。我的建议是隐藏它而不是删除它，特别是对于有自动布局的组件。这个技巧非常非常实用。

2、删除元素后如果还想保留原有位置，只要将其透明度降低为0即可。

到此，自动布局的初步玩法就结束了。

终于

figma 新手指南就到此结束。最后，我们一起来看看吧——

1、Figma基于浏览器的属性，让你更加专注于设计本身，帮助设计师提高效率、更顺利地协作和完成设计工作；

2.框架是Figma中最重要的概念，它是很多重要功能的先行者，全功能的优势也能快速提升效率；

3.自动排版是figma工具的核心卖点，可以大大减少设计师在排版上花费的重复性劳动。

最后，真心希望这个面向未来的工具能够帮助你将生产力彻底从低效率和重复的束缚中解放出来。

终于

《动效实习生》高级课程专为UI设计师量身定制，助你突破动画、3D设计瓶颈，助你超越他人。

本期新增应用UI、车载HMI、大屏数据可视化特效、礼物特效、灯效动画等内容，新增内容占比超过80%。

如有侵权请联系删除！