How would you use variants, booleans, and instance swap for a Button?

WHAT THIS TESTS: This question evaluates whether you can architect a scalable Figma component using property types that reduce manual overrides and documentation dependency. The interviewer wants to see that you understand when to use variants versus atomic properties, and how to keep a single component set maintainable as states and content permutations grow.

A GOOD ANSWER COVERS: First, use variant properties to define the core visual states of the button such as primary, secondary, and disabled, since variants are meant for different variations of a component like its states, sizes, or colors. Second, add a boolean property to the icon layer so designers can toggle visibility on or off without deleting layers or creating extra variants, which directly maps to showing or hiding an icon on a button. Third, apply an instance swap property to the icon itself so it can be swapped for other icons, and mention setting preferred instances to guide designers toward approved icon choices. Fourth, note that these properties appear as consolidated controls in the right panel, letting users edit everything in one place rather than hunting through layers.

COMMON WRONG ANSWERS: A major red flag is proposing separate button components for every state and icon combination, which explodes maintenance overhead and defeats the purpose of properties. Another is suggesting designers manually show or hide layers via the layers panel or detach the instance to edit it, because this breaks the design system and forces users to override individual layers instead of using the consolidated property controls. Failing to mention preferred instances for the swap property also signals shallow familiarity.

LIKELY FOLLOW-UPS: The interviewer may ask how you would handle text content, which is where a text property comes in for editable labels. They might probe what happens if the button needs an optional trailing icon in addition to a leading icon, which could mean adding another boolean or using a slot property for a flexible content area. They could also ask how you would document intended usage, which is done by adding descriptions and links to documentation on the component itself.

ONE CONCRETE EXAMPLE: Start with a main component set named Button. Create variants for state default, hover, disabled, and type primary and secondary. Inside each variant, place an icon component instance on the left of the text label. Add a boolean property named Show Icon and bind it to the icon layer so it can be turned on or off. Add an instance swap property named Icon Type to that same icon layer and set preferred instances to a curated list of sixteen by sixteen icons from your library. Now a designer can select the Button instance, pick primary disabled from the variant menu, toggle Show Icon on, and swap the icon to an approved arrow without touching any layers.