Responsive Design in Figma: Constraints, Auto Layout, and Variables

Why responsive design matters

In today’s multi-device world, a website needs to look and work seamlessly across every screen size. Responsive design is no longer just a nice-to-have; it’s essential for delivering a consistent user experience whether someone is browsing on a desktop, tablet, or smartphone. Figma offers a range of tools that make building these flexible layouts more intuitive and efficient.

Designing responsively still comes with challenges. Designers have to account for varying breakpoints, shifting layouts, and dynamic content. And even after the design is done, there’s the handoff to developers, where misunderstandings about intent or spacing can creep in. To minimize these challenges, it’s important to produce well-documented, fully responsive designs in Figma. This not only helps bridge the communication gap with developers but also ensures consistency across various device breakpoints.

Using constraints in Figma

Responsive design often begins with ensuring that elements maintain their position or size relative to their containers. In Figma, constraints allow you to control how objects respond when their parent frame is resized. Similar to CSS, constraints set reference points along horizontal and vertical axes, determining how elements interact with their parent frame.

Think of constraints as pins or anchors that keep UI elements "glued" to a specific spot (or proportion) as you stretch or shrink the frame. For instance, if you want a button to consistently sit at the bottom-right corner of a frame, you can easily anchor it there. This ensures that no matter how you stretch or shrink your frame, the button retains its intended position.

Note: Constraints apply to frames, not groups.

By default, objects are anchored to the Left and Top. However, you can modify these constraints to achieve different behaviors. In the Constraints panel on the right-hand side, you can set an object's horizontal and vertical constraints to options like Top, Bottom, Left, Right, Center, or Scale.​

In the video below, the first rectangle is set to Top and Left, the second one to Center and Center, and the third one to Right and Bottom.

Objects can also be set to Left and Right or Scale. The difference, as shown in the video below, is:

• Left and Right maintain the object's size and position relative to both sides of the parent frame.

• Scale defines the object's size and position as a percentage of the parent frame dimensions.

Quick tip: To resize the parent frame without applying child objects' constraints, hold Cmd (Mac) or Ctrl (Windows) while dragging the frame's edge.

It’s worth noting that constraints don’t make your design fully responsive on their own — they only define how elements behave within a resized frame. To build a truly responsive layout, constraints are often combined with Auto Layout and resizing settings.

Designing smarter with Auto Layout

Auto Layout is one of the most powerful features in Figma, and it is one I rely on constantly when building flexible layouts and responsive designs. It allows you to define how elements are positioned, spaced, and resized relative to one another inside a parent frame, so they adapt automatically when content changes or screen sizes shift.

To apply Auto Layout, simply select the objects you want to align and hit Shift + A. This creates a parent Auto Layout frame that wraps the selected objects and gives you access to layout controls in the right-hand panel.

From there, you can adjust layout direction, spacing, padding, alignment, and more.

Direction defines how child elements are arranged within the Auto Layout frame. You can choose between vertical (stacking elements from top to bottom) or horizontal (arranging elements from left to right) directions. Additionally, enabling the Wrap option allows items to move to a new row or column when space is limited, which is ideal for responsive tag layouts or flexible card grids.​

Spacing controls the space between elements. You can set a fixed value (e.g., 16px) to maintain consistent spacing, or use the Auto option to distribute remaining space evenly, similar to the 'space-between' property in CSS. Negative spacing values (e.g., -8px) stack elements visually. By default, the last item appears on top, but you can adjust this in the Auto Layout settings under "Canvas Stacking Order" by choosing either "First on top" or "Last on top".

Padding defines the internal spacing between the edge of the Auto Layout frame and its contents. You can set padding uniformly, specify vertical and horizontal values, or define custom values for each side (top, right, bottom, left). Adjustments can be made using the pink handles on the canvas or the spacing fields in the right-hand panel.​

Quick tip: Hold Cmd (Mac) or Ctrl (Windows) and click into any padding field to set uniform padding or use CSS shorthand. For example, entering 1, 2, 3, and 4 sets the padding values for top, right, bottom, and left, respectively.

Alignment controls how elements are positioned within the parent Auto Layout frame — top, center, bottom, left, or right. This becomes especially useful when the frame is larger than its contents.

When using Auto spacing, alignment is only available on the cross axis, as the main axis is controlled by space distribution.

If you're working with icons and text together, enabling Text Baseline Alignment can help align content more cleanly, especially when using mixed font sizes.

Sometimes, you might want an element to sit freely inside an Auto Layout frame — like a badge in the corner of a card or a close icon in a modal. In these cases, you can set that element to Ignore Auto Layout, allowing it to be positioned manually inside the frame — similar to absolute positioning in CSS.

Auto Layout instantly makes your design more dynamic and easier to maintain. As you add or remove elements, everything adjusts automatically — no need to manually move layers or tweak spacing.
Once you start using it regularly, it becomes second nature and a huge time-saver in any responsive design workflow.

Minimum and maximum width, and horizontal resizing

When designing responsive layouts in Figma, one of the key factors is how elements behave when the frame resizes. After setting up Auto Layout and Constraints, the next step is to make sure your design works across different screen sizes — from small mobile screens to large desktop monitors.

Figma gives you several options to control horizontal resizing behavior, along with the ability to define minimum and maximum dimensions to keep elements flexible but consistent. This is especially helpful when creating responsive layouts in Figma that need to scale across breakpoints, without breaking or stretching too far.

Resizing modes and behaviours in Figma

Each object within a frame, especially in an Auto Layout frame, can be set to behave differently as the parent resizes. Figma provides three main resizing modes:

1. Hug contents – The element’s size is determined entirely by its content. If the content grows or shrinks, the element adjusts automatically. This is ideal for buttons, tags, or other components where the content should dictate the size.

2. Fill container – The element expands or contracts to take up all available space inside its parent frame. This is useful for flexible layouts, such as navigation bars or cards that need to adapt to varying container widths.

3. Fixed – The element maintains a set width or height regardless of its content or parent resizing. This is ideal when you need strict control over how wide an element appears. It’s useful for elements like sidebars, icons, or fixed-size buttons.

In practice, you often combine these modes within nested layouts. For example, a card component might have an outer frame set to Hug (to fit snugly around its contents), while a text box inside is set to Fill so that it stretches and uses all the width available inside that card.

Quick tip: Double-click an element’s edge to set it to Hug contents.
Hold Option (Mac) or Alt (Windows) and double-click to set it to Fill container.

It's important to note a subtle rule: if any child inside an Auto Layout frame is set to Fill on an axis, the parent cannot hug on that axis. Figma will fix the parent’s size instead to avoid conflicting behaviours. Understanding this behavior is key to setting up responsive components without confusion.

Minimum and maximum width

To make your designs responsive but still controlled, you can add minimum and maximum width or height values to frames and objects. These act as bounds on how narrow or wide an element can get, providing much finer control for responsive design.

This is especially useful when:

• You want a text container to grow, but not wider than, say, 400px.

• You want a card to shrink, but not go below 200px (so it doesn't break or squash its content).

You can set these values by clicking the width or height dropdown and choosing "Add Min width" or "Add Max width". When resizing the parent frame, the object will stretch or shrink but only within the defined range. Outside that range, it remains fixed. This helps maintain visual consistency across screen sizes and avoids layout breakage.​

Quick Tip: After setting everything up, try dragging the edge of the parent frame to simulate different screen sizes. It's an effective way to spot layout issues early and ensure your design remains responsive.

Combining with Auto Layout

Min and Max width settings become even more useful when you pair them with Auto Layout. This combination lets you fine-tune how elements adapt to different screen sizes, without creating extra frames or constantly adjusting things by hand.

For example:

• Text inside cards – Set the text box to Fill container so it expands with the card, but add a Max width so lines don’t get uncomfortably long on desktop.

• Buttons that stay usable – Keep the label set to Hug contents, while the button frame has a Fixed or Min width to make sure it’s still easy to tap on mobile.

• Grids that reflow naturally – In a horizontal Auto Layout with Wrap enabled, give each card a Min width so they drop to the next row when the screen gets narrow.

By combining Auto Layout, resizing modes, and Min/Max constraints, you can create layouts that adjust smoothly across breakpoints — without duplicating artboards or doing extra work.

In the example below, each card combines these principles: the text uses a Max width, and the buttons show different resizing modes — Fill, Hug, and Fixed — while the grid reflows into new rows as the frame narrows.

Combine constraints, Auto Layout, and horizontal resizing

Seeing theory in action makes it easier to understand how all the pieces fit together. For this example, I built a responsive card component in Figma that adapts smoothly from desktop to mobile view.

The card sits inside a parent frame with horizontal Auto Layout and Wrap enabled. Each card has:

• A Min width set so it never becomes too narrow for its content.

• A Max width so it stays readable and doesn’t stretch uncomfortably on large screens.

• Internal elements (like images, titles, and buttons) with a mix of Hug, Fill, and Fixed resizing modes, depending on their role.

Here’s how it behaves:

• On a wide frame, cards display in a horizontal row, evenly spaced.

• As the frame resizes to tablet width, the cards begin to reflow, wrapping onto the next line when they hit the defined Min width.

• On a mobile-sized frame, the layout naturally shifts to a single-column stack without any manual adjustments.

The combination of constraints, Auto Layout, and horizontal resizing ensures that no matter the screen width, the cards maintain consistent spacing, proportions, and readability.

Using variables and tokens

Figma variables have become one of the most significant tools for creating responsive layouts. They make it easier to maintain consistency, scale your designs as projects grow, and collaborate more efficiently with developers.

At their core, variables are reusable values that you can apply to many different properties in your designs. They can hold numbers, colors, strings, or booleans, and can be used for anything from padding and spacing to typography and breakpoints. Think of them as the design equivalent of CSS variables. Instead of typing “16” into a padding field, you can use a variable like Spacing/16.

If you ever need to update spacing or typography globally, you can simply change the variable — and it updates everywhere. You can also create modes for your variables so that they adapt depending on the context. For example, the same padding value might be larger in a desktop layout and smaller in a mobile one.

When those variables are structured and named clearly — for example, FontSize/Heading or Color/Primary — they become what we call design tokens. Tokens are the building blocks of design systems, helping you apply the same decisions (spacing, colors, text sizes) across your entire project. They eliminate inconsistencies and make future updates painless.

Creating variables in Figma

To make your layouts more consistent and adaptable, start by setting up variables.

1. Open the Local Variables panel from Assets → Local Variables.

2. Create a new collection such as “Spacing”, “Typography”, or “Breakpoints” to keep related variables together.

3. Add variables for values you use often. For example:

   • Spacing/8 = 8 (for small gaps)

   • FontSize/Body = 14 (for body text)

   • MaxWidth/Desktop = 1200 (for a desktop layout limit)

You can also create modes like “Mobile”, “Tablet”, and “Desktop” within a collection. Modes let the same variable hold different values depending on the context, making it perfect for responsive design.

Applying variables for responsive design

Once your variables are set up, you can start using them to make layouts adapt across breakpoints with minimal effort.

• Control spacing and margins by replacing fixed values with variables such as Spacing/Section. For example, in Desktop mode it might be 32px, while in Mobile mode it becomes 16px. Switching modes updates all linked spacing instantly.

• Adjust typography automatically by setting variables for font sizes and line heights, such as FontSize/Heading and LineHeight/Body. A heading could be 24px on desktop and scale down to 20px on mobile without manual changes.

• Set responsive width limits by applying variables to Auto Layout frame constraints. For example, Min Width = Breakpoints/MobileMin and Max Width = Breakpoints/DesktopMax will ensure your layout stays within the intended range.

• Keep padding consistent by tokenizing it the same way as spacing. A Padding/Page variable might be 40px on desktop and 20px on mobile, ensuring uniform section spacing across breakpoints.

To apply a variable, click the property field (such as width or padding) in the right-hand panel, then use the diamond icon to select a variable from your collection.

Responsive modes in practice

Once a frame has at least one variable applied, you can switch its variable mode from the Layers panel. Changing from “Desktop” to “Mobile” instantly updates all connected values—widths, font sizes, padding—based on the mode.

Nested frames inherit the mode from their parent unless you override it. That makes it easy to preview a fully responsive layout without duplicating artboards.

Using variables isn’t just convenient. It mirrors how developers work, reduces inconsistencies, and saves time you’d otherwise spend making repetitive adjustments for different devices.

Quick tip: Start small. Even a few spacing or typography tokens make layouts feel much more flexible.

In the example below, switching between Desktop and Mobile modes updates the variables for spacing, typography, and breakpoints, automatically adapting the entire card layout without any manual changes.

Connecting component variants with variables

Figma components and variants are essential for building scalable, consistent UI systems. When you combine them with variables, they become even more powerful, allowing components to adapt automatically based on layout context, screen size, or theme.

A component is a reusable UI element (like a button, input field, or card) that maintains consistency across your design. A variant is a specific version of that component. For example, a button might have small and large size variants, or default and hover state variants. Each variant is defined by its own set of properties, such as size, theme, or layout, which you can switch between as needed.

Figma now allows variant properties to be bound to variables. This means a component can automatically switch variants when the value of a linked variable changes. Just like a toggle.

For example, you can:

• Connect the size property of a button component to a variable like Button/Size.

• Create modes such as “Desktop” and “Mobile” where Button/Size equals large in Desktop mode and small in Mobile mode.

• When you change the mode on a parent frame, the correct variant is applied instantly, without manual changes.

This makes components more intelligent and responsive. They adjust themselves to match the context while staying aligned with your design system.

How does this boost responsive design

In responsive interfaces, components often need slight adjustments at different breakpoints. Without variables, you’d have to duplicate artboards or manually replace components. With variables and modes, you can:

• Define a single component with multiple variants for spacing, layout, or size.

• Bind it to a layout-aware variable, such as Mode/Layout or Size/View.

• Watch it adapt automatically when switching from Desktop to Mobile mode.

This approach is useful in all kinds of places: buttons that resize across breakpoints, cards that collapse or stack differently on smaller screens, navigation bars that switch to icon-only views, or headings that scale for readability on mobile.

Use variables to drive variant changes only when tokens alone aren’t enough—for example, when you need to completely restructure a layout or change visibility. For smaller style adjustments like padding or font size, stick to tokens. This keeps your component logic simple and easier to maintain.

Quick tip: Create a dedicated variable like ComponentMode or DeviceType to control responsive variants across multiple components at once. This ensures every component switches together when the layout changes.

Bringing it all together

It’s not about mastering a dozen different features. It’s about understanding how a few key tools work together to make your life easier.

Constraints handle the basics, keeping elements anchored as screens change size. Auto Layout manages the spacing and flow so you’re not constantly nudging margins. Variables keep colors, spacing, and typography consistent across breakpoints. And once you add component variants, your whole design system starts adapting naturally to any screen.

It takes some planning up front, but the payoff is worth it. Don't try to build the perfect responsive system on day one. Start with a few spacing tokens and a single flexible component. As you get comfortable, you’ll see how much easier it becomes to scale your layouts across devices.