How do you set up and use components in Figma so a design stays consistent and easy to change?

What the interviewer wants to hear

• Main components with instances
• Variants and component properties
• Auto layout for responsive components
• Variables or styles for colour, type, spacing
• Shared library, naming and documentation

Model answer

I build repeated elements like buttons, inputs and cards as main components, and use instances everywhere else, so one change updates the whole file. Related versions go into a component set with variants, for example type, size and state, and I add component properties for things like an optional icon or the label text, which keeps the number of variants small. Every component uses auto layout so it resizes with content like real code would. Colours, typography and spacing come from variables and styles instead of raw values, which also makes light and dark modes easy. I name layers and properties clearly, publish the components to a team library and add short usage notes. I avoid detaching instances; if a component cannot do what I need, I improve the component instead.

More easy UI/UX Designer questions

• What is the difference between UI and UX design?
• Walk me through your design process.
• What is usability testing and how would you run a simple one?
• Why does accessibility matter, and what basic things do you check in your designs?
• What is a design system and why do teams use one?
• How do you create visual hierarchy on a screen so users know what to look at first?
• What does designing mobile first mean, and why is it useful?
• What are Nielsen's usability heuristics, and how do you use them in your work?
• What makes a good form? Walk me through the principles you follow.