Design practice

Design Token Pipeline Project

Build a complete token pipeline from Figma to CSS custom properties

Start the exercise

01 / Prepare

What you’ll
work on.

Build an end-to-end token pipeline: define tokens in Figma using Tokens Studio, export to JSON, transform with Style Dictionary, and consume in a React component. This is a larger version of the "Build a Token Pipeline" exercise, adding the Figma-to-code connection.

Before you begin

  • Figma proficiency (variables, components)
  • Node.js and basic CLI
  • React fundamentals
  • Understanding of reference, semantic, and component tokens

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 Tokens in Figma

    90 min

    1. Install Tokens Studio plugin

    2. Define reference tokens: color palette, type scale, spacing scale

    3. Define semantic tokens that alias reference tokens

    4. Apply tokens to a Button component in Figma (background, text, padding, border-radius)

    5. Create a dark theme set that remaps semantic tokens

  2. Export and Transform

    60 min

    1. Export tokens from Tokens Studio as JSON

    2. Set up Style Dictionary v4 project

    3. Configure transforms: JSON to CSS custom properties

    4. Build and verify output

  3. Consume in React

    90 min

    1. Create a small React project (Vite or Next.js)

    2. Import the generated CSS

    3. Build a Button component that uses only token-based CSS custom properties

    4. Implement theme switching (light/dark) via data-theme attribute

  4. Round-Trip Verification

    60 min

    1. Change a reference token value in Figma (e.g., shift the primary color hue)

    2. Re-export, rebuild, verify the change propagates to the React component

    3. Document the round-trip workflow

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 tokens applied to a Button component
  • Token JSON export (reference + semantic + component tiers)
  • Style Dictionary config and generated CSS
  • React Button component consuming tokens
  • Theme switching demo (light/dark)
  • Brief workflow documentation

How to assess your work

Token architecture
Clean three-tier structure with proper aliasing
Figma-to-code
Tokens in Figma match generated CSS values exactly
Theming
Theme switch works via token remapping, not hardcoded CSS
Round-trip
A change in Figma propagates to the React component
Documentation
Another designer/developer could follow the workflow

Choose your
next exercise.

Browse all exercises