Design Tokens Export

Export your design variables, colors, typography, and spacing as design tokens in multiple formats for use in development.

What Are Design Tokens?

Design tokens are the smallest pieces of your design system:

• Colors (brand, semantic, palette)
• Typography (sizes, weights, families)
• Spacing (margins, padding, gaps)
• Shadows and effects
• Border radius and widths

Export Formats

CSS Custom Properties

:root {
  --color-primary: #7c3aed;
  --color-secondary: #ec4899;
  --spacing-md: 16px;
  --font-size-lg: 18px;
}

Sass/SCSS Variables

$color-primary: #7c3aed;
$color-secondary: #ec4899;
$spacing-md: 16px;
$font-size-lg: 18px;

JSON (Style Dictionary)

{
  "color": {
    "primary": { "value": "#7c3aed" },
    "secondary": { "value": "#ec4899" }
  },
  "spacing": {
    "md": { "value": "16px" }
  }
}

JavaScript/TypeScript

export const tokens = {
  color: {
    primary: '#7c3aed',
    secondary: '#ec4899',
  },
  spacing: {
    md: '16px',
  },
};

Tailwind CSS Config

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#7c3aed',
        secondary: '#ec4899',
      },
    },
  },
};

Exporting Tokens

From Variables Panel

1. Open Variables panel
2. Click export button in header
3. Select format
4. Choose collections to include
5. Download or copy

From Design System Panel

1. Open Design System panel
2. Go to Export tab
3. Configure export options
4. Select token categories
5. Export

From File Menu

1. File > Export > Design Tokens
2. Choose format and options
3. Save file

Export Options

Token Categories

• Colors only
• Typography only
• Spacing only
• All tokens
• Custom selection

Naming Convention

• kebab-case - color-primary
• camelCase - colorPrimary
• snake_case - color_primary
• PascalCase - ColorPrimary

Theme Handling

• Single theme export
• All themes in one file
• Separate file per theme

Presets

Quick export configurations:

• Web (CSS) - CSS custom properties
• Web (Sass) - SCSS variables
• React/Vue - JS/TS exports
• Tailwind - Tailwind config
• iOS (Swift) - Swift constants
• Android (Kotlin) - Kotlin resources

Using Exported Tokens

CSS

.button {
  background: var(--color-primary);
  padding: var(--spacing-md);
}

JavaScript

import { tokens } from './tokens';

const styles = {
  backgroundColor: tokens.color.primary,
};

Best Practices

• Export tokens as part of build process
• Keep token names consistent with code
• Include descriptions in JSON exports
• Version your token exports
• Use Style Dictionary for complex setups
• Automate token sync with CI/CD