Components
In Figma, a component is a piece of UI you define once and reuse everywhere. Swap the content, keep the style. In HTML and CSS, you do the same thing with classes. Define a .btn class once; apply it to every button on the page. Every button looks consistent — and when you change .btn, all of them update.
Figma components → CSS classes
Section titled “Figma components → CSS classes”| Figma | CSS |
|---|---|
Component named Button/Primary | Class .btn.btn--primary |
Component named Button/Secondary | Class .btn.btn--secondary |
Component named Card | Class .card |
| Instance of Card | <div class="card">...</div> |
| Component property (variant) | Modifier class .btn--large |
The naming convention most developers use is BEM — Block, Element, Modifier. The pattern:
- Block: the component itself →
.card - Element: a part of it →
.card__title,.card__body - Modifier: a variant →
.btn--primary,.btn--secondary
You do not need to memorize BEM. What matters is the idea: name your classes after what the thing is, not what it looks like. .card beats .white-rounded-box. .btn--primary beats .purple-button.
Building reusable components
Section titled “Building reusable components”Below are two button variants and two card instances — all built from the same CSS classes. Click into the code and add a third card or a third button.
Notice both cards use the exact same .card, .card__title, and .card__body classes — only the content differs. This is the component model in HTML and CSS.