DesignSystems.One

Figma Integration

Connect your Figma designs to your codebase.

Extracting Design Tokens from Figma

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values to ensure flexibility and consistency across all product experiences.

Step 1: Install Figma Tokens Plugin

First, you'll need to install the "Figma Tokens" plugin in your Figma account. This plugin helps you manage and export design tokens from your Figma file.

  1. Open your Figma file
  2. Click on the "Resources" tab in the toolbar
  3. Search for "Figma Tokens" and install the plugin
  4. Launch the plugin from the Plugins menu

Step 2: Export Tokens from Figma

Once you have the plugin installed, you can export your design tokens:

  1. Open the Figma Tokens plugin
  2. Configure your tokens (colors, typography, spacing, etc.)
  3. Click on "Export" and select "JSON" format
  4. Save the JSON file to your project

Step 3: Transform Tokens for Your Codebase

Now you need to transform the exported tokens to a format that works with your codebase:

  1. Install Style Dictionary: npm install style-dictionary --save-dev
  2. Create a Style Dictionary config file that reads your Figma tokens
  3. Run Style Dictionary to transform tokens into CSS variables, Tailwind theme, etc.
  4. Import the generated files into your project

Updating Your Tailwind Configuration

Once you have your design tokens, you'll need to update your Tailwind configuration to use them:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        // Your Figma colors
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        // ... other colors
      },
      // Typography, spacing, etc.
    },
  },
  // ...
}

Automating the Process

For a more streamlined workflow, you can automate the process of extracting tokens from Figma and updating your codebase:

  1. Use Figma's API to extract tokens programmatically
  2. Set up a GitHub Action or other CI/CD pipeline to run the token transformation
  3. Automatically update your codebase when design tokens change

Next Steps

Now that you have your design tokens integrated with your codebase, you can:

  • Create component variants based on your design tokens
  • Build a theme switcher to toggle between different token sets
  • Document your design tokens for your team
← Back to DocsNext: Components →