Skip to main content

Feature Request: Use Variables to Control Auto Layout Settings like Direction, Alignment, Hug/Fill

  • June 16, 2025
  • 1 reply
  • 36 views

Mortyakard

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​​​​​

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

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

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.

Yegor1
  • New Member
  • June 17, 2025

People has been asking for this for more than a year but figma has been working on ai and things no one cares or asked for if you are doing a real world work. thanks figma team👍


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings