创建按钮属性和变体

种类来创建按钮前,你需要决定按钮的属性和变体。 以下是将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)创建的样本模板。