Responsive Design in Figma

Responsive design in Figma is achieved by combining three native features: Auto Layout for flexible spacing and stacking, constraints for how elements resize inside a frame, and variables for values (spacing, sizing, even color) that swap between breakpoints. None of this requires a plugin. If you learn these three tools in order and apply them deliberately, you can design a single set of components that behaves predictably at phone, tablet, and desktop widths — which matters directly if you are designing or customizing a Shopify storefront, since our own Figma theme kits are built entirely on this approach.

A lot of designers learn Figma by dragging elements around a fixed-size frame and eyeballing where things land. That works fine for a single static comp, but it falls apart the moment you need the same design to hold up across a 375px phone frame, a 768px tablet frame, and a 1440px desktop frame. This tutorial walks through building genuinely responsive layouts in Figma from the ground up: how Auto Layout actually behaves, how constraints interact with it, how to structure breakpoints without triplicating your work, and how to hand off a file a developer can implement without guessing.

Why Fixed Frames Break Down

A frame in Figma is just a rectangle with a fixed width and height by default. If you place text and images inside it with absolute positions, resizing that frame does nothing useful — content stays put, overflows, or gets clipped. This is the single most common mistake in Figma files that are supposed to represent a responsive site: the design looks correct at one width because it was built at that width, and every other width is a guess.

The fix is to stop thinking of a frame as a canvas you position things on, and start thinking of it as a container with rules: how much space between children, how children align, and what happens when the container gets wider or narrower than the content. That is exactly what Auto Layout gives you.

Step 1: Build With Auto Layout From the Start

Select the elements you want to group and press Shift+A, or use the Auto Layout icon in the right-hand panel. This turns a plain frame into a flex-like container with a direction (horizontal or vertical), a gap value, and padding. Every child now has a resizing behavior you set explicitly:

• Hug contents — the frame shrinks to exactly fit its children. Good for buttons, tags, and badges.
• Fixed width/height — the frame stays a set size regardless of content. Rarely what you want for responsive layouts, but useful for fixed-size icons or avatars.
• Fill container — the child stretches to fill whatever space its parent gives it. This is the setting that makes responsiveness possible: a product card set to Fill container inside a grid will resize automatically as the grid narrows on a smaller screen.

Nest Auto Layout frames inside Auto Layout frames. A product card is an Auto Layout column (image, then title, then price, then button) inside an Auto Layout row (the product grid) inside an Auto Layout column (the page). Once every level is Auto Layout, resizing the outermost frame cascades sensible resizing down through every child, instead of you manually repositioning each element per breakpoint.

Step 2: Use Constraints for Anything Auto Layout Does Not Cover

Constraints are the older Figma resizing mechanism and they still matter, mainly for elements that sit inside a non-Auto-Layout frame or that need to pin to an edge regardless of layout flow — a close button pinned to the top-right of a modal, for example, or a background image that should scale to fill its frame no matter the aspect ratio.

Select an element, open the Constraints section in the right panel, and set horizontal and vertical behavior independently: Left, Right, Left and Right (stretches), Center, or Scale. A hero background image is usually set to Left and Right plus Top and Bottom (stretch in both directions) with its fill set to Fill, so it always covers the frame at any width. A logo in a header is usually Left plus Top so it stays anchored to the corner rather than centering awkwardly as the header widens.

The practical rule: use Auto Layout for flow and spacing between elements, and use constraints for edge-anchoring and background fills inside a container that Auto Layout does not need to manage.

Step 3: Design Real Breakpoints, Not Just a Second Frame

Most storefronts need at minimum three states: mobile (roughly 375–430px), tablet (roughly 768–834px), and desktop (roughly 1280–1440px). Rather than redesigning each screen from scratch at every width, duplicate the top-level frame and resize it, then check what breaks: grids that need a different column count, navigation that needs to collapse into a menu icon, type sizes that read too large on a small screen.

A common structural pattern for a product grid is to set the grid’s Auto Layout to wrap, with each card set to Fill container at a defined minimum width — so the same grid frame naturally shows four columns at desktop width, two at tablet, and one at mobile without you rebuilding the grid three separate times. For components that genuinely need different structure per breakpoint (a collapsed hamburger menu versus a full nav bar), keep them as separate component variants rather than trying to force one layout to cover both — see Step 5.

Step 4: Use Variables for Spacing, Sizing, and Color

Figma variables let you define a value once — a spacing unit, a corner radius, a color — and reference it across your file, then swap the underlying value per mode. Create a collection named something like Breakpoint with two or three modes (Mobile, Tablet, Desktop), and define spacing variables such as page-margin and section-gap with different pixel values per mode. Apply those variables to your Auto Layout padding and gap fields instead of hardcoding numbers.

The payoff comes when you need to adjust global spacing later: change the variable’s value in one place, and every frame referencing it updates, rather than hunting through dozens of frames to update a padding value by hand. This is the same discipline behind a two-tier design-token system in code — semantic tokens (page-margin, section-gap) sit on top of raw values, and components consume the semantic layer rather than magic numbers, so a spacing change is a one-line edit instead of a search-and-replace across the whole file.

Step 5: Use Components and Variants Instead of Duplicating Screens

Every reusable piece of UI — a product card, a button, a header — should be a component, not a group of shapes copy-pasted across frames. When a component needs meaningfully different structure at different breakpoints (not just resizing, but a different arrangement of children), build it as a variant with a property like Breakpoint=Mobile / Desktop, and swap instances rather than maintaining parallel, disconnected copies. This keeps a single source of truth: fix a bug in the button component once, and every instance across every breakpoint frame updates automatically.

Step 6: Prepare the File for Developer Handoff

A responsive Figma file is only useful if a developer can read the intent out of it. A few habits make this much smoother: name layers and components descriptively rather than leaving default names like Frame 42; keep Auto Layout resizing settings consistent so a developer can see at a glance which elements should flex and which should stay fixed; and use Figma’s Inspect panel, which will surface the actual CSS-equivalent flex properties (direction, gap, padding) generated by your Auto Layout setup. If your team ships on Shopify specifically, structuring sections this way also maps naturally onto Shopify’s own section-based, block-driven templates, which expect predictable, reusable pieces rather than one-off pixel layouts.

Where a Ready-Made Figma Theme Kit Helps

Building this system from a blank canvas is a legitimate way to learn it, but for merchants and agencies who need a working storefront design fast, starting from a kit that already has Auto Layout, constraints, and breakpoint variables set up correctly saves a meaningful amount of setup time. Our Wosa Figma theme and Medical Figma theme are both built with this exact structure — nested Auto Layout, edge constraints on backgrounds and icons, and breakpoint-driven spacing — so you can duplicate a page, adjust content, and trust that resizing the frame will behave the way this guide describes rather than needing a rebuild. For teams that want a wider set of starting points across niches, the e-commerce Figma bundle covers several categories under one license. You can browse the full range on our Figma themes page.

Whether you start from a blank file or a kit, the underlying discipline is the same: let Auto Layout handle flow, let constraints handle anchoring and fills, let variables handle values that change by breakpoint, and let components keep every repeated piece of UI in sync. Get those four habits right and “responsive” stops being a special mode you switch into — it becomes how the file behaves by default.

Frequently Asked Questions

Do I need a plugin to make Figma responsive?

No. Auto Layout, constraints, and variables are all native Figma features and are enough to build fully responsive layouts. Plugins can speed up specific workflows, but none of them are required for the core technique.

Should every element in my file use Auto Layout?

Most content containers should, since it is what makes resizing predictable. The exceptions are elements like full-bleed background images or absolutely positioned decorative graphics, which are usually better handled with constraints inside a parent frame rather than forced into an Auto Layout flow.

How many breakpoints should a typical storefront design cover?

Three is a practical minimum for e-commerce: mobile, tablet, and desktop. Some teams add a fourth for very large desktop monitors, but three well-built breakpoints with flexible Auto Layout grids will hold up reasonably well at the widths in between.

Can I reuse the same Figma components across mobile and desktop?

Yes, and you generally should. Components that only need to resize (a product card, a button) can be a single component with Fill container behavior. Components that need a structurally different layout per breakpoint (a full nav bar versus a collapsed menu icon) are better built as variants of the same component set, so they stay linked to one source of truth.