8 个 Figma UI3 技巧

自从 6 月份 Figma 的配置发布以来，我一直焦急地等待着获得新 UI3 的测试版访问权限。我立即想适应新的符号、布局和工具位置。更不用说，它预先警告说所有用户最终都必须使用 UI3。

但我不知道 UI3 正在慢慢向 Figma 用户推出*。我原本希望在 Config 的主题演讲结束后立即开始使用它，但我不得不等待一个多月。

*注意：使用相同 Figma 计划的队友可能会比您先获得访问权限。当我的一位同事在 Figma 中分享他们的屏幕来展示工作时，我感到很困惑，我可以看到他们有 UI3。在Figma 论坛搜索后，我很失望地发现我只能听从授予 UI 早期访问权限的人的摆布。

因此，如果您仍然无法访问 UI3，请保存本文并保持耐心（也许向 Figma UI3 领主祈祷）。一旦您最终获得访问权限，请在新 UI 中试用，然后再回来阅读本文。

现在，让我们深入了解这 8 个技巧，以便使用 Figma 的 UI3。

目录

1. 切换回上一个 UI
2. 选择匹配的图层并批量编辑文本
3. 使用建议的自动布局
4. 使用跟随原型
5. 隐藏原型点击提示
6. 修复使用叠加层进行自动布局的问题
7. 在开发模式下使用注释
8. 将文件固定到项目和工作区

1. 切换回之前的 UI

我知道这个技巧似乎与目的背道而驰，但重新设计可能很难习惯。如果你刚刚接触 UI3 并且有许多设计交付要完成，你可能还没有时间学习新的 UI。

步骤：

• 1a —选择用户界面右下角的“帮助和资源”问号图标
• 1b —从菜单中选择“返回上一个 UI”

 

• 1c — 准备好 UI3 后，打开“帮助和资源”菜单 → 选择“使用新 UI”

 

2. 选择匹配的图层并批量编辑文本

这些工具的位置和功能已从以前的 UI 更改为 UI3。由于 UI3 不包含位于画布顶部中心的动态工具栏*，因此“选择匹配图层”工具已移至底部菜单中的“操作”项。

“批量编辑文本”工具的功能已与“选择匹配图层”工具合并。手动或使用“选择匹配图层”工具选择文本图层后，只需键入即可同时更新所有文本图层。

步骤：

• 2a — 选择文件中的图层 → 在菜单中选择“操作” → “选择匹配的图层”（或使用 Option+Command+A）
• 2b — 更新图层（改变颜色、交换组件等）
• 2c — 如果更新文本图层，请选择“Enter”或“Return”→进行文本编辑

 

*附注：我喜欢 UI 顶部的动态工具栏（RIP）。工具栏会根据我在画布上执行的操作进行更新。因此，我对这一变化感到沮丧，但随着他们收到更多来自 UI3 测试版的反馈，他们可能会继续改进。

 

3. 使用建议的自动布局

此工具为 Figma 新手和高级用户都带来了价值。自动布局是 Figma 中最难理解的概念，而且执行起来很繁琐。“建议的自动布局”可以帮您完成这项工作（而且效果很好）*。

步骤：

• 3a — 选择框架元素 → 右键单击​​打开工具菜单 → 选择“更多布局选项” → 选择“建议自动布局”（或 Control+Shift+A）

 

• 3b — 检查框架（确保拥抱和填充正确）
• 3c — 调整父框架和子框架的填充和间距
• 3d – 手动重命名框架图层或使用 Figma AI 的“重命名图层”（…也许 Figma 将来会在这里集成重命名图层工具）

 

*注意：此工具尚不支持复杂框架。Figma建议您批量使用此工具来处理多个子父框架。

 

4. 使用原型

创建原型时，可能会出现错误。可能是叠加层未正确弹出，或者悬停效果不起作用。检查原型时，可能很难准确指出错误的确切位置 — 尤其是在原型很复杂的情况下。

预览原型时，“跟踪原型”工具可让您跟踪原型上正在查看的帧。因此，当您发现错误时，您就会知道它在哪里！

步骤：

• 4a — 选择原型起点的预览按钮（或 Shift+Space）

 

• 4b — 选择预览窗口工具栏中的溢出菜单 → 选择“遵循原型”（如果未选中）

 

• 4c — 测试原型（你仍然可以选择“R”重新启动）

5. 隐藏原型点击提示

如果您在 UserTesting.com 或类似工具上进行可用性测试，您可能会遇到参与者点击蓝色高亮来查找原型的交互。嗯，这违背了可用性测试的目的。

下次使用 Figma 原型进行任何研究时，请隐藏点击提示，以便参与者无法再作弊并找到交互。

步骤：

• 5a — 选择原型起点的播放按钮（或 Option+Command+Enter）
• 5b — 选择原型顶栏中的溢出菜单 → 取消选择“点击时显示提示”（如果已选中）

6. 修复使用覆盖的自动布局

当您有一个带有覆盖的组件（如下拉列表（或选择））时，您不希望它将框架中的其他内容向下推，也不希望覆盖出现在其他层后面。

 

我以前解决这个问题的方法是绝对定位覆盖层（现在称为“忽略自动布局”）。但我找到了一个新的解决方案——将框架的画布堆叠调整为“第一个在最上面”。

步骤：

• 6a — 确保组件的高度不包括覆盖层（对于下拉菜单，仅应包含输入字段）
• 6b — 将组件插入目标框架
• 6c — 选择组件的父框架 → 在设计面板中选择“自动布局设置” → 选择“第一页在最上面”

 

• 6d — 如果有多个父框架影响叠加，则重复步骤 6c

 

7. 在开发模式下使用注释

尽管 Dev-mode 已经存在了一段时间，但我仍在适应它的功能并开始更多地使用它。一个非常有用的功能是“注释”工具。使用此工具，您可以添加特殊注释并固定属性，例如高度、字体大小、颜色等。

步骤：

• 7a — 使用工具栏（或 Shift+D）切换到开发模式
• 7b — 从工具栏中选择“注释”工具（或按 Shift+T）
• 7c — 选择设计中需要注释的元素 → 在字段中输入以创建注释

 

• 7d — 如果需要，选择“+属性” → 将属性固定到元素
• 7e — 要在开发模式下删除注释，请右键单击框架 → 选择“删除注释”

以下是开发模式下完成的注释的样子：

8. 将文件固定到项目和工作区

对于设计师、工程师和利益相关者来说，在 Figma 中查找文件可能很困难。对于重要的文件（如开发就绪的设计），您可以将它们固定到项目和工作区，以便更容易找到它们。这样，您就不必将相同的 Figma 文件链接发送给同一个人 5 次……

步骤：

• 8a — 前往工作区的团队 → 选择一个项目来查看其文件（最好是您有编辑权限的项目）
• 8b — 右键单击​​文件 → 选择“固定到项目”或“固定到工作区”（文件将显示在 2 个地方：文件列表和固定列表）

 

以下是项目级别的固定文件的样子：

 

以下是工作区级别的固定文件的样子：

 

• 8c — 要移除固定的项目，请右键单击文件列表或固定列表中的文件 → 选择“移除项目固定”或“移除工作区固定”

 

现在就这些了，朋友们！

你可能已经注意到了，我没有提到臭名昭著的Figma AI的技巧。我的组织尚未批准 AI 功能，我的个人帐户也未被 Figma UI3 领主选中。因此，我无法直接使用这些新工具。

如果你不知道的话，Figma 不得不删除“制作设计”AI 功能，因为它复制了现有的设计。话虽如此，我正在耐心等待 Figma AI，并将很快发布另一篇包含一些 AI 技巧的文章。敬请期待！

我希望本文能帮助您学习至少一个新的 Figma 技巧。谢谢阅读！

翻译：云瑞设计
原文：uxdesign