种类来创建按钮前，你需要决定按钮的属性和变体。 以下是将Markdown翻译成中文并删除第一级标题的内容：
这是按钮将包含的内容。您的按钮可以有多个选项，例如大小、颜色、内容等等。
下面我展示了按钮的属性和变体：
按钮的属性和变体
提示1. 只添加在创建界面时会使用的选项。不必要的选项会使您的选项组件变得臃肿。
提示2. 需要“是”或“否”变体来通过开关显示或隐藏元素。
使用开关切换变体
2. 基本组件 #
首先，您需要创建按钮的基本组件。当添加新按钮时，基本组件的属性将帮助您快速而轻松地添加新按钮，因为您已经预定义了新按钮的变体。
例如，在本文的示例中，我们的组件将包括三种尺寸（大/中/小）和三种按钮类型（默认/固定/图标），总共会有9种不同的组件变体。
基本按钮的结构 你了解按钮的尺寸，但让我向你解释一下按钮类型之间的区别。
- 默认： 这是一个默认按钮，通过自动布局功能根据按钮内的文本更改宽度大小。
默认按钮
- 固定： 这种类型的按钮在宽度上是固定的，不会根据按钮内的文本更改。您需要手动更改宽度大小以适应您的内容。
固定大小按钮
- 图标： 这种类型的按钮由一个图标组成。
图标按钮
现在您已经了解了按钮类型，我们可以开始创建组件了，我们开始吧！
为了增加按钮的功能，我建议您下载一个免费的图标库和一个颜色和文本样式库。
• 下载：Material Icons Library (opens new window)
• _阅读文章：在Figma中创建可切换的浅色和深色模式样式 (opens new window) ## 默认按钮
当你创建一个默认按钮时，你首先需要将计数器、文本和图标占位符的属性进行分组。
现在，使用以下参数创建文本占位符（或者你可以设置自己的文本样式）：
- 字体：Inter
- 样式：中等
- 大小：20
- 行高：28
- 填充：#1C1C1C，或者设置自己的颜色样式
接下来，你需要创建一个计数器。为了创建计数器，你需要一个具有以下参数的文本图层：
- 字体：Inter
- 样式：半粗体
- 大小：10
- 行高：16
- 填充：#1C1C1C，或者设置自己的颜色样式
在将文本图层进行分组（cmd+G/ctrl+G）并使用以下参数启用自动布局功能后：
- 左/右内边距：4
- 上/下内边距：0
- 对齐：居中
- 填充：#FFFFFF
- 描边：1，内部，#E8E8E8
- 边框半径：96（或其他值以创建圆形形状）
最后，添加一个大小为“24x24”的图标占位符。你可以创建自己的图标，或者从Ma中复制。 材料图标库免费使用。
按照以下顺序分组(cmd+G/ctrl+G)所有元素：图标/文本/计数器/图标。
然后使用以下参数进行自动布局：
- 方向：水平
- 间距：8
- 左/右内边距：16
- 上/下内边距：12
- 对齐方式：居中
- 填充颜色：#FFFFFF
- 边框半径：8
最后将图层名称更改为“x-Base/Large/Default”并点击“创建组件”。
**提示1：**为什么使用x-Base？我们在创建界面时不使用基础组件，它们只用于创建变体。Figma按字母顺序显示组件库，使得我们的基础组件位于底部。
**提示2：**在基础组件中，您可以分配任何颜色值。创建变体时将分配所需的颜色值。
固定按钮 #
要创建固定按钮，我们首先需要从默认按钮复制元素（图标/文本/计数器/图标），然后使用以下参数点击“自动布局”：
- 方向：水平
- 间距：8
- 所有内边距：0
- 对齐方式：居中
接下来 创建一个框架：
- 宽度：256
- 高度：52（从默认按钮中获取高度大小，每种类型的按钮大小都有自己的高度）
- 边框半径：8
- 填充：#FFFFFF
在这个框架中添加内容元素，并设置约束和调整大小参数，如下图所示。
我们的按钮已经准备好了，现在我们可以将图层名称重命名为“x-Base/Large/Fixed”，然后点击创建组件。
图标按钮 #
要创建这种类型的基础按钮，我们需要图标占位符（24x24），将其分组并点击自动布局：
- 方向：水平
- 所有填充：14（根据每种类型按钮大小的高度值更改填充值）
- 间距：0
- 填充：#FFFFFF
接下来，将图层名称重命名为“x-Base/Large/Icon”，然后点击创建组件。
最后，我们的x-Base组件已经准备好了！
基础按钮的结构
3. 变体 #
这是创建通用按钮的最后且最有趣的一步。要创建变体组件，我们需要复制x-Base组件并创建多个按钮变体。 基于我们在一开始创建的结构，将以下Markdown翻译成中文，并删除一级标题：蚂蚁。
按钮的属性和变体
我们已经定义了大小和类型属性。现在我们需要通过更改颜色样式和隐藏/显示内容元素来创建其他属性。为了在创建变体时更容易，我们需要将我们的过程分为几个步骤。
第一步：内容 #
首先，我们需要通过更改元素的隐藏/显示值来创建几个在内容上不同的按钮变体。
内容变体结构
**提示：**要创建一个椭圆形图标按钮，只需更改边界半径-我将其设置为128。
第二步：样式 #
在这一步中，我们更改样式（主要、次要和无边框）和状态（默认、悬停、按下和禁用）属性的颜色。只需复制您在第一步创建的一组组件并更改颜色样式。
第三步：变体 #
选择所有组件，然后点击“创建组件集”。它会自动创建变体组件。
创建属性和变体 设置每个按钮的变体：
恭喜，您强大的按钮已经准备好了！
结论 #
这个按钮的变体结构是基于我在创建界面方面的经验。这里没有不必要的元素，只有那些会提高界面设计水平和速度的按钮变体。使用这个结构和步骤，您可以根据自己的喜好创建自己的按钮样式。更多示例，请访问我们的Dribbble (opens new window)个人资料，那里有许多使用Figma设计系统 (opens new window)创建的样本模板。