热评 JERREAL

厉害,学习了

6000字干货!设计师如何用Figma解放三倍生产力?

本文将设计团队接触 Figma 以来的重要心得、经验进行梳理总结,帮助大家更好得理解和掌握 Figma。本次主要介绍Figma 中最重要、也最提效的两个概念——Frame和自动布局。

更多Figma 干货:

一、先简单讲讲,Figma 是什么?

用一句话去定义 figma,它是一款基于浏览器的全能型设计工具。简单说,只需要有浏览器和网络,你就可以开干了。

6000字干货!设计师如何用Figma解放三倍生产力?

figma 全能的地方在于,在基于浏览器的环境下, 你就可以搞这些:ui、原型、云同步、实时讨论、开发协作、实时共享、团队库等等。

6000字干货!设计师如何用Figma解放三倍生产力?

二、基础但重要的概念——Frame

绝大多数人对 frame 有误解,觉得它人畜无害,在 figma 中仅仅是扮演画板的小角色,然鹅并不是。

大猩猩在 SD12 集和樱木说过:能够掌控篮板球,就能掌控比赛。

6000字干货!设计师如何用Figma解放三倍生产力?

我这里要说,能够掌控 frame,就能掌控 figma。

1. Figma 中的对象关系

在讲 frame 之前,先唠唠对象关系。了解它才可以帮你更好得理解 frame 乃至 figma 中布局的底层逻辑。

figma 官方将所有对象的关系用这三个词来描述——Parent父级、Child子级和Sibling平级。

6000字干货!设计师如何用Figma解放三倍生产力?

懂一些开发知识的朋友会比较眼熟,这些术语全部来自前端语言 JavaScript 中的 dom 树。它和金字塔原理中的「归纳分组」一样,都是通过父子级的节点链接形成树状结构,而这种结构可以解释所有对象之间的关系。

举个例子,下面这个模块中的所有元素,都可以此关系解释:

关注按钮相对内部的 icon、文字和背景是父级关系,而它相对一整个作者模块,又是子级关系。

6000字干货!设计师如何用Figma解放三倍生产力?

在 figma 中,可以作为父级来包裹子级元素的总共就这三类:component 组件、group 编组,以及下面要讲的 frame 框架。

6000字干货!设计师如何用Figma解放三倍生产力?

2. 什么是 Frame

Figma 非常多的概念和逻辑都引自前端,而首当其冲的就是 frame。

它概念上等同于前端的 div。简单说,就是用来包裹设计元素的容器 container。

容器可以嵌套,小的嵌套成大的,大的嵌套成更大的。

6000字干货!设计师如何用Figma解放三倍生产力?

而就是这个 frame 的存在,造就了 figma 和 sketch 截然不同的作图逻辑。

sketch 作图逻辑就是一个个图层的机械堆砌,比如按钮——画个矩形和文字,最后再group。我们的目标只需要画出来一个像模像样的按钮就行。

figma 作图逻辑是基于一个个可嵌套的「盒子」进行嵌套布局,它和开发 css+div 布局的逻辑是一致的。我们的目标并非是画出来,而是做一个可动态响应、可灵活扩展的布局。

看到这,是不是感觉 frame 很像我们常用的 group?这两个概念在图层面板中分别以虚线框和#号表示。是除了组件外非常典型的两个父级。

6000字干货!设计师如何用Figma解放三倍生产力?

很多老铁应该和我一样,受 sketch、ps 等软件的影响,凡是涉及到元素编组全用 group,感觉 frame 就是个没啥用的画板。

但是,我发现我大错特错。现在,我要大声说出我的结论:

figma 中请一律使用 frame,group 能不用就不用,因为

3. frame 有这些优势

①frame 的约束功能

举个例子:

分别以 group 和 frame 编组,在改变父级尺寸后,group 会失真变形;而 frame 因为默认内置了约束(内间距固定,类似 sketch 的 pin to edge),因此可以动态响应,不会变形。

6000字干货!设计师如何用Figma解放三倍生产力?

也就是说,你创建 group,就是在创建一个随时都可以被破坏的不稳定对象。

②frame 拥有多合一属性优势

Group 唯一的功能,就是编组。而且编组尺寸完全取决于子级元素的尺寸,无法自由设定,对于布局起不到任何效率提升。

而 frame 不仅帮助灵活布局,多合一的属性也能减少大量作图成本。

这里就直接用画板、编组和形状图层三类属性来说。

画板属性

它等同于 sketch 的 artbord 画板,Figma 官方用 Top level frame 来指代具备这个属性的 frame,意思就是最顶层、最上方的。这类 frame 只能作为父级。

比如信息流页面,Top level frame 就是整个界面画板,它被直接放置在 canvas 画布上,只能作为父级存在。

6000字干货!设计师如何用Figma解放三倍生产力?

值得一说的是,Figma 为了兼顾用户习惯,特意将 sketch 中新建画板的快捷键沿用到 frame 上。你现在可以通过 A 和 F 两个快捷键来建立画板。

编组属性

这个属性与 group 类似,具备此属性的 frame 被官方用了 nested frame 这个名字来指代,意思就是嵌套的 frame。

任何被嵌套在另外一个 frame 中的 frame,都可以称之为 nested frame。

即画板内的所有 frame,都是具有编组属性的 nested frame。它既可作为父级又可作为子级。比如信息流的一个个卡片,它被画板所嵌套,既是画板的子级,又是卡片内部元素的父级。

6000字干货!设计师如何用Figma解放三倍生产力?

最后,那些无法再被细分、不能去主动编组的对象,则统称为子级元素(即非父级对象,frame、group 和 component 外的所有对象)。

6000字干货!设计师如何用Figma解放三倍生产力?

frame 的编组方式也很简单,选中你想编组的对象后,cmd+alt+G 即可完成。

形状图层属性

这个是通用属性,不论是 Top level frame 还是 nested frame 都有。

它让 frame 能够像普通矩形那样,自由定义尺寸和样式。样式包括圆角、填充、描边、效果等等。而 group 既无法定义尺寸、又不能添加样式。即便你选中 group 强行添加样式时,也只能添加到组内的子级元素。

6000字干货!设计师如何用Figma解放三倍生产力?

由此可见,以往 sketch 中需要各自用 artboard、group 和矩形三种元素来实现这三种功能,而在 figma 中只需要 frame 一个元素就能全盘搞定。

③frame 可以裁切

每个 frame 都额外提供了 clip content 功能来快速实现裁切效果。

举个例子,比如横划卡片末端都需要以裁切过的卡片让用户感知到延续性。

如果用 group,需要手动调整矩形的尺寸和圆角去制造裁切效果(如果裁切对象有文字,group 还要手动新建矩形去遮盖,很麻烦),而 frame 只需要勾选面板中的裁切选项,就可以自由控制裁切范围。

6000字干货!设计师如何用Figma解放三倍生产力?

4. 最后,基于以上的属性来点案例

①制作一个按钮

传统 group 做法,花六步:

  1. 创建文字;
  2. 创建矩形;
  3. 定义矩形样式
  4. 矩形置底;
  5. 手动对齐;
  6. group 编组

6000字干货!设计师如何用Figma解放三倍生产力?

如果使用 frame 的话,只需要四步

  1. 创建文字;
  2. 快捷键 cmd+alt+G、或者 F 创建 frame(基于 frame 的编组属性);
  3. 确定约束规则;
  4. 定义 frame 尺寸和样式(基于 frame 的形状图层属性)

6000字干货!设计师如何用Figma解放三倍生产力?

可以看到,frame 制作按钮的操作成本要低得多。

而且 frame 所生成的图层数量也更精简,减少了后续维护和管理成本。

6000字干货!设计师如何用Figma解放三倍生产力?

另外,frame 因为支持约束,所以能跟随父级尺寸变化完美响应。

6000字干货!设计师如何用Figma解放三倍生产力?

当然,按钮只是个示意,所有的控件都可以利用 frame 快速绘制。

②制作有裁切效果的 icon

比如我要绘制一个图片 icon,其中的山峰图形有裁切效果。

传统的做法是蒙板+group,五步走:

  1. 绘制图形;
  2. 创建矩形;
  3. 原位复制一层矩形兜底;
  4. 点选山峰和复制的矩形,创建剪切蒙板;
  5. group 编组

6000字干货!设计师如何用Figma解放三倍生产力?

现在再试试 frame,三步到位

  1. 绘制图形;
  2. 创建 frame(记得勾选裁切);
  3. 加入样式,搞定。

6000字干货!设计师如何用Figma解放三倍生产力?

再从图层数量上看,group+蒙板的方式所产生的元素数量是 frame 的 2 倍,而且嵌套关系复杂,光看图层结构压根看不懂。而 frame 的结构非常精简易懂。

6000字干货!设计师如何用Figma解放三倍生产力?

而且 frame 可以直接通过控制尺寸来控制裁切范围,而 group+蒙板的形式需要分别调节 mask 和底板两个元素的尺寸实现裁切范围调整。

5. 使用 frame 的常见问题与解决方案

最后,再来分享下我和团队小伙伴在使用 frame 时,所遇到的几个非常典型的问题。

①更改画板高度时,画板内元素跟随移动

6000字干货!设计师如何用Figma解放三倍生产力?

这大概是 frame 最典型的一个问题了,当时我也在这个坑里躺了 n 次,体验极其恶劣。

原因分析:

归咎于万恶的 group。group 不支持约束,无法跟随响应。因此 group 的父级发生尺寸变化时,group 就会跟随拉伸。

解决方案:

按住 cmd 拖动即可解掉。

6000字干货!设计师如何用Figma解放三倍生产力?

②拖动时老是移动到画板外

比如我想在画板中实现一个元素的裁切效果,但移动至一定距离后总是脱离画板父级的包裹,只能去图层面板上手动把元素拖拽到画板中。

6000字干货!设计师如何用Figma解放三倍生产力?

原因分析:

frame 诡异的吸附逻辑。

解决方案:

在拖动时按住空格键即可固定父子级关系。即便把元素移出画板,你会发现元素依旧是 frame 的子级!

6000字干货!设计师如何用Figma解放三倍生产力?

③画板里的 frame 带名称

6000字干货!设计师如何用Figma解放三倍生产力?

原因分析:

所有直接置于 Canvas 画布中的 frame(即前面所说的 top level frame),会全部作为画板并外显名称。所以,frame 带名称的唯一原因就是,它是个最外侧的画板,并没有作为子级被嵌套。

解决方案:

很简单,直接将其拖入画板,成为画板的子级即可。

注意,这里又有个衍生出的新问题。很多小伙伴包括我在拖拽时会遇到嵌套不了的情况,其实只需要点下空白处、重新选择一次,就能顺利嵌套了。

6000字干货!设计师如何用Figma解放三倍生产力?

三、Frame 讲完,来讲下 figma 大杀器-自动布局

auto layout 自动布局,毫无疑问是 figma 的大杀器,正如 symbol 之于 sketch,database 之于 notion。

它是当之无愧的核心卖点,也是让其在设计工具之战中突破重围的胜负手。

1. 为啥自动布局得重点讲

设计师的日常工作,存在着大量重复劳动;而这些重复劳动中大部分又和布局相关。

当元素发生了尺寸、增减或顺序的变化后,为了维持原有的规则,你又得花上新一轮的成本重新调整布局。所以,很多时候看似你每天干了很多,但回过头来想想又感觉什么也没干。

而自动布局的出现,完美得解决了这一大痛点。一个擅长使用自动布局的设计师,有着高出旁人双倍不止的生产效率,也能预留出双倍不止的时间留给创意或者自我成长。

2. 什么是自动布局

通俗点说,自动布局,就是你先制定一个标准化布局规则(比如想保持 20px 间距、保持左对齐等)。然后当子级发生尺寸、增减等变化后,父级能基于这个布局规则产生适应变化,或者父级尺寸发生变化后,子级能基于规则产生适应变化。

比如下面这个例子,就是自动布局化的结果:

6000字干货!设计师如何用Figma解放三倍生产力?

自动布局的图标

自动布局图标由两个矩形排列而成,并且图标中的排列方向既当前对象布局的方向,可以说是很形象了。

6000字干货!设计师如何用Figma解放三倍生产力?

只有 frame 才能自动布局

如果自动布局的对象还不是 frame,那么在自动布局的同时,figma 会自动创建一个 frame。因此只需要创建就行,不用担心对象不是 frame。

3. 自动布局该如何上手

自动布局的创建、复原

如图,使用快捷键 shift+A 或点击「新增」按钮即可创建,shift+alt+A 或者点击「删除」按钮即可复原。

6000字干货!设计师如何用Figma解放三倍生产力?

自动布局的两类组合方式

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

4. 并列型

比如咱们画几个很随意的矩形,再随意散落在画布上,shift+A 后,四个元素就会自动对齐。这种组合方式,称之为「并列型」。

6000字干货!设计师如何用Figma解放三倍生产力?

从左侧图层列表可以看到,自动布局后 figma 会自动为你创建好一个 frame,虽然图标变了,但不论是图层名和属性名都在明确告诉你,它依旧是 frame!

6000字干货!设计师如何用Figma解放三倍生产力?

5. 包含型

如果,我将其中三个矩形放置于最大的矩形上,让其形式上趋向于一个包含关系,那么在 shift+A 后,你会发现个头最大的那个,真的成为了收纳三个小矩形的容器。这种组合方式,咱们可以称之为「包含型」。

6000字干货!设计师如何用Figma解放三倍生产力?

而如果将三个矩形替换为一行文字,一个自动布局的按钮就这么诞生了。

6000字干货!设计师如何用Figma解放三倍生产力?

另外,在转为「包含型」的自动布局后,左侧图层列表也会发生一些很有意思的事情——原有的容器层将会消失,frame本身充当容器。这其实也是利用了frame的形状图层属性。

6000字干货!设计师如何用Figma解放三倍生产力?

所以,创建按钮这件事就变得异常简单。

我们不需要提前创建容器,只需要对一行文字 shift+A 就行。基于 frame 的形状图层属性,你可以随意添加你想要的样式。

6000字干货!设计师如何用Figma解放三倍生产力?

你可以想象一下,如果继续使用传统的编组+矩形的形式,会多出多少的操作,后续的维护又需要耗费多少成本。

创建完,定个规则先

创建了自动布局后,右侧会出现 auto layout 面板。你可以将其当做你的控制室,因为后续所有布局规则的制定,都要在这里完成。

下面我们单独一个个拆出来说。

6000字干货!设计师如何用Figma解放三倍生产力?

布局方向

就是子级元素排列的横纵方向,点击切换。一层自动布局只能设置一种方向,要构建多个方向的话要嵌套。

6000字干货!设计师如何用Figma解放三倍生产力?

我们这里选纵向。

6000字干货!设计师如何用Figma解放三倍生产力?

子级间距

就是子级元素之间的距离,一层自动布局只能设置一种间距,需要多种间距同样需要嵌套。

6000字干货!设计师如何用Figma解放三倍生产力?

这里我们设定 24px。

6000字干货!设计师如何用Figma解放三倍生产力?

内间距

即父级边缘到子级整体的内间距,它的设定有两个入口。

6000字干货!设计师如何用Figma解放三倍生产力?

第一个设置入口:回型按钮,你可以一键等距设置。

6000字干货!设计师如何用Figma解放三倍生产力?

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

第二个设置入口在尾部按钮,在这里,上下左右四个内间距可以独立设置。

6000字干货!设计师如何用Figma解放三倍生产力?

这里我们就设定 24px 的等距,输入框键入即可。

因为自动布局属于 frame,而 frame 有自带形状图层属性,所以这里可以加入填充和圆角。

6000字干货!设计师如何用Figma解放三倍生产力?

内部布局方式

可以控制子级元素的对齐,以及在整个父级中的位置(父级尺寸发生改变时常用),比如调大刚刚的父子尺寸,就可以通过内部布局来进行版面控制。

6000字干货!设计师如何用Figma解放三倍生产力?

一共九种内部布局方式,可以根据需要自由选择。

6000字干货!设计师如何用Figma解放三倍生产力?

子级分布方式

堆叠:

即所有子级都组合在一起,改动父级尺寸时,子级布局保持固定在某一位置。

6000字干货!设计师如何用Figma解放三倍生产力?

比如我们将子级位置固定到左上角,那么不论如何拉伸父级,它的位置始终保持不变。和约束逻辑很像。

6000字干货!设计师如何用Figma解放三倍生产力?

等距:

不论父级尺寸如何改变,最外侧的子级固定在两端,所有子级的间距均匀分布。在控制一些等距元素的响应时(如底 tab 栏)会用到,使用频率非常之高。

6000字干货!设计师如何用Figma解放三倍生产力?

6000字干货!设计师如何用Figma解放三倍生产力?

6. 自动布局的嵌套

前面说过,一层自动布局只能拥有一个布局方向和一种子级间距,当需要新增时就需要用到嵌套。

如何嵌套也非常简单,直接选中想要嵌套的子级 shift+A 就行。

比如我们想调大中间俩矩形的间距,只需将上、下侧的两个矩形各自创建一层自动布局即可。

6000字干货!设计师如何用Figma解放三倍生产力?

6000字干货!设计师如何用Figma解放三倍生产力?

再比如我们想新增一个头像,但头像加入后会多出一个横向布局方向,这时同样可再做一次嵌套。

6000字干货!设计师如何用Figma解放三倍生产力?

最后,就可以得出类似 feed 流的一个骨架图。

6000字干货!设计师如何用Figma解放三倍生产力?

为了模拟真实的场景,我们将这几个抽象矩形定义成昵称、简介、图片和内容并分别进行填充。一个带有自动布局属性的卡片就完成了。

6000字干货!设计师如何用Figma解放三倍生产力?

7. 是时候表演真正的技术了

规则制定了,你就可以为所欲为了。

下面,我用三类场景来一一给你们做演示。

调序

自动布局化的设计中,你可以肆意调整任何元素的位置,而不会影响到你的布局。调序方式可以拖拽,也可以方向键。

6000字干货!设计师如何用Figma解放三倍生产力?

拉伸

随意对一些元素做拉伸处理以改变尺寸,父级将会根据目前的规则跟随产生适应变化。

比如我们改变封面尺寸和头像,上下方内嵌的两个父级(自动布局化的 nested frame)将跟随自适应,而这两个父级又同时是整个卡片(自动布局化的 top frame)的子级,因此卡片也会跟随自适应。

6000字干货!设计师如何用Figma解放三倍生产力?

另外,对文字进行新增和删除后,文本框的高度变化也可以看作是一种拉伸。卡片也同样能跟随自适应。

6000字干货!设计师如何用Figma解放三倍生产力?

增减

对子级进行新增或删除,同样会基于当前的布局产生自适应效果。

6000字干货!设计师如何用Figma解放三倍生产力?

增减操作的几点小提示:

  1. 图层隐藏,可以实现和删除一样的效果。我的建议尽量以隐藏代替删除,尤其是对于自动布局化的组件,这个技巧非常、非常实用;
  2. 如果在删除某个元素后依然想占位,直接将其透明度降至 0 即可。

至此,自动布局的初步玩法至此讲完。

最后

figma 入门攻略到此结束。最后,我们来一起盘一下——

  1. figma 是基于浏览器的属性让你更专注到设计本身,帮助设计师提效、可协作且更流畅的更好完成设计工作;
  2. frame 是 figma 中最重要的一个概念,它是多个重要功能的前置,自带的多合一优势也能迅速提效;
  3. 自动布局作为 figma 工具的核心卖点,能大幅减少设计师在布局方面所花的重复劳动。

最后,真诚得期待这块面向未来的工具,能帮助你从低效、重复的桎梏中彻底解放生产力。

欢迎关注作者微信公众号:「VMIC UED」

6000字干货!设计师如何用Figma解放三倍生产力?

收藏 228
点赞 105

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。