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

本文概述

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

文章图片
【迷你教程–使用Figma按钮组件】单击以查看完整图像。
任务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。
你可以对设计中需要的任何数量的主题使用相同的过程。