如何在Figma中创建并使用复选框
复选框是现代用户界面设计中不可或缺的重要组成部分。它们使用户能够轻松地进行多项选 … Read More
Socrates
复选框是现代用户界面设计中不可或缺的重要组成部分。它们使用户能够轻松地进行多项选择、确认操作或控制各种功能。
虽然复选框看起来很简单，但在Figma中设计交互性强且可扩展的复选框，实际上需要对相关组件、变体、状态及属性有深入的理解。
本指南会为您详细介绍所需了解的所有内容，从复选框的功能与种类，到构建完全交互式组件的具体步骤，应有尽有。
您还将学习一些最佳实践，这些实践有助于提升界面的可用性；同时，通过使用现成的组件，您还能更快地完成设计工作，从而打造出更高效、更具可开发性的设计方案。
目录：
什么是复选框？
复选框是一种用户界面元素，它允许用户从一组选项中选择一个或多个选项。每个复选框都是独立运行的，因此用户可以同时进行多项选择。
在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）将它们转换为组件。
当所有组件都被选中后，点击“合并为变体”按钮。
{
elem.addEventListener(event, (e) => fn(e, elem), false);
});
}
}
const onLoad = function () {
let lastKnownScrollPosition = window.scrollY;
let ticking = true;
attachEvent('#header nav', 'click', function () {
document.querySelector('[data-aw-toggle-menu]')?.classList.remove('expanded');
document.body.classList.remove('overflow-hidden');
document.getElementById('header')?.classList.remove('h-screen');
document.getElementById('header')?.classList.remove('expanded');
document.getElementById('header')?.classList.remove('bg-page');
document.querySelector('#header nav')?.classList.add('hidden');
document.querySelector('#header > div > div:last-child')?.classList.add('hidden');
});
attachEvent('[data-aw-toggle-menu]', 'click', function (_, elem) {
elem.classList.toggle('expanded');
document.body.classList.toggle('overflow-hidden');
document.getElementById('header')?.classList.toggle('h-screen');
document.getElementById('header')?.classList.toggle('expanded');
document.getElementById('header')?.classList.toggle('bg-page');
document.querySelector('#header nav')?.classList.toggle('hidden');
document.querySelector('#header > div > div:last-child')?.classList.toggle('hidden');
});
attachEvent('[data-aw-toggle-color-scheme]', 'click', function () {
if (defaultTheme.endsWith(':only')) {
return;
}
Observer.removeAnimationDelay();
document.documentElement.classList.toggle('dark');
localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
});
attachEvent('[data-aw-social-share]', 'click', function (_, elem) {
const network = elem.getAttribute('data-aw-social-share');
const url = encodeURIComponent(elem.getAttribute('data-aw-url'));
const text = encodeURIComponent(elem.getAttribute('data-aw-text'));
let href;
switch (network) {
case 'facebook':
href = `https://www.facebook.com/sharer.php?u=${url}`;
break;
case 'twitter':
href = `https://twitter.com/intent/tweet?url=${url}&text=${text}`;
break;
case 'linkedin':
href = `https://www.linkedin.com/shareArticle?mini=true&url=${url}&title=${text}`;
break;
case 'whatsapp':
href = `https://wa.me/?text=${text}%20${url}`;
break;
case 'mail':
href = `mailto:?subject=%22${text}%22&body=${text}%20${url}`;
break;
default:
return;
}
const newlink = document.createElement('a');
newlink.target = '_blank';
newlink.href = href;
newlink.click();
});
const screenSize = window.matchMedia('(max-width: 767px)');
screenSize.addEventListener('change', function () {
document.querySelector('[data-aw-toggle-menu]')?.classList.remove('expanded');
document.body.classList.remove('overflow-hidden');
document.getElementById('header')?.classList.remove('h-screen');
document.getElementById('header')?.classList.remove('expanded');
document.getElementById('header')?.classList.remove('bg-page');
document.querySelector('#header nav')?.classList.add('hidden');
document.querySelector('#header > div > div:last-child')?.classList.add('hidden');
});
function applyHeaderStylesOnScroll() {
const header = document.querySelector('#header[data-aw-sticky-header]');
if (!header) return;
if (lastKnownScrollPosition > 60 && !header.classList.contains('scroll')) {
header.classList.add('scroll');
} else if (lastKnownScrollPosition <= 60 && header.classList.contains('scroll')) {
header.classList.remove('scroll');
}
ticking = false;
}
applyHeaderStylesOnScroll();
attachEvent([document], 'scroll', function () {
lastKnownScrollPosition = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(() => {
applyHeaderStylesOnScroll();
});
ticking = true;
}
});
};
const onPageShow = function () {
document.documentElement.classList.add('motion-safe:scroll-smooth');
const elem = document.querySelector('[data-aw-toggle-menu]');
if (elem) {
elem.classList.remove('expanded');
}
document.body.classList.remove('overflow-hidden');
document.getElementById('header')?.classList.remove('h-screen');
document.getElementById('header')?.classList.remove('expanded');
document.querySelector('#header nav')?.classList.add('hidden');
};
window.onload = onLoad;
window.onpageshow = onPageShow;
document.addEventListener('astro:after-swap', () => {
initTheme();
onLoad();
onPageShow();
});
})();