【6000字超干干货】没搞定这个概念，figma就真的白用了！→
2021年的第 20 篇原创文章
距离2021年 40 篇原创目标还剩 20 篇
先抛个问题，
figma中最重要，却最容易被忽视的概念是什么？
不是组件、不是变体、更不是自动布局，而是之前被我唠叨了n遍的frame。
绝大多数人对frame有误解，觉得它人畜无害，在figma中仅仅是扮演画板的小角色，然而并不是。
大猩猩在SD12集和樱木说过：能够掌控篮板球，就能掌控比赛。
我这里要说，能够掌控frame，就能掌控figma！
趁着之前放长假的时间，单独憋出一篇关于frame的6000字长文干货，作为figma稳扎稳打章节的开门篇。这个概念我承认比较绕，所以铺垫和案例比较多，耐心读完，因为它真的非常、非常重要。
01 为什么我要单用一篇文章讲frame
why
1.它是多个功能的前置
先说个可能很少人知道的真相。
在figma中，frame是以下四个功能的前置：layout grids网格布局、constraints约束、auto layout自动布局、component组件。
也就是说，没有frame，这四个功能是无法使用的。（别担心，它们我都会讲）
是不是有些难以置信？
先上案例。
下图是group和frame的属性面板，观察两者的变化，可以发现：
frame比group多出了俩面板：网格布局和约束。也就是说，要想使用这俩功能，你就只能使用frame。
另外，frame属性也是自动布局和组件化的前置条件。
看到这你应该会说，你个骗纸，我用group一样可以自动布局和组件化啊！
别急，拿一个包含头像和昵称的group为例，当对group进行自动布局或组件化时，去留意下右上角面板的属性变化。
你会发现，对象原有的group属性，居然，全被自动转成了frame！！
这也就意味着，组件化和自动布局这两个figma中极为重要的核心功能，也需要基于frame这个前置条件才能生效。
反正当时我是震惊的，敢情frame你小子表面闷不吭声挺老实的，实则在扮猪吃老虎啊！
2.非常多的作图问题都和它有关
前置条件不弄透彻，就好像你没学好基本内功就去练高阶武学一样，很容易碰到很多莫名其妙的棘手问题。
反正当时我是躺了好几个，作图直犯恶心，还愣是解决不了。
比如拖动画板时，画板内元素跟随移动，比如做好的组件难以管理，比如东西拖画板一直拖不进去等等。
但是，这些问题只要搞懂了frame就完全不是问题。这部分我统一放在最后说。
3.它可以立竿见影得提效
自动布局、组件等功能的强大之处暂且不说，Frame本身很多属性可以帮助你更快得实现目标。以往只能用蒙板、矩形实现的控件or图标，用frame来做可以直接压缩你一半以上的时间，而且由frame制作的对象更易维护和管理。
这些，我同样放在后面讲。
4.讲它的文章偏少
所以，基于以上四点，我用了6k字文章的篇幅，来单独给你讲透frame这个难点概念。
02 figma中的对象关系
duixiangguanxi
在讲frame之前，先和各位唠唠对象关系。
敲黑板，很重要，了解它才可以帮你更好得理解frame乃至figma中布局的底层逻辑。
figma官方将所有对象的关系用这三个玩意儿来描述——Parent父级、Child子级和Sibling平级。
懂一些开发知识的老铁会比较眼熟，这些术语全部来自前端语言JavaScript中的dom树。它和金字塔原理中的「归纳分组」一样，都是通过父子级的节点链接形成树状结构，而这种结构可以解释所有对象之间的关系。
举个🌰，下面这个作者模块中的所有元素，都可以此关系解释。
比如关注按钮相对内部的icon、文字和背景是父级关系，而它相对一整个作者模块，又是子级关系。
关注按钮内部的icon、文字和背景属于平级关系，它们仨相对关注按钮又是子级关系。
在figma中，可以作为父级来包裹子级元素的总共就这三类：component组件、group编组，以及下面要讲的frame框架。
03 什么是frame
what
在上上篇文章，我就说过，figma非常多的概念和逻辑都引自前端，而首当其冲的就是frame。
它概念上等同于前端的div。啥是div？简单说，就是用来包裹设计元素的容器container。
容器可以嵌套，小的嵌套成大的，大的嵌套成更大的。
还是上面的例子，开发在写这个作者模块时，会事先建立一个个div来承载元素。比如div2承载头像和昵称，div3承载按钮，模块本身则由一个更大的div嵌套承载div2和div3。而frame其实就是设计侧的div，它们在属性、作用上是非常贴近的。
而就是这个frame的存在，造就了figma和sketch截然不同的作图逻辑。
sketch作图逻辑就是一个个图层的机械堆砌，比如按钮，我就画个矩形和文字，最后再group。我们的目标只需要画出来一个像模像样的按钮就行；
figma作图逻辑是基于一个个可嵌套的「盒子」进行嵌套布局，它和开发css+div布局的逻辑是一致的。我们的目标并非是画出来，而是做一个可动态响应、可灵活扩展的布局。
关于div，我在之前的这篇文章中有过详细的讲解，有兴趣的老哥戳这——
看到这，是不是感觉frame很像我们常用的group？这两个概念在图层面板中分别以虚线框和#号表示。是除了组件外非常典型的两个父级。
很多老铁应该和我一样，受sketch、ps等软件的影响，凡是涉及到元素编组全用group，感觉frame就是个没啥卵用的画板。
然鹅，我发现我大错特错。
现在，我要大声向你说出我的结论：
figma中请一律使用frame，永远、永远、永远不要使用group！！
04 为什么要一律使用frame
why frame
1.frame是多个重要功能的前置
这个开篇就提过，不赘述了，这里简单说说约束。
约束，说白了，就是能够让子级基于某个响应规则，在父级发生尺寸变化时进行动态响应。（对象关系那认真看的话应该知道了吧～）
举个🌰
分别以group和frame编组，在改变父级尺寸后，group会失真变形；而frame因为默认内置了约束（内间距固定，类似sketch的pin to edge），因此可以动态响应，不会变形。
也就是说，你创建group，就是在创建一个随时都可以被破坏的不稳定对象。
2.frame拥有多合一属性优势
Group这倒霉玩意儿唯一的功能，就是编组。而且编组尺寸完全取决于子级元素的尺寸，无法自由设定，对于布局起不到任何效率提升。
而frame不仅帮助灵活布局，多合一的属性也能减少大量作图成本。
官方文档把frame属性说的太细碎，我这里就直接用画板、编组和形状图层三类属性来说。
1.画板属性
这个属性大家都知道了，它等同于sketch的artbord画板，Figma官方用Top level frame来指代具备这个属性的frame，意思就是最顶层、最上方的。这类frame只能作为父级。
比如信息流页面，Top level frame就是整个界面画板，它被直接放置在canvas画布上，只能作为父级存在。
值得一说的是，Figma为了兼顾用户习惯，特意将sketch中新建画板的快捷键沿用到frame上。你现在可以通过A和F两个快捷键来建立画板。
2.编组属性
这个属性与group类似，具备此属性的frame被官方用了nested frame这个名字来指代，意思就是嵌套的frame。
任何被嵌套在另外一个frame中的frame，都可以称之为nested frame。
用人话说就是：画板内的所有frame，都是具有编组属性的nested frame。它既可作为父级又可作为子级。
比如信息流的一个个卡片，它被画板所嵌套，既是画板的子级，又是卡片内部元素的父级。
最后，那些无法再被细分、不能去主动编组的对象，则统称为子级元素（即非父级对象，frame、group和component外的所有对象）。
最后。frame的编组方式也很简单，选中你想编组的对象后，cmd+alt+G即可完成。
形状图层属性
这个是通用属性，不论是Top level frame还是nested frame都有。
它让frame能够像普通矩形那样，自由定义尺寸和样式。样式包括圆角、填充、描边、效果等等。
而group既无法定义尺寸、又不能添加样式。
即便你选中group强行添加样式时，也只能添加到组内的子级元素。
由此可见，以往sketch中需要各自用artboard、group和矩形三种元素来实现这三种功能，现在在figma中只需要frame一个元素就能全盘搞定！
3.frame可以裁切
每个frame都额外提供了clip content功能来快速实现裁切效果。
举个🌰，比如横划卡片末端都需要以裁切过的卡片让用户感知到延续性。
如果用group，需要手动调整矩形的尺寸和圆角去制造裁切效果（如果裁切对象有文字，group还tm要手动新建矩形去遮盖，特别蛋疼），而frame只需要勾选面板中的裁切选项，就可以自由控制裁切范围，爽爆。
那么，figma中什么时候该用group呢？
答案很简单，永 远 不 会。
05 最后，基于以上的属性来电案例
why frame
1.制作一个按钮
先来看看传统的group做法，要花六步：
1.创建文字；
2.创建矩形；
3.定义矩形样式
4.矩形置底；
5.手动对齐；
6.group编组
如果使用frame的话，只需要四步
1.创建文字；
2.快捷键cmd+alt+G、或者F创建frame（基于frame的编组属性）；
3.确定约束规则；
4.定义frame尺寸和样式（基于frame的形状图层属性）
可以看到，frame制作按钮的操作成本要低得多。
而且frame所生成的图层数量也更精简，减少了后续维护和管理成本。
另外，frame因为支持约束，所以能跟随父级尺寸变化完美响应。
当然，按钮只是个示意，所有的控件都可以利用frame快速绘制。
2.制作有裁切效果的icon
比如我要绘制一个图片icon，其中的山峰图形有裁切效果。
传统的做法是用蒙板+group的方法来实现，五步走：
1.绘制图形；
2.创建矩形；
3.原位复制一层矩形兜底；
4.点选山峰和复制的矩形，创建剪切蒙板；
5.group编组
现在再试试frame，和上面的按钮步骤类似，三步到位，非常简单高效。
1.绘制图形；
2.创建frame（记得勾选裁切）；
3.加入样式，搞定。
再从图层数量上看，group+蒙板的方式所产生的元素数量是frame的2倍，而且嵌套关系复杂，光看图层结构压根看不懂这tm什么玩意儿。而frame的结构非常精简易懂。
而且frame可以直接通过控制尺寸来控制裁切范围，而group+蒙板的形式需要分别调节mask和底板两个元素的尺寸实现裁切范围调整。
由此可见，不论是生产效率还是后续的迭代维护，使用frame去制作具有裁切效果的元素都是更优的选择。
3.轻松管理组件
sketch的组件管理，需要通过大量的「/」格式化命名来实现编组嵌套，figma其实完全不需要。
举个🌰
一个button分为了有icon和无icon两类，并且各自包含主、次两个状态。
传统的管理方式，是在每个组件上以/命名实现父子级关系的嵌套，这种重复劳动效率很低，而且还得额外花费时间在画布上进行组件的整理。
但现在，只需要提前建好嵌套好的frame即可：
1.创建好frame画板（画板属性），将其命名为button作为一级容器；
2.frame画板内创建两个更小的frame（编组属性），分别命名default和icon，作为二级容器，并加入描边进行样式区分（形状图层属性）；
3.按钮命名无需再考虑/的嵌套，直接命名primary和secondary后，轻松的拖拽操作即可迅速实现组织。
一方面省去了大量的命名时间，另一方面嵌套的过程也是组件可视化整理的过程，便于日后查看和管理，不至于出现组件散落在各处的情况。
06 关于frame的一些问题
some questions
最后，再来分享下我和团队小伙伴在使用frame时，所遇到的几个非常典型的问题。
1.更改画板高度时，画板内元素跟随移动
这大概是frame最典型的一个问题了，当时我也在这个坑里躺了n次，体验极其恶劣。
原因分析
归咎于万恶的group。group不支持约束，无法跟随响应。因此group的父级发生尺寸变化时，group就会跟随拉伸。
解决方案
按住cmd拖动即可解掉。
2.拖动时老是移动到画板外
比如我想在画板中实现一个元素的裁切效果，但移动至一定距离后总是脱离画板父级的包裹，非常蛋疼。只能去图层面板上手动把元素拖拽到画板中。
原因分析
frame让人蛋碎的吸附逻辑。
解决方案
在拖动时按住空格键即可固定父子级关系。即便把元素移出画板，你会发现元素依旧是frame的子级！
3.画板里的frame带名称
原因分析
所有直接置于Canvas画布中的frame（即前面所说的top level frame），会全部作为画板并外显名称。所以，frame带名称的唯一原因就是，它是个最外侧的画板，并没有作为子级被嵌套。
解决方案
很简单，直接将其拖入画板，成为画板的子级即可。
注意，这里又有个衍生出的新问题。
很多小伙伴包括我在拖拽时会遇到嵌套不了的情况，其实只需要点下空白处、重新选择一次，就能顺利嵌套了。（我也尝试了好久才试出来。。frame的吸附槽点太多了）
最后
关于frame的讲解到此结束，让我们一起来盘下～
1.frame是约束、网格布局、自动布局和组件化的前置条件，非常重要；
2.frame是多合一属性，可以充当画板、编组和形状图层三者中任意角色；
3.frame具有裁切属性；
4.frame能立竿见影得提效，可以应用在控件、裁切效果的图标绘制和组件管理等等，让你开心画图、早点下班。
figma布局的底层逻辑是以frame为基础、以父子级关系为脉络。所以如果不理解frame，依旧还用group传统思维去作图，那其实就又回到sketch的布局习惯了。
但愿看完这篇文章，你在之后的作图中能善用frame，因为它是能让你解放生产力的重要前提。虽然忘掉cmd+g比较难，但可以从现在开始刻意练习，让你形成肌肉记忆（怎么就突然freestyle起来了。。）
记住，一定要多实操！！
最后，献上文中的所有案例，后台回复「1012」即可领取。
如果这篇文章对你产生了些许帮助，点个「在看」，让它帮助到更多的设计师。
我是Andrew，下期见。
参考资料：
https://jasonck.medium.com/figma-%E5%88%9D%E5%BF%83%E8%80%85%E6%94%BB%E7%95%A5-1-%E8%A6%81%E7%94%A8-frame-%E9%82%84%E6%98%AF-group-e460e76e928b
https://uxdesign.cc/when-to-use-a-group-or-a-frame-in-figma-507063ed4c35
https://raouf-belakhdar.medium.com/learn-figma-basics-part-3-frame-constraints-4f567f7a7cf9
https://blog.prototypr.io/frame-vs-groups-why-one-of-them-can-break-your-designs-beyond-repair-c4b0ee7b770a
https://help.figma.com/hc/en-us
《我做设计这么久，居然没听过这个模型？！》
《吃透这个概念后，我多年的疑惑终于没了！→》
《一招鲜、吃遍天的神仙风格，看这篇就够（文末福利）》
👋一起聊设计
公众号推送机制改版，文章不按发布时间排序啦。各位在公众号的右上角“…”（不是文章的右上角~）将转行人的设计笔记设为星标⭐，这样就不会错过每一篇文章了！