How to Create a Design System with Figma and Code (2026)

A design system is a single source of truth for your product's design. Here's how to build one that stays synced between Figma (design) and code (development) in 2026.

What You'll Build

Design tokens — colors, spacing, typography defined once
Figma components — reusable UI elements
Code components — React/Vue/Svelte components matching Figma
Documentation — how to use everything
Sync system — keep design and code in sync

Step 1: Define Design Tokens in Figma

Design tokens are the foundation — colors, spacing, typography, shadows, radii.

Figma Variables (2024+)

Figma now has native variables. Use them for tokens:

Colors
- color/brand/primary → #3B82F6
- color/brand/secondary → #10B981
- color/neutral/50 → #F9FAFB
- color/neutral/900 → #111827
Spacing
- spacing/xs → 4px
- spacing/sm → 8px
- spacing/md → 16px
- spacing/lg → 24px
- spacing/xl → 32px
Typography
- font/family/sans → Inter
- font/size/xs → 12px
- font/size/sm → 14px
- font/size/base → 16px
- font/weight/normal → 400
- font/weight/medium → 500
- font/weight/bold → 700
Effects
- shadow/sm → 0 1px 2px rgba(0,0,0,0.05)
- shadow/md → 0 4px 6px rgba(0,0,0,0.1)
- radius/sm → 4px
- radius/md → 8px
- radius/lg → 12px

Export Tokens

Use the Figma Tokens plugin or Style Dictionary to export:

// tokens.json
{
  "color": {
    "brand": {
      "primary": { "value": "#3B82F6" },
      "secondary": { "value": "#10B981" }
    }
  },
  "spacing": {
    "sm": { "value": "8px" },
    "md": { "value": "16px" }
  }
}

Step 2: Build Figma Components

Create core components in Figma with variants:

Button Component

Variants:

Variant: primary, secondary, ghost
Size: sm, md, lg
State: default, hover, disabled

Use your design tokens for all properties. Never hardcode colors.

Input Component

Variants:

Type: text, email, password
State: default, focus, error
Size: sm, md, lg

Step 3: Convert Tokens to Code

Use Style Dictionary to transform Figma tokens into code tokens.

Install

npm install style-dictionary

Config

// style-dictionary.config.js
module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'dist/css/',
      files: [{
        destination: 'variables.css',
        format: 'css/variables',
      }],
    },
    js: {
      transformGroup: 'js',
      buildPath: 'dist/js/',
      files: [{
        destination: 'tokens.js',
        format: 'javascript/es6',
      }],
    },
  },
}

Run

npx style-dictionary build

Output

/* dist/css/variables.css */
:root {
  --color-brand-primary: #3B82F6;
  --color-brand-secondary: #10B981;
  --spacing-sm: 8px;
  --spacing-md: 16px;
}

// dist/js/tokens.ts
export const tokens = {
  color: {
    brand: {
      primary: '#3B82F6',
      secondary: '#10B981',
    },
  },
  spacing: {
    sm: '8px',
    md: '16px',
  },
}

Step 4: Build Code Components

Match your Figma components exactly.

Button Component (React)

// components/Button.tsx
import { cva, type VariantProps } from 'class-variance-authority'

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-md font-medium transition-colors',
  {
    variants: {
      variant: {
        primary: 'bg-[--color-brand-primary] text-white hover:opacity-90',
        secondary: 'bg-[--color-brand-secondary] text-white hover:opacity-90',
        ghost: 'bg-transparent hover:bg-gray-100',
      },
      size: {
        sm: 'h-8 px-3 text-sm',
        md: 'h-10 px-4',
        lg: 'h-12 px-6 text-lg',
      },
    },
    defaultVariants: {
      variant: 'primary',
      size: 'md',
    },
  }
)

interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}

export function Button({ variant, size, className, ...props }: ButtonProps) {
  return (
    <button className={buttonVariants({ variant, size, className })} {...props} />
  )
}

Step 5: Documentation Site

Use Storybook for component documentation:

npx storybook@latest init

Button Story

// stories/Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react'
import { Button } from '@/components/Button'

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  tags: ['autodocs'],
}

export default meta
type Story = StoryObj<typeof Button>

export const Primary: Story = {
  args: {
    variant: 'primary',
    children: 'Button',
  },
}

export const Secondary: Story = {
  args: {
    variant: 'secondary',
    children: 'Button',
  },
}

Run: npm run storybook

Step 6: Figma-to-Code Sync

Keep design and code synced automatically.

Option A: Figma Dev Mode (Built-in)

Figma's Dev Mode shows CSS values, spacing, and exports code snippets. Developers inspect designs and copy values directly.

Option B: Figma API + CI

Automate token sync:

// scripts/sync-tokens.ts
import fetch from 'node-fetch'

const FIGMA_FILE_ID = 'xxx'
const FIGMA_TOKEN = process.env.FIGMA_TOKEN

async function syncTokens() {
  const res = await fetch(`https://api.figma.com/v1/files/${FIGMA_FILE_ID}/variables/local`, {
    headers: { 'X-Figma-Token': FIGMA_TOKEN },
  })
  
  const data = await res.json()
  
  // Transform Figma variables → tokens.json
  const tokens = transformVariables(data.meta.variables)
  
  fs.writeFileSync('tokens/colors.json', JSON.stringify(tokens, null, 2))
}

syncTokens()

Run in CI on every design change.

Option C: Figma Plugins

Tokens Studio — full token management in Figma
Design Tokens — export tokens as JSON
Anima — Figma to React code (component-level)

Step 7: Workflow

Design in Figma — create/update components using tokens
Export tokens — manual or automated sync
Build in code — implement components matching Figma
Document — add to Storybook
Review — designer + developer review together
Ship — merge and deploy

The Tech Stack

Layer	Tool	Purpose
Design	Figma	Components and tokens
Tokens	Style Dictionary	Transform tokens
Components	React + CVA	Build UI
Documentation	Storybook	Component library
Sync	Figma API or Tokens Studio	Keep design/code aligned

FAQ

How often should I update the design system?

Add components as needed. Review tokens quarterly. Major overhauls yearly.

What if design and code drift?

Automated token sync helps. Weekly design/dev sync meetings catch drift early.

Do I need a design system for a small project?

No. Design systems pay off at 3+ designers/developers or when building multiple products. Start small (colors + spacing) and grow.

Can I use Tailwind with a design system?

Yes. Export design tokens as Tailwind theme config. Best of both worlds.

Bottom Line

A design system keeps design and code in sync. Start with design tokens in Figma → export with Style Dictionary → build components with CVA → document in Storybook. The upfront investment (2-4 weeks) pays off in faster development and consistent UI.