Main components vs instances: how to use Component Properties for multi-state Buttons?

WHAT THIS TESTS: This question evaluates whether you understand the core relationship between main components and instances in Figma, and whether you can architect a scalable, maintainable button using Component Properties instead of redundant components or manual overrides.

A GOOD ANSWER COVERS: First, define the main component as the reusable source of truth that lives in a library or dedicated page; any change to it propagates to every instance, which is a lightweight linked copy placed in designs. Second, explain that variant properties should define the structural differences between primary, secondary, and disabled states, such as background color, border treatment, and text opacity, by organizing them into a component set. Third, state that boolean properties should control the visibility of optional nested layers like icons or badges, so designers can toggle them on or off without creating extra variants or manually hiding layers. Fourth, emphasize that this approach consolidates all controls into a single right-panel interface, which reduces documentation overhead and prevents designers from detaching instances.

COMMON WRONG ANSWERS: A red flag is treating every button state as an entirely separate main component, which destroys inheritance and creates maintenance debt across the design system. Another error is claiming that instances can be edited directly like mains without using overrides or detaching, which misunderstands how the link works. Some candidates suggest using variants alone to handle every optional icon permutation, which would cause variant explosion and make the component set unwieldy. Finally, ignoring boolean properties and recommending manual layer hiding shows a lack of familiarity with modern Figma property controls.

LIKELY FOLLOW-UPS: An interviewer might ask how you would add an instance swap property to let designers change the icon to a different component. They could ask when a slot property is preferable to a boolean for flexible button content. You might also be asked how you document intended usage and property descriptions for design system consumers, or what happens to existing instances when you publish a new property to the main component.

ONE CONCRETE EXAMPLE: Imagine a Button main component organized as a component set with two variant properties. The first variant property is Type with values Primary and Secondary, and the second is State with values Default and Disabled. The Disabled state uses the variant to apply reduced opacity and a muted color treatment. Inside the button, there is an icon layer with a boolean property named Show Icon that defaults to true. When a designer places an instance, they can set it to Primary and Disabled in the right panel, then toggle Show Icon to false, all without detaching the instance or opening the layers panel.