Figma's responsive features are genuinely good and they're also widely misunderstood. Auto layout and constraints make your canvas behave sensibly when you drag a frame handle. They do not, on their own, produce a responsive website. Worth understanding why, because it changes how you design.

The underlying mismatch

A Figma frame is a fixed-size canvas and every layer inside it has an absolute x and y. A browser viewport is whatever width the visitor's window happens to be, and the layout engine flows content into it.

When a converter reads your file, it mostly reads coordinates. Figma's own Dev Mode is a fair demonstration: select a layer, look at the CSS it generates, and you'll get fixed pixel values. Layers that sit in auto layout come out much closer to real flexbox. Layers that are freely positioned come out as absolute positioning, because that's what they are.

So the single most useful thing you can do for responsiveness is put your design in auto layout instead of eyeballing positions.

Auto layout is the part that translates

Auto layout is Figma's flexbox. A horizontal auto layout frame with 24px spacing is display: flex; gap: 24px. That's a real mapping, not a metaphor, and any decent converter will pick it up.

The resizing modes are the important bit:

• Fixed pins a dimension to a number.
• Hug contents shrinks the frame to its children, which is roughly width: fit-content.
• Fill container makes a child expand into the available space, roughly flex: 1.

A nav bar should be a horizontal auto layout with the logo hugging, a spacer filling, and the links hugging. Resize the frame and it behaves. Build the same nav by positioning three elements by eye and it will not.

Min and max width are worth setting too. Select a width field and you can add a minimum or a maximum, which is how you stop a text column becoming a 1400px-wide line of unreadable body copy. Max width on your main content container is the single most useful constraint in the whole file. For reference, our renderer caps content at 1200px, which is a fairly typical number.

Auto layout also has wrap, on horizontal flows only. That's flex-wrap: wrap, and it's how a row of four cards becomes two rows of two on a narrower screen without you designing a second version.

Constraints are for the layers you didn't put in auto layout

If a layer sits directly on a plain frame, constraints control what happens when the parent resizes. Left, right, centre, scale, or left-and-right together to stretch. They're the older mechanism and they're still what you want for background layers and absolutely-positioned decoration.

Constraints tell Figma how to behave when you drag a handle. Whether they survive into code depends entirely on the tool you use to convert, so don't assume.

You still need two frames

Here's where I'd push back on the idea that responsiveness is something you can fully solve on a single canvas.

Scale a 1440px desktop layout down to a 390px phone and your 16px body text becomes about 4px. Nobody wants that. Real mobile layouts don't scale, they rearrange. A three-column feature row stacks vertically. A horizontal nav becomes a hamburger. The hero image that sat beside the headline goes above it, or disappears. Half your desktop copy gets cut because it doesn't earn the space.

None of those are transformations a machine can infer from the desktop frame. They're editorial decisions.

That's why our plugin asks for a desktop frame and a mobile frame per page rather than trying to derive one from the other. Our renderer picks between them at a 500px viewport breakpoint and scales the chosen frame to fit the window. Two frames, drawn deliberately, will beat any amount of clever automatic scaling.

Practical sizes: 1440px wide for desktop and 390px for mobile cover most of the real world. Add a 768px tablet frame only if your design genuinely changes there, because a third frame is a third thing to keep in sync every time you edit.

A workable process

Design the desktop frame first with auto layout throughout and a max width on the content container. Then duplicate it, resize the frame to 390px, and fix what breaks. If you built it in auto layout, a surprising amount survives the resize and you're editing rather than rebuilding. If you built it by positioning layers by hand, you're rebuilding, and now you understand the argument for auto layout.

Name both frames clearly. Whatever tool publishes them needs to know which is which.

When you want to see the two frames as a live site, the Figma plugin will publish them.