Variables Exporter

About this plugin

Variables Exporter extracts all variable collections from your Figmafile and exports them in formats developers can use immediately —no manual copy-pasting, no lost references.THREE EXPORT FORMATS→ CSS Custom Properties → tokens.cssVariables become --custom-properties, ready to @import in anyproject. 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.tsA fully typed `as const` object with every token. Semantic tokensreference primitives as var(--name) strings — compatible withCSS-in-JS, Tailwind, and any TS-based design system.Includes TokenKey and TokenValue types for type-safe access.→ JSON → export.jsonW3C 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 dependenciesWHO IS THIS FORFront-end developers and design system teams who maintain a singlesource of truth for design tokens in Figma and need a reliable,zero-friction way to sync them into code.