【新！超详细】Figma组件属性完全指南

静电说：Figma新的组件属性已经发布一段时间了，只能说，确实很好用。 但是还有很多同学会有疑问，今天静电为大家翻译了一篇Figma新组件属性的完全指南，非常全面，各位小伙伴一起来学习吧！先收藏再看哦~

2022 年 5 月，Figma 在 Config 2022（Figma 年会）期间推出了一些新功能，但有一个我认为是最强大的：组件属性。在过去的两个月里，我一直在玩这个功能，这里有一个指南，涵盖了有关组件属性的所有信息。

本指南将向您展示如何使用该功能以及何时有用。为了帮助您更好地理解这个主题，我在本文中添加了许多 GIF。

什么是组件属性？

组件属性是一项功能，可让您为每个组件创建许多选项，而无需创建许多变体。过去，我们必须为每个选项创建一个变体。使用组件属性，我们可以在组件内构建逻辑，为我们提供相同的选项，但变体更少。

为什么要使用组件属性？

使用组件属性的主要原因是它减少了我们需要为每个组件创建的变体数量以涵盖所有可能性。例如，我创建了一个具有三种类型的按钮：主要、次要和再次级。每个都有 4 种状态：启用、悬停、聚焦和禁用。此外，每个都有两个图标，一个在左边，一个在右边，加上一个文本标签。在组件属性之前，我需要生成 48 个变体，但是对于组件属性，我只用了 12 个变体就完成了。

除了节省我们创建许多变体的时间之外，组件属性还减少了维护设计系统 UI 套件所需的工作量。

使用组件属性也很有用，因为我们可以从属性面板（右侧面板）控制组件的许多方面。不需要点击组件的层级，我们可以一键更改很多参数。

属性类型

我们可以使用四种类型的属性来构建组件，让我们来探索一下

实例交换属性

Instance swap 属性是一个允许我们直接从属性面板交换组件的选项。您不必在组件中选择一个层来交换它。您可以直接从属性面板中选择整个组件并在其中交换层。

何时使用实例交换属性？

当您想在另一个组件中交换组件时使用它。例如，当您有一个按钮时，您可以通过属性面板更改按钮内部的图标。

目前，无法交换变体。例如，如果您有一个内部包含变体的嵌套组件，您将无法更改变体，只能更改整个组件。

文本属性

text 属性允许您从属性面板编辑文本层。您无需单击组件内的文本层即可更改文本。选择组件时，您可以直接从属性面板编辑文本。

何时使用文本属性？

设置组件变体时，无需单击文本图层即可更改文本。您可以在批量操作中更改文本：假设您在五个按钮中输入了一个错误，并希望为所有五个按钮修复此错误。您可以选择所有五个并在属性面板中编辑文本。只需键入一次，所有文本图层都会更改。

布尔属性

在我看来，这是最强大的属性。布尔值是代码中使用的术语，表示真或假。使用此属性，您可以隐藏或显示组件中的元素。例如，让我们看一个包含图标的按钮。如果您希望图标出现在按钮内，请将其切换为 ON (true)。如果没有，请将其切换为 OFF（假）

何时使用布尔属性？

布尔属性非常适合显示和隐藏图层。例如，对于带有和不带有图标的按钮。

变体

变体并不是一个新功能，设计人员已经使用它们来创建具有许多选项的组件。然而，Figma 的帮助页面说变体是组件属性的一部分。

何时使用变体？

如果您想制作不同的尺寸或/和颜色，请使用变体。例如，创建一个具有不同状态（如启用、悬停和禁用）的按钮。

还有一件事，如果你想使用交互式组件，你必须使用变体。

如何在 Figma 中添加属性？

第一步，您需要创建一个组件。例如，如果要创建按钮组件，则必须先完成按钮，然后单击顶部的图标。

实例交换属性

要添加实例交换属性，请选择一个图层并单击右侧菜单中图层名称附近的图标。将此属性命名，例如“图标”，并设置默认值。

文本属性

要设置文本属性，请选择一个文本图层，然后在右侧菜单的内容部分中，单击图标。指定图层名称，然后在值输入字段中指定一个值，例如：“按钮”

布尔属性

选择一个图层，然后在图层部分，单击图标以添加布尔属性。给它一个名称，例如“显示图标”，并将其设置为 true 或 false。当您将其设置为 true 时，它默认显示；如果将其设置为 false，则默认情况下不会出现。

变体

您可以从右侧菜单中添加变体。

首先，让我们创建一个变体组。选择组件，单击属性部分中的加号图标，然后选择“变体”。

然后，在右侧菜单中，将属性命名为“State”，将变体命名为“Enable”。选择组件变体并单击加号图标以创建新变体。你现在有了一个新的变种。例如，如果要创建悬停按钮，请将其颜色从启用更改为悬停，并将其命名为悬停。您现在有一个包含两个变体的变体组件集。

如何在 Figma 中编辑属性？

整理属性

您可以通过选择组件集并从右侧菜单中拖放列表中的项目来对属性列表进行排序。

更改属性名称

有两种方法可以更改属性名称：

1. 双击右侧菜单中的组件属性名称。

2. 单击详细信息图标，然后在窗口中更改名称。

更改列表中的变体顺序

当您单击一个实例并想要更改变体时，您希望它按字母顺序排列，或者最流行的变体在顶部。

在变体行上，单击详细信息图标。在打开的窗口中，拖放变体。您在此处设置的顺序是 Figma 将在列表中显示的顺序。

添加描述和链接

您可以为每个组件和变体添加描述和链接。此描述有助于设计人员了解如何使用该组件，因此他们不必离开 Figma 即可获取信息。

您还可以编写指向设计系统中组件文档的链接。

专业提示-命名属性

我们不能有同名的属性。例如，对于一个按钮，我们不能为布尔属性和交换属性赋予相同的名称，即“图标”。为了克服它，您可以在布尔属性中写入单词“Icon”之前添加单词“Show”。

一个老派的技巧是在其中一个属性中的“图标”一词之后添加一个空格。因此，布尔值和交换值将具有相同的属性名称。

快速交换组件

如果您想快速交换组件，可以将它们全部放在一个页面上或一个画板上。由于它们都将在同一页面上，因此它们将直接出现在交换窗口中，您无需导航即可找到它们。通过查看我在 Figma 社区中共享的带有插槽组件的灵活模式 Figma 文件来了解它是如何工作的。

属性列表

如果您有一个具有布尔值和另一个属性的组件，请对属性列表进行排序，布尔值位于顶部，然后是其他属性。当您将布尔值切换为关闭时，另一个属性会消失并且列表会移动。如果你这样工作，列表中的动作就会更少，而且会更有条理。

原文：https://uxplanet.org/figma-component-properties-548728f25392

作者：Edward Chechique 翻译：静电