目录
Figma是什么
什么是组件
在创建组件之前
创建按钮组件
创建一个复选框组件
试试看
概括
Figma是什么
Figma 是一个方便的设计工具，用于在 Web 制作中轻松轻松地创建设计和线框。
这次我想介绍如何创建 Figma 组件。
什么是组件
Figma 的组件是一个功能，可以让您管理可重复使用的设计元素并灵活快速地修改和更改它们。
按钮和输入框即使在单个页面中也经常使用相同的设计，而当涉及到多个页面时，我认为页面布局通常会应用大量的设计元素。
在这种情况下，如果需要将按钮作为一个整体进行审查，那么逐个修改每个按钮将是很多工作。通过把这个按钮做成一个组件，如果你把原来做成一个组件的按钮修改了，每个页面上的所有按钮都会被修改后的按钮代替，这是一个非常方便的功能。
在设计生产中创建组件时，我们往往会关注设计，但我认为在组件中添加一点运动会使其更易于使用。
这次，我想介绍使用按钮和复选框创建此类组件的过程。
在创建组件之前
让我们在创建组件之前准备一个示例屏幕。
创建按钮组件
1.创建一个按钮
通过对矩形和文本进行分组来创建一个按钮。
根据自己的喜好调整按钮样式。
选择分组按钮，然后在屏幕顶部的红框中按“创建组件”，使其成为一个组件。
2.添加变体（属性）
选择组件化按钮后，按屏幕顶部红框中的“添加变体”以添加变体。
也可以从屏幕右侧红框中的属性“+”添加变体。
3.添加另一个变体
按下组件按钮底部红框内的“+”，可将变体数量增加到 3 个。
这三种变体是
“普通按钮”
“当它有焦点时的按钮”
“单击时的按钮”
用来表达每一个
4.更改变体（属性）的名称
更改变体（属性）的名称以使其更易于理解。
将屏幕右侧红框中的“Property 1”名称改为“State”，以便于理解。
5.重命名每个变体
让我们从屏幕左侧的红框更改每个变体的名称。
“状态=变体 2”到“状态=焦点”，
将“state=variant 3”更改为“state=clicked”。
将其保留为“默认”。
6.调整每个变体的按钮样式
让我们根据焦点和点击的感觉来调整按钮样式在红框中。
7.为默认按钮添加移动
将鼠标悬停行为添加到默认按钮。
在按钮组件中选择“默认”的情况下，在右侧“原型”选项卡中按“交互”的“+”，设置“交互细节”的红框。
8.为焦点按钮添加移动
接下来，在单击焦点按钮时添加移动。
选择按钮组件中的“Focus”，在右侧“Prototype”选项卡中按“Interaction”的“+”，设置“Interaction details”的红框。
此时的事件不是“点击”而是“按下”。
以下是创建按钮组件的步骤。
创建一个复选框组件
1.创建一个复选框
然后创建一个复选框。
通过以与按钮相同的方式对矩形和文本进行分组来创建复选框。
根据自己的喜好调整复选框样式。
选中分组复选框，然后在屏幕顶部的红框中点击“创建组件”，使其成为一个组件。
2.添加变体（属性）
通过在选择组件复选框的同时按屏幕顶部红框中的“添加变体”来添加变体。
也可以从屏幕右侧红框中的属性“+”添加变体。
3.添加一个变体使数字4
按组件复选框底部红框中的“+”，将变体数量设置为 4。
这四种变体是
“不检查”
“当焦点击中而不检查时”
“已检查”
“如果有一个检查并且焦点命中”
用来表达每一个
4.更改变体（属性）的名称
同样，让我们更改变体（属性）的名称以使其更易于理解。
将屏幕右侧红框中的“Property 1”名称改为“State”，以便于理解。
5.重命名每个变体
让我们从屏幕左侧的红框中更改每个变体的名称。
“状态=默认”到“状态=无”，
"State=Variant 2" 到 "State=None_Focus",
将“状态=变体 3”更改为“状态=已检查”。
让我们将“State=Variant 4”更改为“State=Checked_Focus”。
6.调整每个变体的复选框样式
让我们根据有无焦点来调整复选框样式，并像红框一样检查。
7. 将动作添加到无复选框
将鼠标悬停动作添加到无复选框。
在复选框组件中选择“无”，在右侧“原型”选项卡中按“交互”的“+”，设置“交互细节”的红框。
8.将移动添加到 None_Focus 复选框
将鼠标悬停移动添加到 None_Focus 复选框。
勾选复选框组件中的“None_Focus”，在右侧“Prototype”选项卡中按“Interaction”的“+”，设置“Interaction details”的红框。
在按钮事件发生时，选择了“按下”，但在复选框中“点击“选择。
9. 将鼠标悬停移动添加到选中复选框。
将鼠标悬停移动添加到选中复选框。
在复选框组件中选中“Checked”，在右侧“Prototype”选项卡中按“Interaction”的“+”，设置“Interaction details”的红框。
10. 向 Checked_Focus 复选框添加移动
将鼠标悬停移动添加到 Checked_Focus 复选框。
选中复选框组件中的“Cheked_Focus”，在右侧“Prototype”选项卡中按“Interaction”的“+”，设置“Interaction details”的红框。
再次，事件是点击“选择。
通过在“交互详情”中选择红框内的“无”，复选框的✓标记会在每次点击时出现和消失。
以下是创建复选框组件的步骤。
试试看
1. 在资产示例屏幕上放置按钮和复选框
让我们实际使用它。
选择屏幕左侧的红框“资产”，将每个组件拖到示例屏幕上进行放置。
安排好后，按屏幕右上方红框内的“▶”开始演示。
2.尝试按演示操作屏幕
您可以看到焦点和单击事件对按钮和复选框做出反应并移动。
概括
在网页设计中，将图像传达给客户并与开发人员共享图像是一项非常重要的任务。
出于这个原因，我认为如果你添加动画而不是仅仅显示图片会更容易想象。
如果您省去麻烦，您以后不是经常遇到很多麻烦吗？
这一次，我们创建了按钮和复选框，但您可以将它们应用于各种设计元素，例如输入框和列表框。
在开发中，常说软件技术要入库或标准化，以提高开发效率和生产力，但令人惊讶的是，在开发的上游阶段处理的事情标准化，例如设计的组件化，更有效。认为这会提高我的工作效率。
原创声明：本文系作者授权爱码网发表，未经许可，不得转载;
原文地址：https://www.likecs.com/show-308629441.html