准时下班？小白看了都会的figma高精尖教程！

最近在“外边”看到一篇文章，觉得很不错，我整合一下展示给大家

在Config2024上，figma推出了全新的用户界面设计。相信很多小伙伴已经体验到UI3了，其中包含一些出色的新功能和隐藏的精华你一定没找到。接下来我来展示一下他的可以提高设计效率的新功能。

要选择或修改多个组件中的相同元素，请使用“选择匹配层”。这适用于设计元素和文本。请确保首先选择组件内的元素，此选项才会出现。

不要选择变体集中的匹配图层，而是使用多重编辑选项。它的工作原理类似，但会自动选择所有匹配图层以保持变体同步。这非常方便！

对组件中的所有填充和间距使用变量。必须使用自动布局设置组件才能使其正常工作。所有实例都将继承变量和任何更改。因此，除非绝对必要，否则请避免覆盖实例中的间距、填充或其他变量。

为了保持 UI 整洁，可以通过按住Cmd、选择所有变量并设置范围来批量限制变量，以将其可见性限制在相关区域，如填充、间距和宽度设置或系统中有意义的任何内容。

使用新的 Figma AI，您可以自动重命名所有图层。只需选择一个框架，单击 AI 工具，然后运行该操作即可。

使用 Figma AI 快速生成实例中的内容。确保使用描述性名称（如“位置”或“酒店名称”），而不是“Lorem Ipsum”等占位符。这有助于 AI 了解要更改的内容，并且您可以定位特定区域。您还可以将内容批量翻译成任何其他语言。

💡Tips： Figma 会为您生成 4 张图片。如果您想使用多张图片并保存以供日后使用，只需将它们从生成器拖到画布上即可。

这是我最喜欢的隐藏功能。在具有两个或更多相同实例的自动布局框架内，将出现一个小手柄。将其拉下即可创建其他实例并自动调整内容。

不要将组件分为浅色和深色模式，而是在组件中使用颜色变量。为深色创建第二种模式。您可以手动切换模式，或者最好将组件设置为自动，并将父框架设置调整为浅色或深色（确保父框架填充也是一个变量）。组件将自动继承模式并在进出框架时调整其颜色。

要确保所有颜色都是变量，请选择整个框架并使用选择颜色工具。这可以帮助您一次性捕捉所有颜色。

设置一个带有字符串变量和两种模式的集合。您可以根据自己的喜好命名模式，例如“断点”或“移动”和“桌面”。但是，模式的变量名称必须与变体的名称完全匹配。这对于其正常工作至关重要！

创建一个实例（目前仅适用于组件实例）。您将在属性面板中看到变量的符号（将鼠标悬停在其上！），然后找到您创建的变量。

将实例拖到代表屏幕的父框架上。确保实例保持设置为“自动”，但选择父框架并将其更改为断点（您创建的模式）。移动实例时，您将看到它为每个框架选择正确的变体。

💡Tips

如果父框架包含使用该集合中的变量的元素，您才会看到父框架的模式切换！

您可以为父框架添加最小和最大宽度（请确保使用自动布局才能正常工作）。这可确保在测试时它不会超出或低于给定的断点。

您无需为每个断点创建一个变量，而是可以在 Figma 中使用布尔变量。此功能有些隐蔽；右键单击眼睛图标即可访问它。使用模式，您可以将布尔变量绑定到组件内的不同元素，并在断点处打开和关闭它们。

，其中包含针对每种屏幕尺寸的模式以及布尔变量，以控制每种模式下元素的显示或隐藏时间。

：将所有元素放在一个组件中，并将它们与创建的变量连接起来

按下Cmd+R可快速重命名所有元素。这对于添加或删除/命名约定、添加数字或替换文本（例如在大型组中，如图标集）特别有用。

您可以使用/命名约定来组织组件，但我建议使用部分。Shift+S按 创建一个部分。将组件拖到部分上以在资源面板中自动创建一个子文件夹。您可以随时更改组件的位置并重命名部分。

选择具有交互实例的框架并按下Shift + Spacebar以使用文件内预览快速测试交互组件的行为。

以前，只需一个操作即可创建多个组件或整个组件集；但是，它已在最新更新中移出，现在可以在组件下拉列表中找到。

插槽组件将嵌套实例作为占位符，子元素可以在此进行交换。确保主组件已设置自动布局，以便正常工作。现在，您可以将嵌套实例转换为组件属性，并设置交换的首选值。这可以帮助用户快速识别哪些元素适用于插槽，并减少混淆。

14.在几秒钟内通过 URL 从现有页面创建 Figma 组件在理想情况下，从设计到开发的所有组件都会被记录下来。然而，正如我们所知，世界并不总是完美的，所以有时你必须逆向而行，从现有页面创建 UI 组件。html.to.design 插件允许你从 URL 快速创建 Figma 页面。