Create a button component with default, hover, and disabled variants

WHAT THIS TESTS: This question evaluates whether you understand Figma's component model beyond static symbols and basic frames. The interviewer wants to see if you know how to structure a scalable design system using variant properties, how to reduce duplication with component sets, and whether you can prototype realistic interactions without creating dozens of frames and manual connections. It also surfaces your mental model for naming conventions and property organization.

A GOOD ANSWER COVERS: First, select the base button frame and use the Create component set option or combine multiple frames into variants. Second, define a property such as State with values including default, hover, and disabled. Third, ensure each variant has a unique combination of properties so Figma recognizes them as distinct states within the set. Fourth, switch to Prototype mode, select a variant, and drag the interaction noodle to another variant in the same set. Fifth, set the action to Change to and pick a trigger like While hovering or Mouse enter depending on the desired behavior. Sixth, mention that these interactions travel with the instance, so any designer using the button gets the hover and disabled logic automatically without extra setup.

COMMON WRONG ANSWERS: A major red flag is saying you would copy and paste separate button components for each state and manually swap them on the canvas. Another is confusing component variants with simple frame duplication outside of a component set. Some candidates also forget to mention the Change to action and instead describe overlay tricks or separate prototype screens, which misses the point of interactive components entirely. Failing to mention property naming or suggesting auto-layout is the same as variant creation also signals shallow experience.

LIKELY FOLLOW-UPS: The interviewer might ask how you would handle nested interactive components, such as a button with an icon that also has hover states. They could also ask how to publish these components to a team library, how to handle focus states for accessibility, or what happens when you override text or color on an instance that has variant interactions. Be ready to discuss whether you would use boolean properties alongside variant properties to reduce the total number of variants.

ONE CONCRETE EXAMPLE: Imagine a primary button with a blue background. You create three frames: one labeled State equals default, one labeled State equals hover with a darker blue fill, and one labeled State equals disabled with reduced opacity and a gray fill. You combine them into a component set named Button. In Prototype mode, you connect the default variant to the hover variant, set the trigger to While hovering, and set the action to Change to. You then connect the default variant to the disabled variant using a trigger like Mouse down or a conditional variable if you are simulating a form error. When a designer places an instance of this button into a login screen, the hover and disabled behaviors work immediately without any additional wires on the screen itself.