Figma Plugin

Bring your Figma theme into your app. The Vortex plugin exports local Variables to a vortex.config.ts file, preserving the references between your tokens.

Set up the plugin

The Vortex Figma Plugin is a private development plugin. You'll need repository access, Bun, and the Figma desktop app.

From the plugin repository, install dependencies and start the build:

bun install

bun run watch

In Figma, choose Plugins → Development → Import plugin from manifest… and select the generated manifest.json. Open a file with local Variables, then run Plugins → Development → Vortex Tokens Export.

Choose your theme

Use the Theme dropdown to choose which theme to export. Vortex is included by default. Any custom themes you've added in Figma appear under their own names. The theme used on your current page is selected automatically.

Make your changes in Figma's Variables panel before exporting. Global tokens store values such as colors and spacing. Semantic tokens reference global tokens, and component tokens reference semantic tokens. In Figma, these references are called aliases. Use the names listed in the variable naming reference so the plugin recognizes your variables.

Export your theme

1. Enter a Theme name, such as sleek. This names the entry in config.themes.
2. Click Export.
3. Download or copy the generated vortex.config.ts.

Errors must be fixed before you can export. Warnings list skipped tokens. Use Inspect to see the collections, modes, and values the plugin reads.

Use it in your app

Save the config at your app's root. If you already have one, merge the exported theme into its themes object.

Follow Create a Theme to generate the CSS and load it in your app. Export and rebuild whenever your Figma variables change.