In Figma， UI元素被调用 组件. 建立适当的, 它们非常通用且易于更新, 但是组件能做什么, 以及它们是如何运作的? 我们将通过使用最常见的一种来展示它们的功能 UI元素 所有的按钮.

为什么按钮?

Figma中的按钮充满了像高度这样的变量, 宽度, 标签长度, 内部填充, 状态, 和主题. 通过了解如何在Figma中制作按钮，我们将学习使用的巨大价值 Figma 使用基于组件的思维方式和Figma组件库.

*编者注:本书面教程来源于David Luhr的视频教程 建立用户体验.

任务1:构建基本的Figma按钮组件

1. 我们将首先创建一个新框架并将其重命名 按钮 在图层面板中.
2. 键入按钮标签文本. 在本教程中，我们将使用“注册”.
3. 我们的字体是:
   
   • Roboto介质
   • 字体大小18
   • 行高24
   • 文本居中对齐
   • 中间对齐
   • 调整大小=固定大小
4. 一旦你写好你的 button label, 双击文本框的右下角，使其自动调整到文本的最小约束.
5. 重命名文本图层 按钮标签.



点击查看全尺寸图像.

6. 做一个矩形，放在下面 按钮标签 在图层面板中，重命名它 按钮容器. 允许按钮容器的颜色保持默认的灰色.
7. 为按钮容器设置固定高度. 我们用60像素.
8. 现在，我们将为按钮容器添加内部填充.
   • 按钮标签的宽度是63像素.
   • 我们需要24像素左右填充. 加起来等于48像素.
   • 因此，我们将输入标签的宽度(63像素)+总padding(48像素).
9. 选择标签和容器并用对齐工具居中.

点击查看全尺寸图像.

我们设计了一个基本的按钮. 然而，我们的按钮的内部填充还不能适应不断变化的标签长度. 在后面的步骤中, 我们将讨论内部布局, 这将允许我们的按钮容器宽度相对于标签长度是灵活的.

任务2:使按钮具有互动性

为了使按钮具有交互性，我们将添加一个对焦环.

1. 重复的 按钮容器 重命名它 按钮对焦环.
2. 确保焦点环在图层面板的按钮容器下方.
3. 移除对焦环的填充，并添加一个黑色的，内部描边，厚度为4像素.
4. 我们还需要在按钮容器和对焦环的所有四个边之间有一个4像素的间隙, 所以我们给它的宽度和高度都加上+16.
5. 选择并居中对齐标签、按钮容器和对焦环.

这就是我们的按钮在聚焦状态下最简单的样子.



点击查看全尺寸图像.

6. 选择所有三个元素(label, 按钮容器, 聚焦环), 右键单击, 然后选择“创建组件”."



点击查看全尺寸图像.

7. 重命名组件 按钮/原始/违约.
   • 按钮=组件类型
   • 原始=变异
   • 默认=状态

这是我们的原始按钮. 它不会出现在我们的最终设计中, 但它将作为我们所有按钮变体的基础. 的优势? 如果我们将来需要重新设计我们的按钮，我们只需要在一个地方进行编辑.

点击查看全尺寸图像.

任务3:建立按钮布局网格

1. Select 按钮/原始/违约，转到设计面板，单击“布局网格”旁边的“+”图标."



点击查看全尺寸图像.

2. 然后，点击网格图标，选择“Columns”，输入以下值:
   • 列数= 1
   • 宽度= Auto
   • 沟= 0
   • 类型=拉伸
3. "Margin"提供按钮容器内的填充.
   • 记住，我们需要24像素左右填充.
   • 我们还需要考虑焦点环的4像素厚边框和4像素间隙.
   • 这意味着我们需要一个32像素的边距.



点击查看全尺寸图像.

4. 加上了边距, 您将注意到一个红色指示区域，它显示了按钮容器的内部填充，并且与标签宽度完全匹配.



点击查看全尺寸图像.

现在我们必须为按钮的每个元素添加布局约束.

5. 选择所有三个图层 在 组件，转到“Constraints”，并将它们固定在“Left” & 右”和“中”."
6. 此时，您可以选择组件并将其拖动到您想要的任何宽度. 您将看到布局完全按照设计的方式工作.
7. 如果您使按钮宽度短于标签, 您会注意到，标签断开到另一行.

点击查看全尺寸图像.

任务4:根据文本长度调整按钮宽度

让我们看看我们的按钮如何使用更长的按钮标签.

1. 转到资产面板, 拖进按钮的新实例, 然后输入“安排约会”或更长的内容. 会发生什么? 标签溢出到下一行——这不是我们想要的.



点击查看全尺寸图像.

2. 回到图层面板, 选择刚刚拖进来的新组件, 使用方向键将宽度调整为适合标签的精确尺寸.
3. 当你这样做的时候, 您将看到，所有布局变量仍然是预期的内部填充, 标签位置, 聚焦环的4像素行程和4像素间隙. (在移动到任务5之前删除此复制按钮.)

通过使用布局网格, 你可以创建一个按钮，可以在所有的设计中使用, 你所要做的就是根据标签的长度来调整宽度.

点击查看全尺寸图像.

任务5:创建悬停和焦点状态

有了默认按钮，让我们创建悬停和焦点状态的原语.

1. 关闭默认按钮中的对焦环.
2. 按住Alt键并拖出默认按钮的新实例.
3. 按钮容器的颜色为浅灰色(#E7E7E7).
4. 右键单击“创建组件”，然后重命名 按钮/原始/悬停.



点击查看全尺寸图像.

5. 拖出默认状态的另一个实例, 打开对焦环, 并将按钮容器的颜色与悬停状态容器的颜色相匹配(#E7E7E7).
6. 右键单击“创建组件”，然后重命名 按钮/原始/焦点.

我们现在有了按钮布局的句柄，以及它在不同Figma按钮状态下的功能. 从这里开始，我们可以根据需要添加特定的主题或样式.

点击查看全尺寸图像.

任务6:实现按钮主题

现在，我们将创建风格变化.

1. 按住Alt键并拖动到的另一个实例 按钮/原始/违约.
2. 改变容器的颜色，使其匹配所需的主题颜色(#204ECF).
3. 将按钮标签设置为白色(#FFFFFF), 切换对焦环, 将描边更改为所需的主题颜色(#204ECF), 然后关掉.
4. 右键单击“创建组件”，然后重命名 按钮/ BrightBlue /违约.



点击查看全尺寸图像.

5. 拖出这个新的默认按钮的两个实例:一个用于悬停状态，另一个用于焦点状态.
6. 改变按钮容器的颜色，使其匹配所需的主题颜色(#678FFF), 右击, “创建组件,然后重新命名 按钮/ BrightBlue /悬停.
7. 对焦点按钮容器应用相同的颜色, 切换对焦环, 右键单击, “创建组件,然后重新命名 按钮/ BrightBlue /焦点.

您可以对创建Figma按钮组件所需的任意数量的主题使用相同的过程.

点击查看全尺寸图像.

任务7:欣赏Figma组件之美

一旦你完成了所有的主题, 花点时间来观察使用组件是多么强大.

1. 选择您的 按钮/原始/违约，添加一个角半径，您将看到按钮的所有实例都自动更新了.



点击查看全尺寸图像.

2. 然后，转到组件面板. 按钮的所有实例都可以拖动到设计的任何部分.



点击查看全尺寸图像.

3. 也, 因为我们用了这个命名约定, 现在，我们可以将任何按钮替换为另一个实例/主题. 要查看实际效果，请拖动该按钮的一个实例，然后转到 设计 面板，选择您需要的任何实例，它会立即更改.

点击查看全尺寸图像.

在组件框架内工作使我们能够快速有效地管理我们设计的所有区域的按钮. 最重要的是，它不仅适用于按钮，还适用于 UI组件 所有类型.

现在你知道了如何在Figma中创建按钮，我们想听听你的意见! 在下面留下评论，展示您使用本教程创建的内容, 或者如果你有不同的方法, 请随时与我们的Toptal社区分享.