Module 3 · Components and prototypes Lesson 7 of 15
Components and variants
A component is a design element with rules: a button with states, an input with an error state. Building it once means the tenth screen costs minutes, not hours.
The concept
A component is a piece of interface you reuse: a button, a job card, a form field. A variant is that component in its different states — default, hover, disabled, loading, error. Building the states as variants is what stops a design falling apart the first time something goes wrong in the interface.
In Figma, make a component, then add properties to it (size, state, icon) and use instances everywhere. When you change the component, every instance updates — which is how a forty-screen portfolio stays consistent after the first week.
<button class="btn btn--primary">Apply now</button>
<button class="btn btn--primary" disabled>Apply now</button>
<button class="btn btn--primary is-loading" aria-busy="true">Sending...</button>
<!-- Build every STATE as a variant:
default . hover . focus . disabled . loading . error -->Common mistakes
The mistake is a separate hand-drawn button on every screen, so the corner radius changes by a pixel here and there and the final product looks almost designed. The second mistake is designing only the default state: no hover on a button, no disabled look, no empty state for a list — and interviewers look for exactly those.
Worked example
One button component with primary, secondary, disabled and loading variants replaces every hand-drawn button in the file — and keeps them consistent automatically.
Your practice task
Build five components with their states, then rebuild one screen using only those components.
Do this before moving on. Reading a solution teaches the shape of it; typing it teaches you.
Key takeaway
A component is a piece of interface you reuse: a button, a job card, a form field.
Keep your place in this course
A free account saves which lessons you have finished and unlocks the certificate. The lesson itself stays free to read.
Create free account or sign inCourse complete
You finished every lesson.
Your certificate is ready, and the projects you built are the proof to attach to an application.
Almost there
15 lessons left of 15
Finish every lesson to unlock the certificate. Each one ends in a practice task — do them and the final project brief writes itself.