如何在Figma中创建并使用复选框

复选框是现代用户界面设计中不可或缺的重要组成部分。它们使用户能够轻松地进行多项选择、确认操作或控制各种功能。

虽然复选框看起来很简单，但在Figma中设计交互性强且可扩展的复选框，实际上需要对相关组件、变体、状态及属性有深入的理解。

本指南会为您详细介绍所需了解的所有内容，从复选框的功能与种类，到构建完全交互式组件的具体步骤，应有尽有。

您还将学习一些最佳实践，这些实践有助于提升界面的可用性；同时，通过使用现成的组件，您还能更快地完成设计工作，从而打造出更高效、更具可开发性的设计方案。

目录：

1. 什么是复选框？

2. 用户界面设计中的复选框变体

3. 复选框的状态

4. 在Figma中创建交互式复选框的步骤

5. 复选框的各种属性

6. 在Figma中设计复选框的最佳实践

7. 利用现成的复选框组件提升工作效率

8. 总结

什么是复选框？

复选框是一种用户界面元素，它允许用户从一组选项中选择一个或多个选项。每个复选框都是独立运行的，因此用户可以同时进行多项选择。

在Figma中，复选框通常被设计成具有多种变体的组件，这样设计师就可以在原型中展示不同的状态，比如已选中、未选中、鼠标悬停时显示的状态，或是被禁用的状态。

复选框的作用是什么？（我们为什么使用它？）

当用户需要以下操作时，您可以在设计中使用复选框：

• 选择多个选项

• 确认某个操作

• 启用或禁用某项功能

• 同意某些条款或政策

常见的实际应用场景：

• “我同意这些条款与条件。”

• 选择通知偏好设置

• 在电商应用程序中筛选商品

• 在待办事项应用中将任务标记为已完成

在Figma的原型设计中，交互式复选框能够帮助模拟真实用户的行为，从而让设计在开发之前就更容易得到验证。

UI设计中复选框的多种表现形式

不同的复选框格式

根据你的设计体系，复选框可以有多种呈现方式：

卡片式复选框选择——将复选框与卡片结合使用，用户可以通过卡片来选择相应的选项。这种设计方式能够提升视觉清晰度，特别适合用于需要选择大量内容的场景。

简单的待办事项列表复选框——适用于任务列表的基本复选框布局，用户可以用来标记已完成的任务项。这种格式常用于简单的进度追踪和效率管理。

状态与完成状态复选框——用于表示不同的任务状态，如待处理、进行中或已完成。这类复选框有助于用户快速了解任务的当前进展状况。

错误提示复选框——当某个必填的复选框未被选中时，会显示相应的错误提示。这种设计常用于表单中，以引导用户完成必要的操作。

芯片样式复选框选择——将复选框与芯片风格的UI元素结合使用，提供紧凑的多选功能。这类设计非常适合用于筛选、标记或快速选择操作。

嵌套式复选框结构——以父子关系组织复选框，支持批量选择以及部分选中状态，从而更好地实现层次化管理。

设计提示：

• 当用户需要选择多个选项时，应使用复选框。

• 当只允许选择一个选项时，应使用单选按钮。

复选框的状态

一个设计良好的复选框应该能够清晰地向用户显示其当前状态。

常见的复选框状态：

在下面的示例中，你可以看到复选框的各种状态：未选中、已选中、部分选中、禁用且不可选中、以及禁用但可被选中：

未选中（默认状态）：表示尚未进行任何选择。这种状态说明该选项是可用的，但目前未被选中。

已选中：表示用户已经选择了该选项。这种状态通常会用勾号来表示。

鼠标悬停时显示的状态：当用户将鼠标指针移到复选框上时，会显示这种状态，以表明该元素是可以交互的。

激活/被点击时的状态：当用户点击或触碰复选框时，会进入这种状态。在最终状态确定之前，这种状态会立即给予用户反馈。禁用状态：表示该复选框不具备交互功能，也无法被更改。通常会通过将其颜色变淡来提示该选项不可使用。
部分选中状态：表示选择了某些相关选项，但并非全部选项都被选中。这种状态常用于表示父级元素与子级元素之间的关系。

Figma如何处理这些状态（通过变体来实现）

在Figma中，使用组件内的变体来管理这些状态是最有效的方法。这种方法允许你将同一UI元素的多个版本组合到一个有条理的组件集中。

无需为每种状态分别设计不同的复选框样式，通过变体功能，你可以在一个组件中定义所有状态，比如已选中、未选中、悬停时以及禁用状态。每种状态都对应一个变体，你可以使用相应的属性在它们之间进行切换，例如：

• State = Unchecked

• State = Checked

• State = Disabled

这种做法有助于确保所有复选框实例保持一致性，并且可以通过属性面板快速切换状态。此外，通过关联不同的变体，你还可以创建交互式原型（例如，点击后状态会变为已选中），同时有效避免重复制作组件，从而提高设计效率。

简单来说，变体其实就是组件的不同“版本”，而Figma允许你将这些版本组合起来，模拟真实的UI交互效果——就像实际产品中复选框的工作方式一样。

在Figma中创建交互式复选框的步骤

从零开始设计交互式复选框确实有助于学习，但在实际项目中，速度和一致性才是关键。

如果你需要可以直接用于生产的复选框组件，可以试试Shadcn Studio。

它提供了受现代设计理念启发的、结构清晰且可扩展的UI组件，帮助设计师在保证质量的前提下提高工作效率。

步骤1：设计复选框的用户界面

首先画一个正方形（推荐尺寸为24×24像素），然后添加一个表示已选中状态的勾选图标（推荐尺寸为20×20像素）。

接下来添加文字标签（推荐字体大小为14像素），可以使用自动布局功能来确保各元素之间的间距合适（推荐间距为12像素）。

最终效果应该如下图所示：

步骤2：创建组件

将你设计的复选框转换为一个可重复使用的组件，这样就能确保设计的一致性和可扩展性。通过添加变体，你可以在一个组件集中高效地管理不同的状态变化。

• 选择复选框的设计样式。

• 将其转换为一个组件。

• 为不同的状态创建变体：

  • 未选中状态

  • 已选中状态

  • 不确定状态

  • 禁止选中操作

  • 禁止取消选中操作

为这些变体属性起明确的名称，例如：

• State = 未选中

• State = 已选中

依此类推。

步骤3：为变体添加交互功能

在设置交互功能之前，首先需要了解其工作原理。

在Figma中，各个变体并不会自动知道如何在不同状态之间切换。你必须明确指定某个变体在什么条件下会转换成另一个状态，这需要通过原型交互功能来实现。

可以这样理解：

• 每个变体都代表一种状态（未选中、已选中、悬停状态等）。

• 交互规则就是告诉Figma在什么情况下应该切换这些状态。

因此，当用户点击复选框时，你实际上是在告诉Figma：“当这个操作发生时（即被点击），状态应该从当前状态切换到另一个状态。”

正是这种机制使得复选框具备了交互功能，其工作原理与真实代码中的状态转换逻辑类似。

现在让我们来具体实现这一过程：

• 切换到原型选项卡。

• 选择未选中变体。

• 添加一个交互规则：

  • 触发条件： 点击操作

  • 操作内容： 将状态切换为→已选中

现在，重复相同的步骤来创建反向交互规则（这样复选框就可以再次恢复到未选中状态）：

• 选择已选中变体。

• 添加一个交互规则：

  • 触发条件： 点击操作

  • 操作内容： 将状态切换为→未选中

这种双向交互机制（未选中→已选中、已选中→未选中）正是复选框具备切换功能的原因所在。

步骤4：测试复选框的功能

预览该组件，确保所有的交互规则和状态都能正常工作。这一步有助于验证复选框在实际设计中的使用效果是否正确。

• 点击“展示”按钮。

• 尝试操作这个复选框。

• 它应该能够在已选中和未选中状态之间切换。

复选框：各种属性

在深入探讨具体属性之前，我们先来了解一下Figma中的变量是什么，以及它们为何如此重要。

Figma中的变量是什么呢？

Figma中的变量允许你存储和控制各种数值，比如元素的可见性、文本内容、颜色、大小或状态，并能在不同的组件中重复使用这些值。这与代码中变量的作用方式类似。

与其手动修改每个组件的实例，不如使用变量来一次性定义某个值，然后动态地控制它的表现。

可以把变量想象成以下这些东西：

• 开关（布尔值）——用于控制元素的显示或隐藏

• 选项（不同状态）——允许元素在“已选中”或“未选中”等状态下切换

• 可伸缩控件——能够统一调整多个组件的大小、样式或主题

这样，你的组件就会变得更加灵活、可扩展，也更容易进行管理，尤其是在规模较大的设计系统中。

为什么要在复选框中使用变量？

复选框往往需要根据不同的使用场景来调整其显示方式，比如是否显示标签、改变大小或切换状态。利用变量，你就可以轻松实现这些调整，而无需为每种变化情况都创建单独的组件。

通过使用变量，同一个复选框组件可以表现出多种不同的功能。

你可以用变量控制什么？

利用Figma的变量，你可以：

显示或隐藏标签——控制标签是否与复选框一起显示。当空间有限或者上下文已经很清晰时，这个功能非常有用。

状态切换——定义“已选中”“未选中”“悬停”或“禁用”等状态，以确保组件表现出一致的行为和反馈效果。

大小调整——指定复选框的大小（小、中、大），从而在不同用户界面环境中保持视觉上的统一性。

创建多种变体——结合状态、大小和标签的显示规则，创建结构化的组件变体，从而提高组件的可扩展性和便于管理性。

首先，我们来学习如何控制复选框中标签的显示与隐藏。

1. 将其转换为组件

你可以将复选框转换为一个可重复使用的组件，这样就可以在多个设计项目中统一使用它了。此外，之后还可以为这个组件添加各种属性和变体。

• 选中整个复选框，包括图标和标签文本

• 按Cmd / Ctrl + Alt + K将其转换为组件

• 将组件的名称改为“Check Box”

2. 为标签创建布尔属性

你可以使用布尔属性来控制标签的显示与否。这样，这个组件就能适应更多的使用场景了。

• 选择主组件。

• 在右侧面板的“属性”选项中，点击“+”按钮。

• 选择“布尔值”类型。

• 将此属性命名为“Label”。

• 将默认值设置为“True”。

这个布尔值属性用于控制标签的可见性。

3. 将布尔值属性与标签的可见性关联起来

你可以将这个布尔值属性与标签层关联起来，从而根据该属性的值来动态控制标签的可见性。

• 仅选择“标签文本”层。

• 在右侧面板的“外观”选项中……

• 点击图片中标有红色方块的图标。

• 选择“绑定到属性”选项。

• 选择“Label Boolean”属性。

现在，我们将学习如何为复选框添加与尺寸、状态及变体相关的属性。

我们会创建涵盖以下所有情况的复选框设计：

• 状态：未选中、已选中、不确定状态、禁用选中状态、禁用未选中状态

• 变体：主变量、次级变量、信息提示变量、警告变量、破坏性操作变量

• 尺寸：小号、中号、大号

然后选择所有这些复选框设计，通过点击“创建多个组件”（Cmd / Ctrl + Alt + K）将它们转换为组件。

当所有组件都被选中后，点击“合并为变体”按钮。