Computed Variables
A Figma plugin for design systems that need expression-based tokens. Tokens are defined in JSON with math, color modifier functions, and alias references. The plugin evaluates them and writes the computed values to Figma Variables.
What it does
Modifies colors with functions
Lighten, darken, shift hue, or change opacity right inside the token value
Evaluates math expressions
Token values can reference other variables and use arithmetic:
{spacing.base} * 2Concatenates text tokens
Combine a variable reference with a static string:
{font.family}, sans-serifAdds OKLCH support — a perceptually uniform color space
Lightness steps look consistent across all hues
Imports existing Variables
Read existing Figma Variables and convert them to JSON, with all aliases preserved
How it works
Step 1
Get the JSON
Start from scratch, or hit Import from Variables to convert existing Figma Variables to JSON in one click
Step 2
Add expressions
Replace static values with expressions — manually or with an AI agent
Step 3
Apply
The plugin will check all the expressions and save the computed values to Figma Variables
Recommendation: treat JSON file as the single source of truth
- Store it on GitHub — versioned, reviewable, portable
- Use the same file for Figma and your frontend token pipeline
- Figma Variables become an output, not the source
Expressions
| Expression | Example | Result |
|---|---|---|
| Alias | "{color.primary}" |
#0066FF |
| Math | "{spacing.base} * 2" |
16 |
| Merge text | "{font.family}, sans-serif" |
Inter, sans-serif |
| Opacity | alpha({color.primary}, 50%) |
rgba(0, 102, 255, 0.5) |
| Darken | darken({color.primary}, 30%) |
#003899 |
| Lighten | lighten({color.primary}, 30%) |
#66AAFF |
| Saturate | saturate({color.primary}, 50%) |
#0044FF |
| Desaturate | desaturate({color.primary}, 65%) |
#5577AA |
| Hue shift | hueShift({color.primary}, 30deg) |
#5533FF |
| Plain color | "#0066FF" |
#0066FF |
| Plain number | 8 |
8 |
| Plain text | "Inter" |
Inter |
Accepted color formats
| Format | Example |
|---|---|
| Hex | "#0066FF" |
| RGB | "rgb(0, 102, 255)" |
| RGBA | "rgba(0, 102, 255, 0.5)" |
| OKLCH | "oklch(0.5 0.22 265)" |
| OKLCH + alpha | "oklch(0.5 0.22 265 / 0.5)" |
Examples
json
Figma Variables