Figma把复选框藏了3年，90%设计师还在用笨办法

2023年Figma官方组件库更新时，有个细节被大多数教程漏掉了——复选框（Checkbox）的变体系统其实支持8种状态联动，但文档里只写了4种。

这不是Figma的疏忽。组件化设计工具的复杂度，往往藏在那些"看起来简单"的元素里。一个复选框从线框到可交互原型，中间隔着的是设计系统思维，不是画框填色。

为什么你的复选框总在评审时被开发追问

我见过太多设计师的Figma文件：复选框就是两个图层，一个框一个勾，复制粘贴改颜色。需求评审时开发问"禁用状态 hover 什么样"，现场现改。

问题出在把"画图标"当成了"做组件"。

复选框在界面里的真实复杂度，来自状态矩阵。Figma的变体（Variants）功能就是为此设计的——一个主组件，通过属性切换覆盖所有场景。

基础状态至少4种：未选中、选中、未选中悬停、选中悬停。加上禁用态（Disabled）和对应的悬停，这就6种了。如果做嵌套结构（比如全选/半选），还得加上不确定态（Indeterminate）。

每种状态背后都是用户行为的预期。悬停时有没有反馈？禁用态是灰掉还是直接隐藏？选中动画是瞬间切换还是100ms过渡？这些细节决定了一个设计系统是否"能用"还是"好用"。

从零搭建：一个可交互复选框的完整流程

第一步不是画框，是定属性。打开Figma的变体面板，先想清楚这个组件需要哪些变量：选中状态（布尔值）、悬停状态（布尔值）、禁用状态（布尔值）、尺寸（枚举值，比如大/中/小）。

属性命名直接决定团队协作效率。建议用开发能看懂的键值对：state/default、state/hover、state/disabled，而不是"正常""鼠标放上去"。

几何结构推荐用24×24px作为基准尺寸。这个数值来自Material Design的触控目标规范，保证移动端可点击区域不小于44×44pt。框体用2px描边，圆角2px——直角太硬，圆角太大又像开关。

勾选图标不要用路径手绘。Figma的布尔运算（Boolean Operations）里，一个矩形加两个旋转45度的矩形，合并后就是标准对勾。这样做的好处是缩放时不会变形，换色时只需改填充。

交互原型环节，用Smart Animate连接各变体。选中态的勾选图标可以从0%缩放到100%，配合100ms的ease-out曲线，模拟真实的物理反馈。禁用态记得取消所有交互事件，避免原型演示时的误触。

5种被低估的复选框变体场景

卡片式复选框（Card-Based）把选择行为从"点一个小框"变成"点整张卡片"。电商平台的商品对比、SaaS的套餐选择都适合这种形式。关键是把复选框的视觉权重降低，用卡片选中态（描边变色、阴影加深）承载主要反馈。

任务清单复选框（To-Do List）有个细节很少被提及：已完成项的文字应该同步变为删除线或降低透明度。这不是美观问题，是认知负荷管理——用户扫一眼就能区分待办和已办。

状态指示复选框（Status）常用于审批流。把勾选变成流程节点，未选中=待处理，选中=已通过，不确定态=驳回待修改。颜色编码要遵循系统语义：蓝=进行中，绿=成功，红=错误。

错误态复选框（Error State）不是变红那么简单。表单验证失败时，需要在复选框旁边显示具体错误文案，且焦点自动跳转到该元素。Figma原型里可以用Overlay实现错误提示的浮层效果。

标签式复选框（Chip-Style）把多选压缩成一行。筛选器、兴趣标签常用这种形式。设计时注意选中态和未选态的对比度差异要大于3:1，否则用户分不清哪些已选。

嵌套结构的坑：半选态怎么画

父级复选框控制多个子项时，会出现"部分选中"的情况。Figma没有现成的Indeterminate图标，需要自己画：一个矩形框，中间一条横线。

这个状态的交互逻辑最容易出错。正确的行为链是：点击父级→全选或全不选；子项部分选中→父级自动变为半选态；再次点击父级→以当前多数状态为基准切换。

原型演示时，建议用Figma的变量（Variables）功能存储选中数量，通过条件判断驱动父级状态。这比硬连交互线清晰得多，也方便后期修改逻辑。

现成的轮子：社区资源怎么挑

Figma社区搜索"checkbox"返回3000多个结果，质量参差不齐。筛选标准看三点：变体数量是否覆盖你的场景、属性命名是否规范、是否使用了Figma最新功能（比如2024年更新的组件属性）。

推荐两个经过验证的资源：Figma官方设计系统（Figma Design System）的复选框组件，变体结构最标准；Material 3 Design Kit的适配版本，适合需要遵循Google设计规范的团队。

第三方资源导入后，建议拆解学习而非直接使用。重点看别人的属性命名策略、图层组织结构、约束（Constraints）设置——这些才是 transferable 的知识。

有个冷知识：Figma的Dev Mode可以直接复制复选框的CSS代码，包括变体之间的差异。设计师交付时打开这个模式，能减少至少50%的标注工作量。

最后说个用户反馈。某次可用性测试里，参与者面对一个自定义样式的复选框犹豫了三秒——"这是能点的吗？"问题出在圆角过大、描边过细，让它看起来像个装饰图标而非交互元素。

复选框的设计，本质是在"符合预期"和"品牌差异化"之间找平衡。你的设计系统里，这个平衡点定在哪？