Variables Exporter For Dev Mode

About this plugin

This plugin allows you to extract a comprehensive JSON representation of all the variables used within a Figma document. This JSON output can serve as a foundation for transforming design variables into cross-platform design tokens—for example, generating Tailwind CSS classes or integrating them into a design token pipeline like Style Dictionary.

The exported format is intentionally rich and flexible, enabling developers to write custom scripts or transformations as needed. However, the plugin also offers two configuration options that reduce the need for manual preprocessing—saving time and making integration into developer workflows more seamless:

Resolve Aliases

When enabled, this option resolves all aliases to their final, underlying values. The plugin supports cascading resolution, meaning it can follow chains of aliases until it reaches a concrete value.

A key feature here is the smart handling of multi-mode variable collections. If variables are connected through multi-mode collections, the plugin attempts to match modes based on slugified mode names. If no match is found, the target collection’s default mode is used instead.

Importantly, the resolution is always based on the original mode name—not the fallback.

Example:

The variable primary in the light mode of the semantics collection points to the variable blue in the primitives collection (which only contains the dark mode). That variable in turn points to blue-500 in the palettes collection, which contains both light and dark modes. In this case, resolution ultimately lands on blue-500 in the light mode, even though the intermediate blue variable belongs to a dark-only collection.

Exclude Hidden Variables

This option filters out any variables that have the "Hide from publishing" checkbox enabled in Figma.

When aliases are involved, any variable pointing to a hidden variable will still follow the alias resolution rules described above. This ensures that the exported JSON always contains usable and resolved values, even if some variables are marked as hidden in the Figma UI.