Overview
Figma Variables are already powerful for theming and responsive behavior - but Auto Layout settings remain static. Currently, we can’t change layout direction (horizontal
/vertical
), item sizing (hug
/fill
), or alignment (space-between
, center
, etc.) using variables.
This limits the flexibility of truly responsive components - especially in systems using mode-based logic.
Current Limitation
Right now, Figma only supports number-based variables in Auto Layout settings (e.g., padding, gap, min/max width). But many key layout settings require string values, and they’re not variable-compatible yet:
-
Direction
: Horizontal / Vertical -
Justification
: Space-between / Center / Start -
Sizing
: Hug / Fill / Fixed
This makes it hard to create truly responsive components that adapt to screen size.
Practical Example: Card Layout Breaks Responsively
To demonstrate this limitation, I created a responsive Card component made of:
-
Media section (image)
-
Info section (text + tags)
I used min
and max
variables to simulate switching between horizontal and vertical layout based on screen size.
Horizontal layout works as intended

In desktop view, layout is horizontal, and the Info section is set to Fill container. This lets me push content to the top (title) and bottom (tags) using space-between
.
✅ Works perfectly.
Layout switches but spacing is wrong

When screen size shrinks and layout switches to vertical, the Info section still uses Fill, which causes unwanted empty space between content blocks. Ideally, it should switch to Hug here.
Layout breaks with longer content

If the text content increases, the layout overflows or breaks. This is because:
-
Height is stuck on Fill
-
There’s no way to switch to Hug when in vertical mode
What Would Solve It
I’d love to be able to set Auto Layout properties using mode-aware variables, just like we do with gap and padding.
Examples of variable support:
-
direction: vertical | horizontal
-
alignItems: center | start | end | space-between
-
itemSizing: fill | hug | fixed
🙏 Why It Matters
If we could dynamically switch these layout settings:
-
We could stop using
min
/max
hacks -
Components would adapt more cleanly across breakpoints
-
Designs would be simpler to maintain and more predictable in Figma Site and Dev Mode
It would make responsive design in Figma far more powerful and scalable, especially in complex design systems.