Export Figma variables and styles to SCSS, Tailwind, or JSON.

About this plugin

Convert Figma design tokens into developer-ready formats in one click. This plugin reads local variables and styles and exports clean, code-friendly SCSS, Tailwind CSS config, or JSON to speed up design-to-development handoff.

How to use the plugin

Prepare your design tokens

Create and organize your local Figma variables and styles (colors, spacing, radius, typography, etc.) using code-friendly naming.

Run the plugin

Open the plugin from the Figma menu. Select your export format: SCSS, Tailwind CSS, or JSON.

Choose what to export

Pick which token types to include (colors, spacing, radius, typography). The plugin reads values directly from your variable collection.

Export or copy

Instantly generate developer-ready output. Copy the result or paste it directly into your project configuration.

Use in development

Drop the exported tokens into your SCSS files, Tailwind config, or token pipeline to keep design and code perfectly in sync.