Build a Figma toggle switch that controls element visibility using variables

What's really being asked

This question checks whether you understand state management in Figma's advanced prototyping model. Interviewers want to see if you can separate interactive behavior from static layouts. Before variables, designers duplicated frames to simulate state changes. A senior candidate should demonstrate a variables-first approach that reduces redundancy and mirrors how engineers think about component state.

The full answer

First, name the variable type: a boolean variable is correct because visibility is a binary on or off state. Second, describe binding that variable to the target element's layer visibility property in the right-hand panel. Third, explain the interaction on the toggle component itself: use an On click trigger with a Set variable action, and set the value to an expression that toggles the boolean. Fourth, mention reusing the same boolean to drive the toggle's own appearance, such as knob position or track color, so the switch gives visual feedback without extra variants. Fifth, note that this keeps everything in a single frame and scales to multiple toggles by scoping variables to pages or collections.

The mistakes people make

A major red flag is suggesting two separate frames and using Smart Animate to fake the visibility change. Another is proposing a string or number variable when a boolean is the native and simplest choice. Some candidates describe using component variants for the hidden element, which works inside a component but fails as a clean cross-element state mechanism. Saying you would use conditional logic without explaining how Figma's conditionals are wired also signals surface-level knowledge.

What usually comes next

The interviewer might ask how you would persist this toggle state across multiple pages or flows. They may probe whether you would use a local variable or a collection scoped to the page. Another follow-up is how to control multiple elements with one toggle, which leads to binding the same boolean to several visibility properties. They could also ask how component properties differ from variables, expecting you to say that properties handle component-level configuration while variables handle runtime prototype state.

A concrete example

Imagine a settings panel with a Show Notifications toggle. Create a boolean variable named showNotifications and set its default to false. Select the notifications badge layer and bind its visibility property to showNotifications. On the toggle track, add an On click interaction, choose Set variable, target showNotifications, and use an expression to toggle the value. Then bind the toggle knob's fill color or x-position to the same variable so the knob slides and changes color when activated. When the prototype runs, a single click updates both the switch appearance and the badge visibility instantly.