设计师们始终在寻找可以帮助简化工作流程并为用户创造创新解决方案的工具。这涵盖了组件、样式指南和设计系统，以及插件和扩展。
在本文中，我们将看到组件作为可以帮助设计师提高效率的功能。我将向您展示如何使用 Figma 创建一个交互式按钮组件。
目录 #
- 先决条件
- 什么是组件？
- 如何在 Figma 中创建交互式按钮组件
- 构建按钮组件 ## 先决条件：
要充分利用本文，最好具备基本的使用 Figma 及其功能的知识。但请注意，这并非必需，因为我为每个人编写了这篇文章 - 无论他们的知识水平如何。
本文适用于所有对学习更多关于组件、可重用元素、Figma 和设计有兴趣的人。
什么是组件？ #
组件是可重复使用的设计元素，您可以在项目中多次使用或跨不同项目使用。
组件是交互式构建块，用于创建按钮、卡片、菜单、侧边栏等元素。 用户界面中的重要组成部分是组件。它们可以根据其目的进行分类：动作、容器、通信、导航、选择和文本输入。- 材料设计3
组件可以是简单的元素，如按钮或图标，也可以是更复杂的结构，如导航栏或整个UI模块。它们有助于在设计中保持一致性和统一性，具有可扩展性，并且对协作非常有帮助。
按钮组件
按钮，有时称为CTA，是允许用户执行特定操作的元素，如注册、购买产品、订阅通讯或其他操作。它们有不同的格式和大小，是设计中非常重要的元素。
按钮组件通常包括形状、大小、颜色和字体等视觉属性，以传达其功能并鼓励用户交互。它们的样式和外观可以根据设计系统、品牌指南或其在特定环境中的使用情况而变化。 接下来，我们将在 Figma 中创建一个交互式按钮组件。这个按钮组件将包含仅包含文本的按钮，带有文本左侧或右侧的图标的按钮，以及仅包含图标的按钮。
该按钮组件将包含不同的按钮状态（默认、悬停和活动状态），并且将是交互式的。
当您设计具有不同用例的界面时，这将非常有帮助。例如，您可能希望在设计中使用一个按钮携带文本和相应的图标，用于特定屏幕。在另一个屏幕中，您可能只想使用一个仅包含图标的按钮。如果您已经创建了这些不同的组件，您将节省很多时间。 ### 创建按钮组件
打开一个新的Figma文件。如果你还没有Figma账号，请前往figma.com (opens new window)创建一个。
打开一个新的Figma文件
接下来，点击左侧面板上的文本图标，然后输入“按钮”。
在搜索栏中输入“按钮”。
接下来，添加自动布局（Shift + A）。
将水平按钮填充设置为36像素，垂直填充设置为12像素。 为按钮添加圆角。
为按钮添加填充。
移动到“填充”部分。
我将选择颜色代码＃1C199，这是蓝色的一种色调。
选择颜色代码。
接下来，我会让文本变得更加粗体。要做到这一点，请点击文本，然后移动到右侧面板上的字体部分。
移动到字体部分。
我会给按钮设置16px的字体大小，并将字重设置为“中”。
改变字体大小为16px。 修改字体重量为中等。
展示编辑后的文本
接下来，我将在按钮框架中添加我选择的任何图标。这将使我在需要时轻松创建带有图标而不仅仅是文本的按钮组件。
要添加图标，我将使用一个名为 Iconify 的 Figma 插件，它是 Figma 中最大的图标集之一。要做到这一点，右键单击您的画布，将弹出菜单。转到 插件 选项卡。
打开插件
最近使用的插件列表将弹出。您还将看到您保存的所有插件。我的列表中的第一个插件是 Iconify（因为我经常使用它，哈哈）。现在，我只需点击 Iconify 并搜索我想使用的特定图标。
如果您以前从未使用过插件，因此您的列表中没有插件，您可以使用资源部分来搜索。 前往资源部分
搜索插件
我想使用“向前箭头”图标，所以我会在插件的搜索栏中搜索它。
搜索向前箭头图标
会出现很多不同系列的向前箭头图标，所以我会选择一个对我来说最合适的，比如来自IonIcons的向前箭头图标。
选择特定的向前箭头图标
我会选择这个图标，然后点击“导入图标”按钮，这样它就会出现在我的Figma文件中。 导入图标到您的文件
接下来，我们将减小图标的尺寸至我们想要的高度和宽度。目前是48 x 48，我想要它是24 x 24。
图标尺寸目前为48x48
将图标尺寸更改为24x24
我们还将更改图标的颜色以匹配文本颜色（白色）。要做到这一点，请确保选择了图标，然后向下滚动至“选择颜色”以输入颜色代码，本例中为#FFFFFF。
更改图标颜色为白色（#FFFFFF）
接下来，我们将在按钮框架内添加图标。要做到这一点，只需将图标拖入框架内。
将箭头图标拖入按钮框架
您会注意到 随着添加的图标，框架大小增加了。
接下来，复制图标并将其移动到文本的另一侧。复制图标将帮助我们稍后轻松创建带有文本两侧图标的按钮组件。
要做到这一点，只需使用 Ctrl + D，将复制的图标移动到另一侧。
使用 Ctrl + D 来复制图标
将复制的图标移动到框架的另一侧。
接下来，我将隐藏两个图标，因为我想创建我的第一个按钮组件（仅文本按钮）。我将将框架重命名为按钮。
要隐藏两个图标，请移动到左侧的图层面板，并单击要隐藏的资源旁边的眼睛图标。
移动到图层面板以隐藏图标 确保一旦两个图标隐藏，框架会自动调整大小。
按钮框架与隐藏图标
然后我会将框架重命名为_Button_。要做到这一点，双击框架的标题，然后重新命名。
双击框架
重命名按钮框架
如何创建变体 #
接下来，我们将使按钮框架成为一个变体。
变体可以帮助您创建组件的多个版本或状态。在设计具有不同状态或变化的界面时，它们非常有用，例如我们在这里创建的不同大小或设计的按钮。
要使按钮框架成为一个变体，请双击屏幕顶部的组件图标。 移動到屏幕頂部的組件圖標，並雙擊
接下來，我將添加另一個變體，因為我想為按鈕添加三種狀態（默認，懸停和活動）。要添加另一個變體，請單擊任何已存在變體上的加號圖標。
自動添加了一個新變體。
接下來，我將增加組件框的大小，以便容納將要添加的其他變體。要做到這一點，只需選擇整個組件，並將其拖曳到您滿意的大小。 增加组件框架的宽度。
如何创建悬停和活动状态 #
接下来，我将调整最后两个按钮（悬停和活动状态），以便三个按钮状态之间的区别明显。为了做到这一点，我将使悬停状态变得更轻，而活动状态更暗。
对于悬停状态，我将将颜色代码更改为#392AE7，这是一个较浅的蓝色。确保选择特定按钮以使更改生效：
更改悬停状态的颜色代码
对于活动状态，我将将颜色代码更改为#19107A，这是略深的蓝色。
更改活动状态的颜色代码
如何创建其他按钮状态 #
接下来，我们想要创建其他按钮状态。 按钮（文本两侧带有图标的按钮，以及仅带有图标的按钮）。
首先，我将复制这三个按钮。要做到这一点，请选择这三个按钮，然后使用Ctrl + D 进行复制。
复制这三个按钮
接下来，我们想要创建带有文本和左侧图标的按钮组件。要做到这一点，请点击每个图标上的左侧图标以将其显示出来。
显示按钮左侧的图标
接下来，我们想要创建带有文本和右侧图标的按钮组件。
为此，请再次复制这些按钮，并对右侧图标做同样的操作。
再次复制这些按钮
显示右侧图标。 最后，我们要创建只带图标的按钮组件。
为了做到这一点，我们将最后一次复制按钮以隐藏文本。
再次复制按钮
隐藏文本
我将使“仅图标”帧成为正方形形状。要做到这一点，请选择三个帧并拖动以调整大小。
选择“仅图标”帧
调整帧大小
现在，我将调整组件帧的大小以适应其内容。
调整组件帧大小。
接下来，我们将重命名不同的按钮状态，以便更容易识别它们。首先，选择整个组件帧。 移动到标记为“属性” （Properties）的部分，并将“属性1”更改为“按钮”以显示这是一个按钮组件。
移动到属性部分
接下来，我们将通过图标重新命名按钮框架。选择水平的前三个框架，然后转到“当前变体”部分。将它们重命名为“无图标”。
选择前三个按钮并重命名它们
重命名无图标按钮
我们将对接下来的三个按钮执行相同的操作，并将它们命名为“左侧图标”。
重命名左侧图标按钮
我们将对下一组按钮执行相同的操作，重命名。 重命名右侧图标按钮
最后，对于最后一组，我们将重命名按钮为“仅图标”。
如何按状态分组按钮 #
接下来，我们将按状态分组并命名按钮。我们将从第一个状态开始：默认状态。选择默认状态下的所有按钮框架，并转到右侧面板上的“当前变体”部分。单击配置图标以编辑组件配置。
单击描述框以添加描述。在这种情况下，我将简单地输入“默认状态”。
对于其他两个状态也执行相同操作 - 悬停。 为按钮组件添加交互性
首先，切换到位于屏幕顶部右侧面板的原型标签。
下一步，从第一个到第二个“无图标”按钮框架添加交互。要做到这一点，请单击第一个按钮框架，然后将加号图标拖动到第二个框架。
这将显示一个包含动画交互选项和设置的列表。
带来交互
请注意：在悬停状态下添加描述
请注意：在活动状态下添加描述 将 On click 更改为 While hovering。
更改交互类型为“悬停时”
对于下一个按钮框架，做同样的操作，但是将 While hovering 更改为 While pressing。
为第三个按钮框架添加动画效果。
现在，重复相同的步骤处理其他按钮集。
重复动画步骤以处理其他按钮集。
大功告成，您刚刚创建了一个交互式按钮组件。
结论 #
组件有助于增强您的设计，使其更加高效。它们还可以帮助您节省时间，并提高设计的一致性。但是只有在正确的创建方式下才能发挥作用。
经常练习将有助于提高您创建有用可重复使用组件的能力。记住，要以您的需求为中心做出每个决定。 自由代码营的开源课程已经帮助超过40,000人获得了开发人员的工作。开始学习吧。