Hey everyone,
As a product designer working with a pretty large internal design system, I kept hitting the same limitation in Figma Variables: they’re great for static values, but the moment you want a scalable system (spacing scale, type scale, radii, opacity variants, responsive values…), you end up maintaining a ton of derived variables manually… or in spreadsheets.
Variables Plus — a plugin that lets you define relationships between variables using formulas, so derived values stay in sync automatically when the base variable changes.
Examples:
-
space_2 = space_1 * 2,space_3 = space_1 * 3 -
h1 = base_font * 2.25,h2 = base_font * 1.75 -
col_w = (container_w - (gutter * (cols - 1))) / cols(e.g.container_w=1200,gutter=24,cols=12) -
“Copy values across modes” to keep modes consistent (instead of duplicating & updating by hand)
If you want to try it, the fastest way is to duplicate the demo file:
-
Plugin: https://www.figma.com/community/plugin/1607106236822235286/variables-plus
-
Demo file (ready to duplicate): https://www.figma.com/community/file/1607096708474658929/variables-plus-demo
If you tell me your use-case (spacing / typography / colors / modes), I’m happy to suggest the cleanest setup.