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

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

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.

<section class="demo">
  <div class="button-row">
    <a href="#" class="btn btn--primary">Get started</a>
    <a href="#" class="btn btn--secondary">Learn more</a>
  </div>
  <div class="card-row">
    <div class="card">
      <h3 class="card__title">Brand Identity</h3>
      <p class="card__body">Logo systems, color palettes, and typography guidelines for modern brands.</p>
      <a href="#" class="btn btn--primary">View project</a>
    </div>
    <div class="card">
      <h3 class="card__title">Mobile App Design</h3>
      <p class="card__body">End-to-end product design for iOS and Android with a focus on accessibility.</p>
      <a href="#" class="btn btn--secondary">View project</a>
    </div>
  </div>
</section>

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.

Common mistakes designers run into

Creating a component in Figma without thinking through the states it actually needs (hover, disabled, loading, error)
Changing the main component but not updating every instance to match — developers hit the exact same problem with a shared component in code

The developer’s perspective

👨‍💻 What developers actually see

Designers see “one component, several variants,” but developers see the same component and have to write code that covers every state that can actually happen, not just the ones that got designed.

💡 Real-world example

Atlassian’s design system documents each button’s real states — default, disabled, selected, loading — matching the exact states its code component implements. (Atlassian Design System: Button)