v5.0.1

What's Changed

• fix(import): honour empty scopes as hidden from pickers by @hefler in #32

Import

• Empty scopes now mean hidden. "scopes": [] in a JSON file (in $extensions.figma or the legacy $scopes) hides the variable from every Figma picker. Other variables can still alias it, so it suits primitives that should only be referenced. (#30)
• Leave the scopes key out to keep a variable's existing scopes. A new variable starts on Figma's default, all scopes.
• Files exported by VarVar now round-trip exactly. Before, hidden variables came back visible.

Heads-up: a third-party token file that always writes "scopes": [] will now produce hidden variables. Remove the key to keep the old behaviour.

Exports are unchanged.

Full Changelog: v5.0.0...v5.0.1

v5.0.0

What's Changed

• Styles (BETA) — edit, find & replace, build and apply styles with variables by @hefler in #29

🧪 Styles (BETA)

A new Styles menu for working on colour, text, effect and grid styles with your variables. Each item opens the same view in a different place, and a breadcrumb shows where you are.

• Edit & Bind Variables… — browse every local style and bind, swap or detach the variable behind each field: fill and gradient colours, every text setting Figma exposes, shadow colour/offset/blur/spread, blur radius, and grid count/gutter/margin/size. Add, reorder and hide layers; reorder styles within a folder.
• Find & Replace Variables… — search the variables bound in styles (contains, starts with, exact name or regex with $1 groups), optionally within one collection, and re-bind every match to the renamed variable. Broken bindings to deleted variables can be found and pointed at a new one. Every match is previewed with a tick box.
• New Style from Variables… — build a style the way you think about it: pick the kind and type (e.g. Effect → Drop shadow), then a variable for each field, and a name. Need a whole set? Generate many styles at once from a token group or a DTCG typography / shadow file.
• Apply LibLib Snapshot… — make this file's styles match a LibLib library snapshot. Styles match by key, so renamed styles keep every layer link; variables are rebound by name (exactly, by collection, with LibLib 2.3.0+).

Everywhere:

• Live preview — an instant preview as you edit, plus the exact render from Figma, with a mode switcher (extended collections included).
• Nothing is written until you review it — changes collect as drafts, an itemised diff shows exactly what will happen, and applying is a single Figma undo step.
• Usage count for the selected style.
• Read-only in Dev Mode.

Menu

• Export Variables moved to Export as… → All Formats.
• Styles (BETA) sits second, Import… last.

Why a major version

• VarVar now asks for the team library permission, so library variables can be offered in the token picker — Figma will ask you to approve it.
• The menu layout changed.

Exports and imports are unchanged.

Full Changelog: v4.5.2...v5.0.0

v4.5.2

What's Changed

• Fix colours linked at their own opacity exporting as NaN/null by @hefler in #31

Export

• A colour variable that links to another colour at its own opacity — e.g. palette/white at 97%, or a colour with a linked opacity — no longer exports as #NaNNaNNaN (CSS, JS, CSV) or null (JSON).
• CSS & Tailwind keep the links: color-mix(in srgb, var(--palette--white) 97%, transparent).
• JSON writes the colour it renders as in $value and keeps the links in $extensions.figma.composedColor; import rebuilds the linked colour + opacity from it.
• JavaScript & CSV write the colour it renders as.

Dependencies

• Patched shell-quote (critical), brace-expansion and source-map-js advisories in build tooling.

Full Changelog: v4.5.1...v4.5.2

v4.5.1

What's Changed

• Keep filename and export button reachable next to the preview by @hefler in #28

Closes #27.

UI

• The filename field and the export/download button now sit in the same column as the code preview, pinned to the bottom of the window. A long preview no longer pushes the download button below the fold — no more scrolling past the whole output to get your file.
• The controls stay pinned whether or not the preview is showing, in both Design and Dev mode.

Full Changelog: v4.5.0...v4.5.1

v4.5.0

What's Changed

• Fix float-point precision, add unit options and DTCG-compliant values by @hefler in #26

Closes #21, #23, #24, #25.

Numbers

• Decimals no longer export with floating-point noise — 732.8 exports as 732.8, not 732.7999877929688. Every format.

Units

• New dropdown for numeric variables: none, px or rem, with a root font-size field when rem is chosen. CSS, Tailwind and JSON; JS and CSV keep exporting plain numbers.
• Import asks for the root font size when a file carries rem values, instead of silently rescaling them.

DTCG

• JSON now writes dimensions as {"value": 16, "unit": "px"} and colours as the Color Module object, per the 2025.10 spec. One option, on by default, restores the old "16px" and "#ff00ff" strings.
• $type no longer claims what a value cannot satisfy — an out-of-range fontWeight reports number. Values are never altered. JSON only; the CSV column and JS field are unchanged.
• Import reads colours in all fourteen colour spaces, converting the wide-gamut ones to sRGB with a warning, and picks a variable's type from its value so a fontWeight of "bold" imports correctly.

CSS

• The single-dash group separator is now available for plain CSS, not just Tailwind, so text/h1--line-height can export as --text-h1--line-height.

Interface

• The export preview and the scrollbars are legible in light theme.
• Long help tooltips became readable footnotes, options are reordered, and the CSS format is named "CSS & Tailwind".

Full Changelog: v4.4.1...v4.5.0

v4.4.1

What's Changed

• Always name the target collection in JSON alias references by @hefler in #22

Fixes a regression in 4.4.0, which started exporting same-collection aliases as $..Light.x instead of $.Theme.Light.x. Mode names like Figma's default Mode 1 recur across collections, so the short form could only be read by tracking the enclosing file entry. The collection is now always named.

Enterprise extended collections did emit the short form in 4.x; theirs are qualified now too, so all JSON output is consistent. Import understands both forms, so no existing file stops importing.

Full Changelog: v4.4.0...v4.4.1

v4.4.0

What's Changed

• Fix Tailwind scoping, add Code Syntax support, fix alias resolution by @hefler in #20

Closes #11, #16, #17, #18, #19.

Tailwind CSS export (BETA)

• Namespaces now derive from a variable's Figma scopes instead of its name, so a group called text scoped to font size exports as --text-h1
• px is applied only to dimension scopes — a font-weight no longer exports as 600px
• Groups join with a single dash by default so Tailwind IntelliSense picks the variables up; a toggle restores --
• Alias var() references now resolve through the same namer as declarations

Code Syntax

• Exported in JSON, CSV and JS, and applied again on import
• Optional setting to use the Web code syntax as the emitted variable name in CSS and JS

Import fixes

• Variable group names containing a full stop now resolve
• A mode name clashing with a group name backtracks instead of giving up
• A text variable whose value starts with $. is no longer mistaken for a reference

Also

• Optional px unit for variables left on Figma's default scoping
• Format labelled "CSS & Tailwind"; Tailwind-only options nested under their parent toggle
• Readable tooltips on the ? help badges

Full Changelog: v4.3.0...v4.4.0

v4.3.0

What's Changed

• Add dry-run preview with diff before applying JSON import by @hefler in #15

Full Changelog: v4.2.0...v4.3.0

v4.2.0

What's Changed

• Import: replace 'replace existing' toggle with 4 reconciliation modes by @hefler in #14

Full Changelog: v4.1.0...v4.2.0

v4.1.0

What's Changed

• Syntax highlighting + fixed code preview scrolling by @hefler in #13

Full Changelog: v4.0.0...v4.1.0