迷你教程–使用Figma按钮组件

本文概述

• 任务1：构建基本的Figma按钮组件
• 任务2：使按钮具有交互性
• 任务3：建立按钮布局网格
• 任务4：调整按钮宽度以适应文本长度
• 任务5：创建悬停状态和焦点状态
• 任务6：实施按钮主题
• 任务7：看上Figma组件的美

在Figma中, UI元素称为”组件”。正确构建后, 它们具有难以置信的通用性, 并且易于更新, 但是组件具有哪些功能以及如何运行？我们将通过使用最常见的UI元素之一(按钮)来展示其功能。

为什么要扣？

按钮充满了诸如高度, 宽度, 标签长度, 内部填充, 状态和主题之类的变量。通过构建基本的按钮系统, 我们将学习将Figma与基于组件的思维方式和Figma组件库一起使用的巨大价值。

*编者注：本书面教程摘自Build UX的David Luhr创建的视频教程。

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

我们将首先创建一个新框架并将其重命名为”图层”面板中的”按钮”。

输入你的按钮标签文本。在本教程中, 我们将使用”注册”。

我们的字体是：

• 机械手中等
• 字体大小18
• 线高24
• 文字对齐中心
• 中间对齐
• 调整大小=固定大小

写下按钮标签后, 双击文本框的右下角, 以便它将自动调整为最小的文本约束。

重命名文本层”按钮标签”。

单击以查看完整图像。

任务1：步骤1-5

制作一个矩形, 将其放在图层面板的”按钮标签”下方, 然后将其重命名为”按钮容器”。允许按钮容器的颜色保持默认的灰色。

为按钮容器建立固定的高度。我们将使用60像素。

现在, 我们将内部填充添加到按钮容器中。

• 按钮标签的宽度为63像素。
• 我们需要24像素左右填充。加起来, 这等于48个像素。
• 因此, 我们将输入标签的宽度(63像素)+总填充(48像素)。

选择标签和容器, 然后使用对齐工具将它们居中。

单击以查看完整图像。

任务1：步骤6-9

我们设计了一个基本按钮。但是, 按钮的内部填充尚不能适应不断变化的标签长度​​。在稍后的步骤中, 我们将介绍内部布局, 这将使我们的按钮容器宽度相对于标签长度灵活。

任务2：使按钮具有交互性

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

复制按钮容器并将其重命名为”按钮聚焦环”。

确保聚焦环在”层”面板中的按钮容器下方。

取下聚焦环的填充物, 并添加一个黑色的内部描边, 其厚度为4像素。

我们还希望按钮容器和聚焦环的所有四个侧面之间有4像素的间隙, 因此我们将其宽度和高度都加上+16。

选择并居中对齐标签, 按钮容器和聚焦环。

这就是最简单形式的按钮在聚焦状态下的显示方式。

单击以查看完整图像。

任务2：步骤1-5

选择所有三个元素(标签, 按钮容器, 聚焦环), 单击鼠标右键, 然后选择”创建组件”。

单击以查看完整图像。

任务2：步骤6

重命名组件按钮/原始/默认。

• 按钮=组件类型
• 原始=变异
• 默认=状态

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

单击以查看完整图像。

任务2：步骤7

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

选择”按钮/原始/默认”, 转到设计面板, 然后单击”布局网格”旁边的” +”图标。

单击以查看完整图像。

任务3：步骤1

然后, 单击网格图标, 选择”列”, 然后输入以下值：

• 列数= 1
• 宽度=自动
• 男孩= 0
• 类型=拉伸

“边距”在按钮容器内提供填充。

• 请记住, 我们需要24像素左右填充。
• 我们还需要考虑聚焦环的4像素粗边框和4像素间隙。
• 这意味着我们将需要32个像素的边距。

单击以查看完整图像。

任务3：步骤2-3

添加页边距后, 你会注意到一个红色的指示器区域, 该区域显示按钮容器的内部填充并完全适合标签宽度。

单击以查看完整图像。

任务3：步骤4

现在, 我们必须向按钮的每个元素添加布局约束。

选择组件中的所有三个层, 转到”约束”, 然后将它们固定到”左右”和”中心”。

此时, 你可以选择组件并将其拖动到所需的任何宽度。你会看到布局完全按照设计的目的工作。

如果使按钮的宽度小于标签的宽度, 则会注意到标签会中断到另一行。

单击以查看完整图像。

任务3：步骤5-7

任务4：调整按钮宽度以适应文本长度

让我们看看带有较长按钮标签的按钮如何工作。

转到资产面板, 拖动按钮的新实例, 然后输入”计划约会”或更长的时间。怎么了？标签溢出到下一行-不完全是我们想要的。

单击以查看完整图像。

任务4：步骤1

返回到”图层”面板, 选择刚拖入的新组件, 然后使用箭头键将宽度调整为适合标签的精确尺寸。

当你执行此操作时, 你会看到所有布局变量都保持了预期的状态-内部填充, 标签放置, 聚焦环的4像素笔触和4像素间隙。 (在移至任务5之前, 请删除此重复按钮。)

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

单击以查看完整图像。

任务4：步骤2-3

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

在默认设置按钮的情况下, 让我们创建悬停和焦点状态的原语。

切换默认按钮中的聚焦环。

按住Alt键并拖出按钮默认值的新实例。

将按钮容器设置为浅灰色(＃E7E7E7)。

右键单击”创建组件”, 然后重命名”按钮/原始/悬停”。

单击以查看完整图像。

任务5：步骤1-4

拖出默认状态的另一个实例, 打开调焦环, 并使按钮容器的颜色与悬停状态容器(＃E7E7E7)的颜色匹配。

右键单击”创建组件”, 然后重命名”按钮/原始/焦点”。

现在, 我们掌握了按钮的布局及其在不同状态下的功能。从这里开始, 我们可以根据需要开始添加特定的主题或样式。

单击以查看完整图像。

任务5：步骤5-6

任务6：实施按钮主题

现在, 我们将创建样式变化。

按住Alt键并拖动到Button / Primitive / Default的另一个实例中。

更改容器的颜色以匹配所需的主题颜色(＃204ECF)。

将按钮标签设置为白色(#FFFFFF), 在对焦环上切换, 将笔触更改为所需的主题颜色(＃204ECF), 然后关闭。

右键单击”创建组件”, 然后重命名Button / BrightBlue / Default。

单击以查看完整图像。

任务6：步骤1-4

拖出此新默认按钮的两个实例：一个实例用于悬停状态, 另一个实例用于焦点状态。

更改按钮容器的颜色以匹配所需的主题颜色(＃678FFF), 右键单击”创建组件”, 然后重命名Button / BrightBlue / Hover。

将相同的颜色应用于焦点按钮容器, 在焦点环上切换, 右键单击”创建组件”, 然后重命名Button / BrightBlue / Focus。

你可以对设计中需要的任何数量的主题使用相同的过程。

单击以查看完整图像。

任务6：步骤5-7

任务7：看上Figma组件的美

制作完所有主题之后, 请花一秒钟的时间来观察使用组件的强大功能。

选择”按钮” /”原始” /”默认”, 添加拐角半径, 你将看到按钮的所有实例都将自动更新。

单击以查看完整图像。

任务7：步骤1

然后, 转到组件面板。你可以将按钮的所有实例拖放到设计的任何部分。

单击以查看完整图像。

任务7：步骤2

另外, 由于使用了这种命名约定, 因此我们现在可以将任何按钮替换为替代实例/主题。要查看实际效果, 请拖动按钮的一个实例, 然后在设计面板中转到”实例”, 选择所需的任何实例, 它会立即更改。

单击以查看完整图像。

任务7：步骤3

在组件框架内工作使我们能够快速有效地管理设计各个领域的按钮。最棒的是, 它不仅适用于按钮, 还适用于所有类型的UI组件。

• • •

在srcmini设计博客上进一步阅读：

• Figma作为设计工具的力量
• Figma vs. Sketch vs.Axure –基于任务的评论
• 使用Figma简化协作设计
• 多年来的按钮设计–运球时间表
• 成帧器教程：7个简单的微交互可改善原型