在Figma中快速导航的高级技巧 —— 第一部分
2023 年 10 月 11 日

在Figma中快速导航的高级技巧 —— 第一部分

有四个面板是您在使用Figma时经常访问的。您可以使用一些快捷键访问这四个面板。

感谢@rokuzeudon提供键盘插图 | 文件链接 (opens new window)

图层面板

此页面包含所有页面和页面中的所有组件。

资源面板

这允许您浏览其他启用的已发布组件 (opens new window)。 库。例如,您可以导入一个开源图标库,比如Remix Icons (opens new window),将其放入您的项目中并发布整个库。现在,您可以直接从资产面板访问所有图标。

您可以通过按住Option键并将图标从资产面板拖动到工作帧中来切换组件实例 (opens new window)

启用库的情况下,Option + 2可以节省很多时间。

关于库 #

这将打开一个弹出窗口,显示您项目中发布的所有库。您可以相应地启用或禁用它们。只有启用其发布的库,您才能访问其资产。您可以通过资产面板访问它们。

“库”图标位于资产面板中(书籍图标)。

关于设计面板 #

您对屏幕的这一侧应该很熟悉。这是一个相当广泛的设计面板。 ## 用于原型设计面板

通过使用 Option 键在设计和原型之间切换可以节省很多时间,因为原型设计常常需要对界面进行微小的视觉调整。

用于检查面板 #

这只在交付阶段非常有用。我们将在接下来的一系列文章中详细介绍。

隐藏特定面板以获得更多设计空间,避免分心 #

隐藏左侧面板

有时候你需要更多的空间来直观地比较3-4个屏幕。这个快捷键可以让你只保留右侧面板,并获得更多的画布空间来进行设计。

啊,这么多安静的设计空间🤭

只看画布

在虚拟会议和演示中,边缘到边缘的预览可以保持更清晰的界面。与使用 N 和 Shift N 进行正确导航 (opens new window)一起使用这个快捷键。 了解选择边界

当您在组中选择一个项目时,有两个明显的边界告诉您有关所选项目的层次结构。

1像素的实线显示您所选择的内容,而虚线显示该选择的同级项目。让我通过一个简单的示例来解释给您看。看看这个组件:

当我选择sibling-1时,我可以看到它周围有一个1像素的描边,并且所有三个兄弟项目周围有一个虚线轮廓。

即使不查看图层面板,您也可以看到所选项目的同级项目。

当我悬停在对象上时,你会看到一个更粗的描边。这可以帮助您在组中放置的项目中进行深度选择(按住Command键) (opens new window)

我只是在按住Command键的同时悬停。

通过图层面板导航

您可以通过协同使用图层面板来遍历深度嵌套的组和帧。 按下“返回”(或“输入”)键,您将选择该组/框架内的每个图层。这些元素被称为“子元素”。

这将使您在图层层次结构中上升一个级别。这意味着您将选择所选子元素的父级。

通过使用“返回”和“Shift + 返回”键,我能够在不同级别之间跳转(太专业了,是吗?)

在组/框架内的兄弟元素之间切换 #

按下“返回”键后,您将选择父级组内的所有兄弟元素。如果按下“Tab”键-您将选择选择列表中的第一个子元素。再次按下Tab键将允许您切换到下一个子元素。

这将反向遍历列表。Tab键将选择列表中的下一项。Shift + Tab键将带您到列表中的上一项。

这个快捷方式将节省您很多时间,而无需触摸触摸板

图层顺序如何影响您的工作流程? #

人们常犯的一个错误是认为图层将按相似的顺序排序 层次堆栈与元素在设计画布上的可视和空间排列方式完全不同。实际上,图层面板并不关心您如何在视觉上排列元素。

请注意,如果您的图层在左侧堆叠得不正确,批量重命名 (opens new window)功能将无法正确重命名您的帧。当您导出帧时,这将成为一个麻烦。您的每个屏幕将具有错误的名称。

不不不不不

有一个插件可以让您的生活更轻松。排序插件 (opens new window),由Thomas Lowry (opens new window)开发,允许您按照您在图层面板中放置的顺序重新排序图层。 第一步 - 从Figma社区安装插件(免费)

第一次安装插件?那么你将进入一个全新的世界🌍

点击此处下载“Sorter” (opens new window) by Thomas Lowry (opens new window)

第二步 - 通过快捷操作栏 (opens new window)运行“Sort Position”命令

快捷操作栏 - 几乎可以快速访问的每个功能

但是在运行Sorter插件之前,您必须选择要重命名的所有框架。然后像这样选择“Sorter > Sort Position”:

在您的屏幕底部将会有一个提示。 如果一切顺利,您将不会注意到画布上的任何视觉变化。这是因为您的图层已根据右侧图层的空间位置在左侧进行了排序。

所有帧的名称相同,因此您无法清楚地看到发生了什么。但这正是实际发生的情况:

左侧 - 排序之前 | 右侧 - 排序之后

我将在此结束本文,因为我希望您能够慢慢吸收这些内容。我们将在即将发布的文章 (opens new window)中涵盖更多有趣的细节✏️