Build a reusable checkbox with unchecked, checked, and hover states

WHAT THIS TESTS: This question evaluates whether you understand Figma's interactive components feature and how to use variant interactions to build maintainable, stateful UI elements. The interviewer wants to see that you know how to reduce prototype complexity by embedding interactions inside components rather than managing them at the page level.

A GOOD ANSWER COVERS: First, create a component set with named variants for each state, such as unchecked, checked, and hover. Second, enter Prototype mode and use the Change to action to wire transitions between these variants. For example, set an On click trigger on the unchecked variant to Change to the checked variant, and another On click on checked to Change to unchecked. Add a While hovering trigger on both to Change to the hover variant, with a mouse leave returning to the default. Third, explain that once published to a library, any instance placed in a design automatically carries these interactions, so teammates do not need to rebuild connections. Fourth, mention that this approach scales because 5 checkboxes no longer require 32 duplicated frames and 160 manual connections.

COMMON WRONG ANSWERS: A major red flag is suggesting you duplicate the frame for every possible state combination and draw individual prototype noodles between them. This indicates unfamiliarity with interactive components and creates unmaintainable noodle soup. Another red flag is proposing separate components instead of a unified component set, which breaks state management and makes overrides inconsistent across instances. Saying you would use Navigate to instead of Change to is also incorrect because it would force a full frame transition rather than a local variant swap.

LIKELY FOLLOW-UPS: The interviewer might ask how you would handle a nested interactive component, such as a checkbox inside an expandable table row. You should explain that a Change to action on a nested instance can update the parent component variant. They might also ask about accessibility or how to document these states for developers, so be ready to discuss inspect mode and component properties.

ONE CONCRETE EXAMPLE: Imagine designing a settings panel with 5 checkboxes. Without interactive components, prototyping every permutation would require 32 frames and 160 connections. By building a single checkbox component set with Change to interactions, you place 5 instances on one frame. During the prototype, clicking any checkbox toggles only that instance between checked and unchecked, while hovering reveals the hover state, all without leaving the current frame.