Figma 上的设计按钮可以使用平台上的组件和自动布局属性以不同的方式创建。 因此，可以使用标签、大小和图标来自定义按钮。 如果您不确定如何在 Figma 中创建按钮，那么您来对地方了。
本文介绍了如何创建按钮以及如何充分利用 Figma。
创建一个按钮
按钮是设计功能用户界面时常用的元素。 您可以在 Figma 主题中创建一个按钮。 如果您是 Figma 新手，您需要首先了解基础知识。
以下是创建按钮的分步指南：
- 创建一个新的 Figma 主题。
- 按键盘上的 F 键添加框架，然后选择桌面或电话。
- 使用键盘上的 R 键，添加一个尺寸为 50 的矩形 Pixel 身高和200 Pixel 添加宽度。
- 按键盘上的“T”添加文本。 将文本居中，使其水平和垂直位于文本框的中间。
- 将此文本框放置在矩形的中心。
- 根据需要对组件进行分组。
您可以通过使用颜色选择器创建颜色来添加颜色，也可以通过网络访问十六进制颜色。
对比
按钮内的文本颜色取决于它与黑色或白色背景的对比度是否更好。 您可以使用这两个选项来找出效果最好的一个。 如果您不喜欢任何选项，您可以自定义按钮的样式和颜色。
创建简单的按钮
Figma 上可以创建三个基本按钮。
主按钮
主要按钮是纯色的，带有黑色或白色文本。 此按钮会在用户使用应用程序时记录用户。 创建方法如下：
- 为您的按钮选择一种颜色。
- 选择矩形，然后应用选定的颜色。
- 根据更好的对比度将文本着色为白色或黑色。
辅助按钮
这通常是一个白色按钮，但以您选择的颜色勾勒出轮廓。 按钮文本也可以具有相同的颜色。 这是您可以创建的第二个最重要的按钮。 它还应该引起用户的注意。
- 将矩形的颜色更改为白色 (#FFFFFF)。
- 在矩形中添加描边。 您可以在此处选择所需的颜色。
- 将文本颜色更改为与文本颜色相同。
第三按钮
第三键不如前两个键重要。 它们可以用作链接、取消订阅或后退按钮。 它们通常是纯文本，在某些情况下可能带有下划线。
- 将矩形设置为白色，没有线条。
- 根据您的喜好更改文本颜色。
您可以创建类似于主按钮或辅助按钮的第三按钮。 您还可以更改线宽以获得更好的可见性。
创建一个带有文本、自动布局和颜色的按钮
平台上的工具可让您获得自动布局和文本工具的实践经验。 根据分步说明，创建按钮应该相对容易完成。 要创建按钮，您需要创建文本图层，将文本图层转换为自动布局框架，并设置按钮格式。
创建文本层
在此步骤中将使用文本工具。
- 点击工具栏中的文本工具或按字母“T”。
- 激活文本工具后，点击画布并输入单词“按钮”。 请注意，文本图层名称将与画布上输入的内容相匹配，除非在“图层”面板中手动更改。
- 如果需要更改图层名称，请双击左侧边栏，然后输入您选择的新名称。
现在您还可以通过增大或减小字体大小来进行试验。
- 选择您的文本图层。
- 导航到右侧边栏并更改“文本”部分中的字体大小。 您还可以更改字体或坚持使用默认选项。
将文本图层转换为自动布局框架
此时，该按钮仍需要一些调整，使其看起来更迷人。 您可以通过自动布局让事情变得更有趣。 自动布局是 Figma 的一个强大功能，可以应用于响应式设计。 这些主题会自动适应内容大小、对象放置和设备类型等变化。
自动布局可用于将图层转换为框架或现有框架。 要将布局应用到现有框架，请选择文本图层，然后按 Shift-A。 应用布局后，您会注意到一些变化。
- 文本层位于框架内。 自动布局仅适用于组件和框架，因此 Figma 会自动将文本图层放置在新框架中。 框架没有填充颜色。 这将应用于按钮样式步骤。
- 当您选择框架时，自动布局设置将显示在右侧边栏中。 自动布局可以进一步优化。
- 您会注意到，随着文本的变化，框架变得越来越小。 这些动态元素可以节省您设计将在不同设备上显示或翻译成其他语言的内容的时间。
设计按钮
您可以开始添加颜色。
- 选择一个框架图层，然后在右侧边栏中选择“填充设置”。 这个填充颜色
自动地。 颜色选择器会改变颜色。 - 选择文本图层并将填充调整为#FFFFFF。
- 重新选择框架，然后使用右侧边栏中的设置来调整角半径。
接下来，需要安装框架衬垫。 将字母文本转换为自动框架布局后，文本和框架边框之间会自动添加一个空格。 此时，所有侧面的内饰看起来都是一样的。 您可以将顶部和底部的内边距更改为小于右侧和左侧的内边距。
您可以根据需要更新内饰。 可以使用以下快捷键同时更改左右内边距或顶部和底部内边距：
- 抓住 <⌥ Option> 或者
然后单击填充区域以输入面向侧面的填充值 - 抓住 <⌥ Option> 或者
按住并拖动手柄可更改对页的间距
此时，按钮看起来不错，但您仍然可以更新标签。 您必须双击文本才能启用编辑。 输入“登录”一词。 按钮的大小会随着您的键入而变化。 如何使用自动布局和文本工具设计按钮。 您现在可以尝试一些新的东西，例如例如，将按钮转换为组件或添加变体。
创建可点击的按钮
Figma 由 Uber 等公司提供支持， Facebook谷歌和 Netflix。 可点击按钮功能使此类公司的设计人员更容易创建交互式可点击按钮。 这些按钮使浏览此类平台变得更加容易。
如何在 Figma 中开发此类按钮：
- 从菜单（右侧）中，选择“原型”选项。
- 单击“原型”选项卡下方的加号 (+)。 这允许您添加交互。
- 在交互详细信息窗口中选择单击时。
- 选择“打开链接”选项。
- 添加按钮单击后将转到的页面链接。
- 点击“X”图标退出“交互详细信息”窗口。
- 导航到右上角的“播放”单选按钮。
- 点击播放按钮预览设计。
当您将鼠标悬停在按钮上时，它会变成一个类似手的图标。 这表明该按钮现在可以单击。
注意：创建可点击的 Figma 按钮时，请始终使用“点击时”，而不是“拖动时”。 单击时允许您向按钮添加可单击的链接。 无法单击“拖动时”按钮。
使用 Figma 按钮进行更好的设计
Figma 按钮具有主题、状态、内部填充、表格长度、宽度和高度等变量。 通过学习如何在平台上创建按钮，您可以充分利用 Figma 并向 Figma 库添加增值组件。
你尝试过在figma上制作按钮吗？ 如果是，您的经历如何？ 请在下面的评论部分告诉我们。
