Dynamic Variables

Change one base variable — every dependent color, spacing and type value updates itself.

Dynamic Variables lets your Figma variables derive from each other: write a small JavaScript formula in a variable's description field, and the plugin keeps its value in sync with everything it depends on.

🎨 primary-600: {{ cd($base-color).darken(0.1) }} — correct today, correct after every rebrand.

You know the ritual: the brand color shifts, and now it's 20 shades × light-and-dark modes of hand edits — and the one shade you miss is the one that ships. Type scale tweak? Same ritual. Spacing rhythm? Same. Your tokens already depend on each other — Figma just doesn't know it yet. This plugin is how you tell it.

🛝 Try it before installing: the documentation runs every example live in your browser — editable variables, editable expressions, visual previews. Two minutes there and you'll know if this is for you.

✨ NEW in 2.0 — you don't even have to write the formulas:

🤖 AI-assisted editing: click Copy Brief for AI, paste it into ChatGPT, Claude, Gemini — whatever assistant you already use — describe what you want in plain words, then paste the reply back. The plugin parses it and shows a preview of every change before anything touches your variables — it can update expressions and even create the variables it needs. Or hand the brief straight to the Figma Agent, which edits your variables directly. No API key, no extra subscription.

🖥️ Visual editor: browse collections as a tree and edit expressions in a real code editor (Monaco — the engine inside VS Code) with syntax highlighting, autocomplete for your variable names, and inline errors, instead of squinting at description fields.

🧩 Global Functions: define a helper once — say, a function that picks readable text for any background — and call it from any expression. Repeated logic lives in one place.

🗂️ Relative paths, on by default: $('./Base') reads a sibling, $('../radius') reads one group up — so one generic expression serves a whole family of tokens and survives renames of the family itself.

🏃 Motion variables: Figma's new Timing & Easing types are supported — switch easing curves by condition (reduced motion, brand, platform) via alias selection, and export any curve as CSS with cssEasing().

🔑 How it works:

⚙️ Expressions: any JavaScript between {{ }} in a variable's description. Reference siblings as $A, other collections as $('Collection/Variable'). A variable C defined as {{ $A + $B }} updates whenever A or B changes.

🎨 Color science built in: colord (cd) and culori (cl, cv): {{ cd($color).lighten(0.2) }}, WCAG luminance {{ cl.wcagLuminance($brand) }}, OKLCH with gamut clamping {{ cl.clampRgb(cv("oklch(90% 0.4 135)")) }}, plus Figma-style {{ rgba("green") }}.🧠 Mode-aware logic: one expression, different behavior per mode — {{ ($$().mode == "Mobile" ? 1 : 2) * $base-padding }}. Read a variable's own name, collection and modes through the $$() metadata object to write scale steps that compute themselves from their names.

🕒 Two run modes: Start Monitoring Changes (live updates at your chosen interval, pause/resume anytime) or Update Once when you want full control.

🔗 Rename-proof: references fix themselves when variables are renamed or moved.

📚 Library variables: bring team-library variables in as aliases and use them in expressions.

❌ Honest errors: cyclic dependencies, unresolved references, type mismatches — reported per variable, per mode, in the editor.

🌐 Live data: expressions can fetch. This works, today, in a variable: 🔤 nyc-feels-like: {{ fetch("https://api.open-meteo.com/v1/forecast?latitude=40.71&longitude=-74.01&current=apparent_temperature&temperature_unit=fahrenheit").then(r => r.json()).then(d => Math.round(d.current.apparent_temperature) + "°F") }} — the current feels-like temperature in New York, in your prototype. Same trick for prices, or just the time: {{ new Date().toLocaleTimeString("en-GB") }}.💡 What people build with it:

🎨 Full color ramps from one seed — 50…950, light and dark, self-updating📏 Spacing systems: #️⃣ spacing-s: {{ $base-spacing * 2 }}, density modes included🖋️ Type scales: #️⃣ heading-md: {{ Math.round($heading-sm * 1.2) }}⚖️ Accessible on-colors: pick black or white text by actual contrast math, per mode🔤 Composed strings: {{ "Hello, $user-name!" }} for copy that assembles itself⏺️ Conditional tokens, Material-style state layers, concentric radii — if JavaScript can compute it, a variable can be it💳 Free & Pro: everything is free for up to 5 dynamic variables, forever — enough to feel the click. Need more? A full-featured trial (7 or 14 days, depending on variant) has no cap. Pro removes the limit and funds development.

Buy Pro LicenseAfter purchase: Dynamic Variables → Pro License → Activate Key. Licenses cover 5 devices (10 on Unlimited). Reinstalling your OS? I can reset your activations — just write me.

Subscribe for updates🔗 Links:

📖 Interactive documentation — live playgrounds, syntax, relative paths, $$() metadata, AI editing, recipes (and a small thank-you at the end for those who read it all)💬 Feedback and use cases → comments below. I read everything, and roadmap items regularly come from here.