Token Exporter

Bridge the gap from Figma variables to code

Export design tokens to 6 platforms, validated with Style Dictionary standards

Get the Plugin

Created with ❤️ by Nate Mills

Explore the system

Export Platforms

Click Export

Style Dictionary Valid

Export Time

The Challenge

Manual token export was slow and error-prone, creating a disconnect between design and development.

The Solution

Automated multi-format export with intelligent alias resolution and platform-native naming conventions.

The Impact

10x faster token export, zero manual errors, and a seamless design-to-code workflow.

Figma to Code

Bridging design and development with shared terminology

A successful design system relies on a shared understanding between design and development. This mapping translates Figma design concepts into their corresponding code implementations using Atomic Design principles.

Atoms

Styles & Layout Colors, Text, Effects
Spacing, Alignment

→

Foundation & Utilities

--brand-primary .text-center .p-4

Molecules

Components Button, Input, Card

→

Component Classes

.btn .card .input

Organisms

Component Sets Navigation, Forms, Headers

→

Composite Components

.nav-header .form-group

Templates

Pages Page structures, Layouts

→

Page Templates

.page-layout .guide-container

FAQ

Common questions answered

Why build this when other token exporters exist?

Most exporters are one-size-fits-all. This one speaks each platform's native language—Swift for iOS, XML for Android, and W3C-compliant CSS for web. It understands context.

How does AI development actually work in practice?

It's like pair programming with a team of specialists. I outline the goal, the AI suggests code, and I refine and test. What would take hours to research takes minutes. The 10x speed boost is real.

What were the biggest technical challenges?

Figma's plugin security model was tricky; you can't load external CSS, so everything must be inlined. Also, handling deeply nested color aliases required robust recursive resolution logic.

Is this production-ready or just a portfolio piece?

It's production-ready with Style Dictionary validation, defensive code handling edge cases, and performance optimization. The token system validates 900+ design tokens with proper type inference and platform compatibility.

Why use Open Props instead of custom tokens?

Starting from scratch is tempting but wasteful. Open Props is battle-tested, WCAG compliant out of the box, and saves months of work. I built on top of it rather than reinventing it.

Can I fork this or contribute?

Absolutely. It's open source on GitHub. The codebase is documented, modular, and designed for extension. Want to add a new export format? The pattern is clear. Found a bug? PRs are welcome.

What's the roadmap for future features?

Considering token transformations (e.g., px to rem), preset style mappings, and direct GitHub integration. Community feedback will drive priorities.

Built With

AI-powered development stack

AI Studio

Claude Code

Figma

GitHub

Lucide Icons

Manus AI

Open Props

VS Code

Foundations

Color System

Comprehensive color palette with brand colors, neutrals, categories, and alpha values. Desktop uses expanded layout, mobile uses compact reference.

Typography

Foundational type scale and font definitions - the typographic building blocks that establish hierarchy and readability.

Heading XL

.text-heading-xl • var(--font-size-8)

Heading LG

.text-heading-lg • var(--font-size-6)

Heading MD

.text-heading-md • var(--font-size-4)

Body Large

.text-body-lg • var(--font-size-2)

Body Medium

.text-body-md • var(--font-size-1)

LABEL TEXT

.text-label • var(--font-size-0)

Caption Text

.text-caption • var(--font-size-00)

--font-sans

'Inter', -apple-system, ...

The quick brown fox jumps over the lazy dog.

--font-mono

'Monaco', 'Menlo', monospace

const greeting = "Hello, World!";

Spacing

Raw spacing values that serve as the foundation for all margin, padding, and gap measurements.

--size-1

0.25rem • 4px

--size-2

0.5rem • 8px

--size-3

0.75rem • 12px

--size-4

1rem • 16px

--size-6

1.5rem • 24px

--size-8

2rem • 32px

Effects

Visual effects including elevation shadows, glass morphism, and glow effects for creating depth and hierarchy.

Elevation Shadows

--shadow-2

Subtle elevation

--shadow-3

Medium elevation

--shadow-4

High elevation

Glass Effects

Combine background opacity with backdrop blur for modern glass morphism effects. Each level pairs specific opacity with blur intensity.

--glass-panel-zero

0% opacity, blur only

Zero

--glass-panel-subtle

20% opacity, 8px blur

Subtle

--glass-panel-medium

40% opacity, 12px blur

Medium

--glass-panel-strong

60% opacity, 16px blur

Strong

Glow Effects

--shadow-brand

Brand color glow

--shadow-brand-hover

Stronger brand glow

--focus-ring

Focus state glow

Borders

Border width values for consistent strokes and outlines throughout the interface.

--border-size-1

1px

--border-size-2

2px

--border-size-3

3px

--border-size-4

4px

Radius

Base radius values that create consistent corner treatments throughout the interface.

--radius-1

Small radius

--radius-2

Medium radius

--radius-3

Large radius

--radius-round

Full round

Motion

Raw timing and easing values that power smooth, consistent motion throughout the interface.

--ease-3

cubic-bezier(.25, 0, .3, 1)

Standard easing curve

--ease-spring-3

cubic-bezier(.5, -1, .1, 1.8)

Playful spring easing

--animation-duration-2

150ms

Standard duration

Icons

Industry-standard icon system with responsive sizing, design tokens, and optimized SVGs. All icons follow accessibility best practices and support multiple rendering methods. We use Lucide Icons because they're lightweight, open source, and align beautifully with modern UI standards — clean, scalable, and customizable.

Variable Types

color

type

numbers

states

Navigation

chevron-down

chevron-up

chevron-left

chevron-right

arrow-left

arrow-right

arrow-up-right

external-link

Functional

close

plus

minus

rocket

filters

export

layers

package

copy

check

download

zap

sparkles

briefcase

component

wand

Status & Feedback

check-circle

circle-x

circle-alert

info

Social

github

linkedin

figma

mail

Size Variations

--icon-xs 12px

--icon-sm 16px

--icon-md 20px

--icon-lg 24px

--icon-xl 32px

Stroke Weights

--icon-stroke-hairline 1px

--icon-stroke-thin 1.5px

--icon-stroke-regular 2px

--icon-stroke-bold 2.5px

--icon-stroke-heavy 3px

Components

Cards

The central dashboard component that displays the total count of design tokens. It transforms to show different states like loading, success, or an empty state if no tokens are found.

Default State

247

Tokens Found

colors

text

numbers

states

Advanced Mode

131

Tokens Selected

colors

text

numbers

states

Loading State

Discovering tokens...

colors

text

numbers

states

Progress Flow

Ready to export

Empty State

Let's build something!

Create a variable collection in Figma to get started.

color

text

number

states

Learn about Variables

Filters

Buttons

A comprehensive button system with multiple variants, sizes, and states. Built for flexibility and consistency across the interface.

Button Variants

Four core button types serve different hierarchical needs. Each variant is fully interactive with hover, active, and disabled states.

Primary

Secondary

Tertiary

Icon-Only

Usage Guidelines

Best practices for implementing buttons to ensure a consistent and intuitive user experience, presented using the system's `.compact-card` component.

Primary Buttons

Use for the single, most important action. Limit to one per container to maintain clear hierarchy (e.g., "Save", "Submit").

Secondary Buttons

Use for secondary actions that don't compete with the primary one (e.g., "Cancel", "Back", or alternative actions).

Tertiary Buttons

Use for low-emphasis, supplementary actions that shouldn't distract from the main flow (e.g., "Learn More").

Icon-Only Buttons

Use for common, universally understood actions in tight spaces. Always include an `aria-label` for accessibility.

Icon Placement

Left Icons (Prefix)

Use for icons that represent the action itself. The icon is decorative and supports the text label.

Right Icons (Suffix)

Use for icons that indicate navigation or continuation. The icon implies moving forward to another location.

State Reference

Interactive states provide visual feedback. Test all states during implementation.

Default

Hover

Active

Focus

Disabled

Primary

Secondary

Tertiary

Icon

Default

Hover

Primary

Secondary

Tertiary

Icon

Active

Focus

Primary

Secondary

Tertiary

Icon

Badges

Small, inline labels for categorization and status indication. Perfect for highlighting code elements, states, or categories.

Sizes

SMALL MEDIUM LARGE

WITH ICON WITH ICON WITH ICON

Color Variants

BRAND INVERTED NEUTRAL CYAN PURPLE ORANGE PINK

Modals

Used for focused tasks or information, such as the "About" screen in the plugin. Features a blurred backdrop effect.

About Modal - Live Example

Token Exporter

The Challenge

The Solution

The Impact

Figma to Code

FAQ

Built With

Foundations

Color System

Typography

Spacing

Effects

Elevation Shadows

Glass Effects

Glow Effects

Borders

Radius

Motion

Icons

Components

Cards

Quick Export

Filters

Buttons

Button Variants

Usage Guidelines

Primary Buttons

Secondary Buttons

Tertiary Buttons

Icon-Only Buttons

Icon Placement

Left Icons (Prefix)

Right Icons (Suffix)

State Reference

Badges

Modals

Token Exporter