Design practice

Build a Component Library in Figma

Create a systematic component library with variants, auto layout, and documented states

Start the exercise

01 / Prepare

What you’ll
work on.

Build a small but systematic Figma component library containing 5 core components. Each component must use auto layout, have documented variants and states, and consume design tokens (via Figma variables or Tokens Studio).

Before you begin

  • Figma proficiency (frames, auto layout, components, variants)
  • Understanding of Atomic Design methodology
  • Basic experience with components, variants, and auto layout in Figma

02 / Practice

The work,
step by step.

Work through these 4 parts at your own pace. Keep your notes and work together so you can review them when you finish.

  1. Define Your Token Foundation

    45 min

    1. Create a Figma variables collection (or use Tokens Studio) with: Color (primary, secondary, surface, text, feedback error/success), Typography (5–6 sizes following a type scale), Spacing (4px base unit, 8 steps: 4, 8, 12, 16, 24, 32, 48, 64), Border radius (small 4px, medium 8px, large 12px).

    2. Apply these as Figma variables, not raw values.

  2. Build 5 Components

    120 min

    1. Button — Variants: primary, secondary, ghost. States: default, hover, focus, active, disabled. Sizes: small, medium, large.

    2. Input — States: empty, filled, focused, error, disabled. Include label and helper text.

    3. Card — With image slot, title, description, and action area. Responsive to content.

    4. Badge — Variants: info, success, warning, error. Sizes: small, medium.

    5. Avatar — Sizes: small, medium, large. States: with image, with initials, fallback icon.

  3. Document

    60 min

    1. For each component, create a documentation frame that shows all variants side by side.

    2. Label all states.

    3. Add spacing and sizing annotations.

    4. Write usage notes: when to use this component, when not to.

  4. Test Composition

    45 min

    1. Build one "organism" that composes your atoms: a user profile card using Avatar + text (from your type scale) + Badge + Button.

    2. Verify it responds to content changes (long names, missing avatars, different badge types).

03 / Review

Look at what
you’ve made.

Gather your deliverables, then use the criteria to find what worked and what you would change. They also give a peer something specific to respond to.

What to bring together

  • Figma file with token variables
  • 5 components with variants and states
  • Documentation frames for each component
  • One composed organism demonstrating reuse

How to assess your work

Token usage
Components consume variables, no hardcoded values
Auto layout
All components resize correctly with content changes
State coverage
All interactive states designed and labeled
Naming
Consistent naming convention across components and variants
Composition
Organism demonstrates that atoms compose correctly

Choose your
next exercise.

Browse all exercises