What checkboxes do in Figma and why they matter for your design

A checkbox in Figma is a component that toggles between two states — checked and unchecked — when someone clicks it. Unlike a static checkbox you draw and leave alone, an interactive checkbox in Figma lets you show how your design actually behaves. When a user clicks the box in your prototype, it switches appearance. This matters because it lets you test whether your interface makes sense before you hand it to a developer, and it shows stakeholders exactly what you mean instead of describing it.

Figma checkboxes live inside components, which are reusable design pieces that can have multiple versions. You build one checkbox component with both the checked and unchecked states, then use variants to switch between them. When you prototype the design, you add an interaction that says "when clicked, swap to the other state." That swap is what makes it work.

Key Takeaways

  • A working checkbox in Figma requires a component with at least two variants: one for the unchecked state and one for the checked state.
  • You create variants by adding a property (usually called "state") and giving it two values, then designing each state as a separate frame inside the component.
  • Interactions are what make the checkbox actually toggle: you select the unchecked variant, add an interaction set to "On click," choose "Change component," and point it to the checked variant.
  • You must do this twice — once from unchecked to checked, and once from checked back to unchecked — so the checkbox can toggle both ways.
  • Test your checkbox in prototype mode by clicking the play button in the top right, then clicking the checkbox to confirm it switches states.

Building a checkbox component with two states

Start by creating a new component. In the layers panel on the left, right-click and select "Create component," or press Ctrl+K (Windows) or Cmd+K (Mac). Name it something clear like "Checkbox." This becomes your base component.

Inside that component, draw the unchecked checkbox: a small square (usually 16 by 16 pixels or 20 by 20 pixels), with a border and a transparent or light fill. Add a label next to it if you want — "Remember me" or "I agree" — but the checkbox itself is just the box. Group the box and label together if you have both, then select the whole group.

Now add a variant. In the design panel on the right, scroll down to the component section and click the plus icon next to "Variants." Figma creates a second version of your component automatically. You now have two frames side by side in the layers panel, both inside the same component. The first one is the default; the second one is the variant.

In the variants section of the design panel, you should see a property that says something like "Component" with a dropdown. Click that dropdown and rename it to "state" (or "status" — the name does not matter, but "state" is clearest). Then click the first variant frame and change its property value to "unchecked." Click the second frame and change its value to "checked."

Designing the checked state

Select the second variant frame (the one labeled "checked" in the layers panel). Inside it, modify the checkbox to show it is checked. The most common approach is to add a checkmark: a small white or dark icon inside the box, or a filled background with a checkmark on top. You can use Figma's built-in icons, draw a straightforward checkmark with the pen tool, or import an icon from a library.

Keep the label the same as the unchecked state — only the checkbox itself should change. The label does not toggle. Once you have drawn the checked state, you have a complete component with two variants. You can now use this component anywhere in your design by dragging it from the assets panel.

Adding interactions so the checkbox actually toggles

Select the unchecked variant frame in the layers panel. In the design panel, scroll down and look for the "Interactions" section (or click the lightning bolt icon in the top toolbar). Click the plus icon to add an interaction.

A dialog appears. Set it up like this: trigger is "On click," action is "Change component," and the target is the checked variant of the same component. You are telling Figma, "When someone clicks the unchecked version, show the checked version instead." Click outside the dialog to save it.

Now select the checked variant frame and add another interaction. This time, the action points back to the unchecked variant. This is the return trip — when someone clicks the checked box, it goes back to unchecked. Without this second interaction, the checkbox only toggles one way.

Testing your checkbox in prototype mode

Click the play button in the top right corner of Figma (or press Shift+Cmd+Enter on Mac, Shift+Ctrl+Enter on Windows). This opens prototype mode, where interactions actually work. Click your checkbox. It should switch from unchecked to checked. Click it again. It should switch back to unchecked.

If it does not toggle, go back to edit mode and check two things: first, confirm that both variants have interactions pointing to each other. Second, make sure the interaction trigger is set to "On click," not "On hover" or something else. The most common mistake is forgetting the second interaction — the one that sends the checked state back to unchecked.

If you want the checkbox to stay checked until someone explicitly unchecks it (rather than toggling on every click), that is a different setup involving animation and timing, which is more complex. For a straightforward toggle, the two-interaction approach is the standard.

Using your checkbox component in a form

Once your checkbox component works, you can drag it into your design from the assets panel. Each instance you place is a copy of the component. When you update the main component — say, you make the checkmark bigger — every instance updates automatically.

If you need multiple checkboxes in a form, you can place the component multiple times and change the label for each one. Select an instance, double-click the label text, and type a new one. The checkbox behavior stays the same across all instances because they all point back to the same component.

You can also create a variant for a disabled checkbox — one that looks grayed out and does not respond to clicks. Add a third property value called "disabled," design that state, and add an interaction that does nothing (or shows a tooltip). This gives you a complete checkbox system that handles all the states a real form might need.

Common problems and how to fix them

If your checkbox does not appear to change when you click it in prototype mode, the most likely cause is a missing interaction on one of the variants. Go back to edit mode, select each variant, and check the interactions panel. Both variants should have exactly one interaction each, pointing to the other variant.

If the checkbox changes but then when ready changes back, you may have set the interaction to "On click" with an animation that reverses. Check the animation settings in the interaction dialog — it should say "when ready" or have no animation, not "Animate" with a duration.

If you cannot see the variants panel at all, make sure you have selected a component, not just a regular frame. Components have a purple diamond icon in the layers panel. If you see a regular frame icon instead, right-click the frame and select "Create component" to convert it.

Frequently Asked Questions

Can I make a checkbox that stays checked when I click it once, then unchecked when I click it again?

Yes, that is exactly what the two-interaction setup does. The first interaction (unchecked to checked) fires on the first click. The second interaction (checked to unchecked) fires on the second click. Each variant has one interaction pointing to the other, so it toggles back and forth.

What if I want a checkbox that shows an error state if the user leaves it unchecked?

Add a third variant called "error." Design it to look different — maybe a red border or a red background. Then add an interaction from the unchecked state that shows the error state after a delay, or add a separate button that triggers it. This requires a bit more setup, but the principle is the same: each state is a variant, and interactions move between them.

Do I have to use variants, or can I just swap the checkbox image when someone clicks it?

Variants are the cleaner approach because Figma manages them as one component. You could technically create two separate components and use interactions to swap between them, but variants keep everything organized and make updates easier. Variants are the recommended way.

Can I add animation when the checkbox toggles?

Yes. In the interaction dialog, instead of selecting "when ready," choose "Animate" and set a duration — usually 200 to 300 milliseconds for a checkbox. The checkbox will smoothly transition from unchecked to checked instead of snapping when ready. This feels more polished in a prototype.

What if I want the checkbox to trigger something else, like showing a hidden field?

You can add a second interaction to the same click event. Select the unchecked variant, add an interaction, set the trigger to "On click," and instead of "Change component," choose "Navigate" or "Open overlay" or "Scroll to." This lets the checkbox do multiple things at once — toggle its own state and reveal another part of your design.