Simulating fluid design in Figma: a practical guide

As designers, we’ve all been there—going back and forth with developers on breakpoints, trying to decide how text should scale across different devices. Then, at handoff, the confusion begins: why does the h1 jump from 36px on mobile to 48px on one desktop screen but something completely different on another? It’s a constant cycle of tweaks, overrides, and inconsistencies.

For years, adaptive design has been the go-to approach for handling different screen sizes. Using CSS media queries, developers define breakpoints where layouts shift to fit specific devices. But now, fluid design is gaining momentum, offering a more seamless way to scale elements proportionally across screens. Instead of abrupt jumps between sizes, a fluid framework scales typography, spacing, and layouts dynamically, using min-max values and interpolation (think water taking the shape of whatever container it’s in).

With fluid design becoming more popular, it’s time to rethink how we’re designing in Figma. Figma variables and modes now give us the ability to “fake” fluidity, letting us design with the same principles that developers use—making handoff smoother and reducing last-minute surprises. In this post, I’ll break down how to implement a fluid system in Figma using variables, and how we put a hybrid fluid-adaptive approach into play at Mcdonald’s.

Or fake it until Figma makes it…

If you haven’t already, I recommend these resources to define your values:

Utopia Fluid Responsive Design
Utopia Project Kickstarter (Figma Community)

Variables for scaling typography and spacing

Figma variables let you define values for things like typography sizes and spacing. In my setup, I have separate sets within a single collection for typography and space to keep things organized.

When setting values, start with your @min—we’ll talk about modes in a minute. For typography, I followed Utopia’s stepped approach, which uses mathematical ratios to create a smooth, proportional relationship between text sizes. The bigger the step, the larger the font size. (I promise I wasn’t using decimals for torture). When things got too decimal-heavy, I rounded up to keep it clean.

💅 Typography tips:

• Editorial sites (like blogs or news platforms) often benefit from a larger @min for better readability.

• Utility-heavy or complex interfaces (like dashboards) might work better with a smaller @min—16px is a good starting point.

Some resources for more info on fluid type scales:
Designing with fluid type scales by James Gilyead.
Utopia’s fluid type scale calculator.

Modes for managing breakpoints

Modes let you switch between predefined sets of variables, much like how CSS media queries adjust layouts. Now that your @min variables are set, we’ll use modes to define values across different screen sizes.

Think of @min as the smallest your typography and spacing will ever be, while @max represents the largest. Everything in between is fluid, but I determined some others by the breakpoints our design team and developers agreed upon. While we embraced fluid scaling, our team still wanted control over layout adjustments at key breakpoints.

• XS (@min) : 320

• S : 390

• M : 768

• L (@max) : 1440

🤔 What in the world are space value pairs??

Value pairs are super useful when spacing feels too tight on smaller screens or too loose on larger ones. Essentially it’s custom spacing that grows or shrinks as the screen size changes.

To keep things flexible, I referenced my space variables when setting up value pairs, making adjustments easier. But you can always mix and match to fine-tune spacing based on your specific needs.

Styles for maintaining consistency

View fullsize

View fullsize

Even though variables and modes do a lot of heavy lifting, styles are still essential for ensuring a consistent design system.

• Pair text styles with @min font size variables

• Pair grid styles (margin and gutter) with space @min variables.

Since Figma doesn’t have dedicated space styles (aside from grids), you’ll need to apply space variables directly within frames and components rather than relying on styles.

When you increase the width of your parent frame and adjust the mode to match the breakpoint, all styles within will adjust based on the variables you defined. Magic! 🪄

💅 Style tips:

• I set @min as my default mode since I design mobile-first, but you can adjust based on your needs.

• You can also reference the space value pairs for your grid depending on how you want your margin / gutters to grow / shrink.

Putting it all together @ McDonald’s

Here’s how we made it work:

• Used variable-driven typography and spacing to simulate fluidity.

• Implemented mode-based sizing to adapt the UI across different screens.

• Created a static set of typography and space for cases where scaling didn’t make sense.

• Defined breakpoints to maintain control over layout adjustments.

What it took

• Developer buy-in – Designers can benefit from this approach independently, but its full potential is unlocked when developers align on the same values.

• A mindset shift – Both designers and developers had to adapt to working within predefined values.

• Time for setup and maintenance

The result?

A scalable, consistent system that looked seamless across devices—without cluttering design files. We built a clean component library with minimal variants that adapted dynamically (instead of duplicating components for larger instances). Best of all, design and dev were finally speaking the same language. 🎉

Plot twist

Despite presenting the approach with the team in reviews, it didn’t gain the traction I had hoped for, and we ultimately didn’t stick with the fluid approach. I believe this was largely due to unfamiliarity with variable-driven design and fluid scaling, highlighting the need for stronger storytelling and clearer communication. But I hope all this information can be helpful to some designer out there who can learn from my experience and implement an awesome fluid system!

Learnings and reflections:

1. New ideas require strong storytelling. It’s not enough for something to work well—it also has to be communicated in a way that resonates with the audience.

2. Stakeholder alignment is key. Just as we needed developer buy-in, we also needed to bring the broader design team along earlier in the process.

3. Change takes time. Shifting how people think about design and implementation doesn’t happen overnight, especially with established workflows.

4. Small adjustments can make a big difference. My @min was 16px and my @max was 24px, based on an audit of existing designs before implementing the system. Looking back, I probably would have chosen 18px or 20px for my @max to create a more gradual, less noticeable jump between sizes.

sources:
Utopia Fluid Responsive Design
Utopia Project Kickstarter (Figma Community)
Designing with fluid type scales by James Gilyead
https://forum.xojo.com/t/responsive-vs-adaptive-web-design/32819/3