Figma 的核心概念：Frame

我们前面已经多次说过， Figma 和传统设计工具最大的不同之处就是 Frame 了，但 Frame 是一个很好用但却不那么容易理解的概念。

因此在这次 Figma 报告里，我们首先需要了解的就是「到底什么是 Frame」。

从 div 说起

在传统设计工具中，我们画一个按钮时，需要先画一个背景图层，再添加一个文字图层叠在上方，然后把它们打包成一个组。

但是，前端工程师实现一个按钮的时候并不是这样构成的。他们直接使用一个 div 容器来包裹这段文字，然后再给 div 容器添加圆角、背景色样式。也就是说，这个 div 即是容器也包含了一个背景。

Figma 的 Frame 功能和这个 div 有异曲同工之处。如下图，上面这个按钮就是用 Frame 画的，从图层界面看起来它拥有更加精简的图层数量，但实际上并没有那么简单。

除了上面所说的区别，Frame 和 Group 还有三点差别：

总的来说，Frame 要比 Group 强大很多，Figma 的其他核心功能不少也都和 Frame 有关，比如说还可以给 Frame 添加布局栅格、自动布局、原型选项，Frame 的子元素还可以添加约束规则，而且组件也是一种特殊的 Frame。我们从它们右侧的属性面板也能看出来，Frame 是更复杂的。

Frame 如何体现 Figma 的设计理念

模块化设计

Frame 借鉴于开发实现中的 div，除了可以精简图层数量，更重要的是它把开发实现中的模块化思想引进了 Figma。当开发拿到一个设计稿时，脑海中会立刻浮现这个页面是由哪些模块构成的，最后的代码也是由一个个模块嵌套而成的。如下图，整个页面大致可以分为 Header、Content 和 Footer 三个模块，每个模块又可以分为更小的模块，比如 Header 又可以分为 StatusBar （状态栏）和 PageHeader （页面顶栏）。如此一来，整个代码结构清晰分明，更好维护了。

设计也应如此，我们可以借助 Frame 的多层嵌套特性，来拆分页面中的模块。如下图，通过多级 Frame 嵌套保持图层的结构和视觉上的模块基本一致（组件和自动布局元素也是 Frame，只不过是特殊的 Frame）。

在开始设计前，应该先在脑海中构思这个页面由哪些模块组成；在画图时，要习惯性地使用 Frame 拆分模块，保持图层的结构清晰。这样做不仅可以让我们的设计稿更容易维护，也会潜移默化地影响我们的设计思路，让我们在思考设计时更加有条理有逻辑。

响应式设计

在实际业务中响应式布局很常见，在 Figma 中我们可以借助布局栅格（Layout grid）和约束（Constraints）来实现响应式设计。

布局和栅格是两个很经典的设计方式，在很早之前的 Bootstrap 中就有 12 列栅格布局，帮助我们快速排布元素。而 Ant design 的栅格则更加精细，最多可以分为 24 列。

在 Figma 中，我们可以给 Frame 添加栅格布局，但它的作用更像是自己用的参考线，不一定能够和开发那边的栅格布局对齐。Figma 的栅格布局分为三种：

• 网格：生成网格参考线，一般在画图标时会使用 1×1px 的网格方便像素对齐，或者添加 4×4px 的网格方便快速对齐，遵循上篇所述的 8px 基准网格。

• 行：生成行布局参考，支持自定义行数、间距、边距。

• 列：列很常见，我们经常用来做一些横向的均分参考，支持自定义列数、间距和边距。

Web 没有固定尺寸，移动端设备的屏幕尺寸也越来越多样，如果一稿能够适配多屏，可以替我们节省很多时间。响应式约束（Constraints）就可以帮我们做到一稿适配多屏。如下图，当我们拉伸时，状态栏左边和右边的图标一直保持在两侧，输入框一直跟随父级被拉伸，这些都是通过给内部元素添加响应式约束来实现的。

不同于栅格布局，响应式约束是给 Frame 的子元素添加的属性，它决定了该元素在父级 Frame 尺寸改变时的行为。如下图，我们给这个时间文本设置的是水平方向上居左，垂直方向上居中，所以在我们拖拽外部 Frame 的时候，它会一直保持在左边，同样地右边的网络电池图标一直保持在右边。

如果我们在设计时给所有元素都添加相应的响应式规则，在屏幕尺寸差异不大时，只需要完成一个尺寸的设计，最后将其复制一份，改为其他尺寸，所有的设计都会自动适配，这就实现了一稿多配。从上面的描述中你应该注意到了，布局栅格是添加在 Frame 上面的，而约束是添加在 Frame 里面的元素（子元素）身上的。响应式约束还可以和布局栅格结合使用，做出更加复杂的布局规则，在后面动态响应式布局里面会详细讲解。

组件式设计

组件是一种特殊的 Frame，如果你把一个 Group 转为组件，它会自动变为一个 Frame。你不能把它变回 Group，除非把组件解除。

原型动效

在 HTML 中容器可以设置内部滚动，Frame 也是一个容器，所以它也可以设置内部滚动。比如下图中推荐模块，我们设置容器可以横向滚动，这样在原型模式下就可以横向滚动里面的内容了。

在滚动时有些元素需要固定位置，比如 App 的底栏，我们可以勾选该元素的 Fix position when scrolling （滚动时固定位置），这样在原型模式下滚动内容时它的位置不会变。

蒙版

蒙版或者遮罩（Mask），是设计软件中很常见的一种功能，一般用来将图形裁切为某种形状。Figma 中也有蒙版，但是我不推荐使用，因为大部分情况下我们使用 Frame 的 Clip content（裁切内容）可以更自由地实现裁切。

蒙版图层结构复杂，会让你的设计结构变得不清晰，所以推荐使用 Frame 的内容裁切，可以大大减少蒙版的使用。

Frame 的基本操作技巧

对于很多初次接触 Frame 的朋友来说，Frame 像是一个不受控制的淘气鬼，总是有自己的想法，导致最后放弃使用 Frame，所以我在这里给大家介绍一些关于 Frame 的操作魔法，帮你更好地控制它。

创建 Frame

在前面我们介绍了可以使用快捷键 Cmd+Option+G/Ctrl+Alt+G 快速创建 Frame，其实这只是其中之一。我们还可以点击顶部工具栏的「井」字形图标来创建，或者按下快捷键 F 来创建。按下后在画布中拖拽框选出一个区域，这个区域内的元素就会被自动包含进这个 Frame。

在按下 F 之后，你的光标会变成「十」字形，此时就可以在画布中拖拽出一个 Frame，右边会同时出现预置 Frame 尺寸选择，你可以直接点击选择一个常用的设备尺寸来快速创建。

直接在画布中创建的 Frame 就是画板，它的名字会直接显示在画布中，双击可以修改。非一级元素的名字不会直接显示在画布中，所以如果你发现某个元素的名字直接显示出来了，说明它是最外层 Frame，需要在左边图层列表里面把它移到某个画板内部。

除此之外，我们还可以使用自动布局 Shift+A 和组件Cmd+Option+K 的快捷键来快速创建 Frame，只不过它们是一种特殊的 Frame。

缩放

如果我们拖拽右下角缩放一整个 Group，里面的元素会跟着缩放，但是 Frame 却不同，缩放整个 Frame 它里面的元素的变化取决于上文所说的响应式约束，在缩放时可能会出现意想不到的情况。如果你想在缩放 Frame 时让它的子元素忽略这些响应式约束规则，可以在缩放的同时按下 Cmd/Ctrl 键不放。

自适应内容大小

由于 Frame 的尺寸大小不是由内部元素决定的，所以当你调整内部元素的位置大小之后，Frame 并不会自动适应它，此时我们可以点击右边的自适应内容图标，让 Frame 的尺寸自动适应内部元素的尺寸。

吸附

Frame 有自动吸附，在我们拖拽一个元素经过 Frame（普通 Frame、自动布局 Frame 或者 Main 组件）时，它会被自动吸附进去，变为这个 Frame 的子图层。会不会被吸附一般是取决于被拖拽元素的大小，如果它比目标 Frame 大就不会被吸附，如果比 Frame 小就会被吸附。

如果我们想要相反的效果，可以在拖拽后按下 空格键 或 Cmd/Ctrl。按下 空格键 再拖拽，就不会被吸附；相反地，按下Cmd/Ctrl 再拖拽，就会被强制吸附。需要注意的是，一定要先按下再拖拽，时机很重要。

同样地，当我们移动某个 Frame 的子元素时，很容易在移出边界时丢失父子关系，此时也可以按下 空格键，来保证这个子元素和 Frame 的层级关系不变。

快速选择

如果我们的设计稿拥有多层 Frame 嵌套，默认点击元素时会先选中外层，双击才会逐步进入下一层，如果想直接选中最内层的元素，我们可以按下 Cmd/Ctrl 再去点击。

因为使用 Frame 之后，我们的图层结构会出现很深的层级，需要在这些层级之间切换会有点麻烦，比如我们想快速选择一个元素的父图层，或者想选中一个 Frame 的所有子图层。这里就不得不推荐两个快捷键：Enter 和 Shift+Enter。按 Enter 可以快速进入下一层，按 Shift+Enter 可以快速选中上一层。这在我们需要快速改变某个 Frame 的所有子元素属性时很有用，直接 Shift+Enter 选中所有元素，而不需要从左边一个个选择。这一对快捷键再是我们实际设计过程中经常使用提升的效率不是一点半点，所以建议大家多多使用以习惯它。

Frame 和 Group 该用哪个？

从上文中我们了解了 Frame 的优势，那么是不是在设计时应该全部都使用 Frame 而抛弃 Group 呢？

是，但不完全是，没有必要可以不使用 Group。 Frame 的尺寸不受内部元素影响，拥有自己的属性，而 Group 的尺寸由内部元素决定（撑开），给它添加的属性（颜色、描边等）会被子元素继承，在前期探索时使用 Group 会更快一点，而且在画一些结构逻辑不是那么强的东西（比如插画）时 Group 也比较方便。

Group 的快捷键是 Cmd/Ctrl+G，Frame 的快捷键是 Cmd+Option+G/Ctrl+Alt+G，但解除它们的快捷键都是 Cmd/Ctrl+Shift+G。Frame 和 Group 可以互相切换，选中后只需要点击右边顶部的下拉菜单切换即可。

关联阅读

• Best practices: Groups and Frames
• To Frame or Not to Frame, That is the question | 聊聊 Figma 中 Frame, Group 的使用情境與限制
• 在 Figma 中如何选择 group 或 frame？

> 下载 少数派 2.0 客户端、关注 少数派公众号，解锁全新阅读体验 📰 

> 实用、好用的 正版软件，少数派为你呈现 🚀