Figma Design 的设计过程需要创建和置入不同的元素（如文本、图标、图片等），并对它们进行设置实现最终的设计效果。而这些元素，它们都会在左侧资源面板中映射出一个对应的“图层 Layer”，且不同的元素类型会用不同的图标标识。

理解图层相关知识是 Figma 前期学习过程中最重要的知识点之一，因为不同图层会有不同的属性设置和特性，在后续的复杂操作中会遇到的问题90%以上都可以在图层列表中找到答案。

学习图层包含两个部分的知识点，结构与类型。

图层的结构

图层结构即图层在列表中的层级状态和包含与被包含的状态，Figma Design 文件内的元素层级如下所示：

页面Page – 合集 Section – 画框 Frame / 其它编组 – 基础图层 Layer

页面 Page 即设计文件下级别最高的对象，一个 Page 可以理解成是一个独立的画布，每个画布可以放不同的设计内容，便于我们做分类的管理。比如一个项目文件，我们可以用 Page 分成登录、社交、电商、设置等不同模块，每个模块内放对应的设计内容。

合集 Section 是需要通过工具创建的一种特殊编组类型，是Page下级别最高的编组，每个 Section 是独立的不能相互包。它的主要作用是把对画布内容做进一步的分区，或是截选画布这个区域的内容完整导出。

画框 Frame 和其它编组类型，就是比较复杂且容易引起混乱的部分了，因为它们没有绝对的上下级关系，除了可以容纳基础图层外，也可以相互包含。这种包含关系也会在图层列表中得到体现，编组的下级图层会有缩进，且可以通过展开图标开启和隐藏下级内容。

图层的关系除了包含与被包含关系外，还包括 “上下覆盖关系”，即元素在画布中相交时，上方的图层视觉内容会覆盖并遮挡下方的视觉内容。

而有一些特殊的特层类型会对这个逻辑有一定的破坏，我们会在下方提及。

图层的类型

第二个问题我们就要了解图层的类型了，图层是一个广义解释，即图层列表中的每个选项都可以叫图层，但它还可以进一步拆解成两个大类，即：

• 基础图层
• 编组图层

基础图层即不能再包含下级图层的单一图层，主要包含下面这些类型：

这些图层都通过工具栏的工具置入，代表了不同的设计元素类型，且在右侧得属性栏设置会有一定的差异。其中使用 Figma 绘制的所有图形不管是钢笔工具还是矩形、圆、星形等都是矢量图层。基础图层的主要差异在属性设置上，我们会在下一节再做出相关说明。

编组图层则是包含下级图层的合集类图层，排除 Section 的话还包括下面这些类型：

这里重点要区分的就是一般编组 Group 和画框 Frame 编组的差异，它们使用起来非常接近。

一般编组只是将多个图层编组成为一个整体，用于对它进行排版、管理。而画框 Frame 则是 Figma 中的特殊编组（后面统一叫 Frame 更顺口)，虽然也具备一般编组的功能，但它被赋予了更重要的任务和特性。

画框编组 Frame 和一般编组 Group 的差异可以总结为下面这些：

• 视图作用：视图 View 是一个开发概念，即元素需要置入到视图内才会被系统渲染显示出来。在 Figma 中，我们需要用 Frame 作为界面设计的画板，只有内容被置入到 Frame 中，才能在演示模式下被显示出来，反之则不显示。
• 响应模式：元素置入 Frame 可以激活响应设置，对 Frame 的缩放逻辑类似浏览器窗口的调节，是对下级元素进行适配调整，而不是一般编组的整体放大。
• 背景色：Frame 作为显示区域可以单独设置背景色等属性和样式，而 Group 是“空”的，无法为它添加色彩描边等样式。
• 编组名：Page 中级别最高的 Frame 左上角会现实名字，如果 Frame 置入其它 Frame 内，则名字会被隐藏。而一般编组的名字则完全不会在画布中显示出来。

Frame 的作用非常丰富，主要应用于界面画板和自动布局中，所以很多项目内往往包含大量的 Frame，并替代一般编组的使用。但作为新手，在前期实践中，如果找不出创建 Frame 的理由，就尽量用一般编组进行编组即可，不需要强行使用 Frame 增加理解负担。

一般编组和画框编组通常都是我们主动创建出来的，而自动布局、矢量布尔、设计组件则是在进行其它操作时自动生成的，下面逐一做个简单的介绍，具体功能的理解可以在后面看到。

自动布局编组：

是在创建自动布局时生成的编组形式，有单独的属性设置。

矢量布尔编组：

在多个矢量图形进行布尔运算后生成的编组，虽然使用了布尔元算后的新图形，但下级会保留原来的矢量图形，方便进行二次调整。

界面组件编组：

Figma 中的组件 Component 应用后的结果。如果直接使用 Group、Frame 创建组件，那么这些基础编组会直接被替换成组件编组，如果只有一个图层创建组件，则它会新建一个组件编组将原有图层置入下级。

编组的上下级关系在实践过程中非常重要，错误的关系就无法获得想要的结果，比如：

• 蒙版没有使用编组导致上方所有的图层“消失”
• 元素图层不在Frame内，演示和导出时都“消失”
• 自动布局编组跑到其它编组下级，导致显示错位

所以后续操作如果出现错误，优先从图层开始排查，没有发现错误再检查其它内容。

图层列表中的特殊分组

图层列表种还有一种系统级的分组，那就是为元素添加了滚动交互的设置（后面交互章节会说），那么图层就会自动被分为 FIXDE 和 SCROLLS 上下两组。

当关闭全部图层的滚动设置后，这个分组也就会自动消失。关闭的方式可以逐一手动关闭，也可以从 FIXED 内把图层拖进 SCROLLS 中（早年不行，后面增加的功能）。

图层相关操作的快捷键

• 上移一格： ctrl/com + ] ，图层在列表中上移一位
• 移到最上：ctrl/com + alt + ]，图层移动到列表最顶端
• 下移一格： ctrl/com + [ ，图层在列表中下移一位
• 移到最下： ctrl/com + alt + [ ，图层移动到列表最底端
• 重新命名：ctrl/com + r，命名需要输入内容后按回车更改
• 锁定图层：ctrl/com + shift + l，锁定后不可操作
• 隐藏图层：ctrl/com + shift + h，隐藏后再画布内不可见
• 创建一般编组：ctrl/com + g
• 创建画框编组：ctrl/com + alt + g
• 解除一般编组和画框：ctrl/com + Backspace