Variables Exporter

Export Figma variables as CSS, TypeScript & JSON — with aliases intact

Plugin Preview

Variables Exporter extracts all variable collections from your Figma

file and exports them in formats developers can use immediately —

no manual copy-pasting, no lost references.

THREE EXPORT FORMATS

→ CSS Custom Properties → tokens.css

Variables become --custom-properties, ready to @import in any

project. Aliases automatically resolve to var(--referenced-name).

Multiple modes export as [data-theme="mode-name"] selectors,

so light/dark theming works out of the box.

→ TypeScript → tokens.ts

A fully typed `as const` object with every token. Semantic tokens

reference primitives as var(--name) strings — compatible with

CSS-in-JS, Tailwind, and any TS-based design system.

Includes TokenKey and TokenValue types for type-safe access.

→ JSON → export.json

W3C Design Token format. Aliases are preserved as {path.to.token}

references with full $type, $scopes, and $collectionName metadata.

Ready for Style Dictionary, Theo, and other token pipelines.

KEY FEATURES

• Choose exactly which collections to export — skip what you don't need

• Search and sort collections by name

• Variable aliases and cross-collection references always preserved

• Multi-mode collections export with correct CSS selectors per mode

• Numbers get proper CSS units (px) based on their Figma scope

• Works with local variables — no external dependencies

WHO IS THIS FOR

Front-end developers and design system teams who maintain a single

source of truth for design tokens in Figma and need a reliable,

zero-friction way to sync them into code.