图层面板

当你在编辑器中时，你会看到画布两侧的侧边栏，这些侧边栏与工具栏一起构成了 Figma UI。

Figma UI 允许你访问，创建和调整设计元素。

右侧边栏 允许你查看和调整任何对象的属性。

你还可以在这里创建原型或查看任何所选对象的代码标注，我们将其称为 属性面板。 你可以在 属性面板 一文中了解更多相关信息。

左侧边栏 中可以访问文件中包含的图层，资源库和页面，我们将其称为 图层面板。

在本文中，我们将详细介绍图层面板。

图层面板顶部有三个选项，你可以在以下选项卡之间切换：

1. 图层面板（Layers Panel）
2. 资源面板（Assets Panel）
3. 页面列表（Pages List）

你也可以使用键盘快捷键切换：

macOS

图层面板和页面列表：Option + 1 资源面板：Option + 2

Windows

图层面板和页面列表：Alt + 1 资源面板：Alt + 1

提示

你可以使用 “显示/隐藏 UI” 功能切换 Figma UI 的可见性：

• macOS：⌘ + \
• Windows：Ctrl + \

你可以在没有 Figma UI 的情况下在画布中查看设计。

图层面板

你添加到画布的任何框架，组或对象都将显示在图层面板中。

新的图层将添加到列表的顶部，或者它所在的组或框架的顶部。

图层面板中显示了图层的嵌套关系，你可以单击“框架”或“组”旁边的箭头以查看任何嵌套的图层：

您可以通过旁边的图标确定图层是框架，组还是其它对象：

调整图层面板的宽度：

1. 将光标悬停在侧边栏的右边缘上，将出现双向箭头。
2. 单击并拖动以调整面板的宽度。
3. 释放以设置侧边栏宽度。

选择图层

你可以单击图层面板中的图层将其选中。

选中的图层将在图层面板中显示为蓝色，画布中的图层周围还会显示一个蓝色边界框。

你还可以通过将鼠标悬停在图层面板中的图层上来突出显示画布中的图层。

提示

你可以启用或者禁用“悬停时突出显示图层”：

在菜单中搜索 “Highlight”：

或者找到 Menu > Preferences > Highlight Layers on Hover:

重新排序图层

你可以更改图层在图层面板中显示的顺序。

这允许你将特定图层移动到画布的前面或后面，以及将图层移入或移出组或框架。

在图层面板中调整图层不会影响其在画布上的位置。它只影响你在画布中查看，选择或分组图层的方式。

你可以通过以下几种方式重新排序图层：

右键菜单：

1. 选择画布中的图层。

2. 右键单击图层以打开上下文菜单：

   

3. 然后你可以选择：

   • 向上移动：macOS：⌘ + ] | Windows：Ctrl + ]
   • 移到顶端：macOS：⌘ + ⌥ + ] | Windows：Ctrl + Shift + ]
   • 向下移动：macOS：⌘ + [ | Windows：Ctrl + [
   • 移到底端：macOS：⌘ + ⌥ + [ | Windows：Ctrl + Shift + [

图层面板：

通过拖动图层以更改其在层次结构中的位置。

• 将图层移向列表顶部会将图层置于画布的前面。
• 沿着列表向下移动图层将图层移动到在画布中的这些图层后面。

提示

你可以使用键盘快捷键撤消操作：

• macOS：⌘ + Z
• Windows：Ctrl + Z

切换图层可见性

你可以在图层面板中切换图层的可见性。隐藏后你仍然可以更改图层位置，或调整隐藏图层的属性。

1. 将鼠标悬停在图层面板中的图层上，直到出现眼睛和锁图标：

   

2. 单击眼睛图标以关闭图层：

   

3. 画布中将不再显示该图层，该图层也将在图层面板中显示为非活动状态。

4. 要再次显示图层，请单击闭合的眼睛图标：

   

提示

你还可以使用键盘快捷键：

• macOS：⌘ + Shift + H
• Windows：Ctrl + Shift + H

锁定图层

你还可以锁定图层以防止意外编辑。

锁定图层时，你将无法与其进行交互，也无法在画布中移动它。但仍然可以在属性面板中更改锁定图层的属性。

如果锁定框架或组，则该框架或组的任何子图层也将被锁定，你可以选择单独解锁任何子图层。

你可以通过几种不同的方式锁定或解锁图层：

使用键盘快捷键：

• macOS：⌘ + Shift + L
• Windows：Ctrl + Shift + L

右键单击图层并选择锁定/解锁

在图层面板中：

1. 将鼠标悬停在图层面板中的图层上，直到出现锁图标：

   

2. 单击锁以锁定图层：

   

3. 如果这是一个框架或组，那么该框架/组的任何子项也将被锁定，你可以单击子图层旁边的点以单独解锁它们：

   

4. 你将无法再在画布中编辑已锁定图层。

5. 要解锁图层，请再次单击锁图标：

   

提示

你可以快速切换多个图层的图层可见性和锁定。

单击眼睛/锁图标，然后在要更新的图层上拖动。

资源面板

这里是你可以重复的设计组件，可以是按钮或图标，也可以是更复杂的 UI 元素，如导航菜单或状态栏。

你可以创建这些元素的组件，然后在设计中重复使用这些元素。你对主组件所做的任何更改都将更新到组件的实例。

你可以在 资源面板 中查看所有组件：

这里会显示将来自当前文件的组件以及你有权访问的任何资源库。

你可以通过单击图层面板中的 Assets 来打开资源面板。

或者，通过使用键盘快捷键：

• MacOS：Option + 2
• Windows：Alt + 2

查找组件

你可以通过搜索查找需要的组件：

这将查找当前文件中的组件以及你有权访问的任何资源库。

然后，你可以将资源面板中的组件拖动到画布上：

资源面板中的组件按以下顺序排列：

1. 你在当前文件中创建的组件。
2. 此文件专用的组件，这包括此文件中未发布到团队资源库的任何组件。
3. 你在当前文件中使用的其他文件中的组件。
4. 任何已启用的团队资源库中的组件。

提示

你可以在网格和列表视图之间切换：

团队资源库

如果你在专业版团队中，你还可以从资资源面板访问团队资源库：

团队资源库允许你将文件中的组件发布到库中，然后你可以在其他文件中使用它们的实例。

在 团队资源库 一文中了解更多信息。

页面

页面允许你在单个文件中创建单独的画布。

你可以向文件添加的无限个页面。如果你的页面太多或者你的文件变得越来越大，你可能需要考虑使用新文件。

页面非常适合：

• 将存储与文件相关的组件和样式
• 设计的迭代
• 区分设计稿版本
• 针对不同的桌面或移动平台进行设计
• 创建不同的设计原型

浏览页面列表

你可以在图层面板的顶部找到当前页面的名称。

要打开页面列表，请单击当前页面名称旁边的箭头：

这将打开图层面板，你可以在面板中查看该文件中的页面列表。

然后你可以：

• 单击 “+” 图标添加一个新页面：

  

• 单击并拖动页面以更改顺序：

  

• 双击页面以更改名称：

  

• 右键单击页面以打开页面菜单，有以下选项：

  • 复制页面
  • 删除页面
  • 重命名页面
  • 创建一个新页面

  

• 单击当前页面旁边的箭头以折叠或展开页面列表：

  

在页面间移动图层

你可以在页面之间移动图层，当你想要拆解一个大文件时，这会很方便。同时也会保留与这些图层关联的任何评论。

1. 在画布或图层面板中选择一个对象、框架或组。

2. 右键单击以打开上下文菜单：

   

3. 选择菜单顶部的 Move to Page：

   

4. 选择要移动到的页面：

   

5. 移动后的对象、框架或组将移动到新页面上的同样的坐标位置。

词汇表

• 对象（Objects） 是您添加到画布的单个元素，可以是形状，矢量网络，文本对象或图像。

• 组（Groups） 是对象的集合，组允许你移动和定位，就好像它们是一个图层一样。组的大小由它包含的对象决定，而且没有自己的任何属性，你应用于组的任何属性都将应用于单个对象。

• 与组一样，框架（Frames） 也是对象的集合，但是框架的功能更像画板，而不是组。框架允许你控制对象的位置，对齐和布局约束。你还可以将框架嵌套在其他框架中。

  了解有关 组和框架 的详细信息。

• 子(Child) 和 父(Parent) 是通常用于 Web 开发的术语。我们使用这些术语来解释框架（父）与其中的任何对象（子）之间的关系。子项的布局约束和对齐将始终与其父项相关。

• 组件（Components） 是你可以在设计中重复使用的 UI 元素，可以是按钮，导航菜单，图库或布局。要复用组件，你需要创建组件的实例。

  了解有关 组件 的详细信息。