Figma · Auto Layout

How to Build a Responsive Web Card with Auto Layout

Auto Layout lets you build cards that resize and reflow on their own. This post walks through a responsive web card in Figma using wrap, min width and max width. The same rules work for any component.

Muhammad Saud Musaddiq4 min read

Design content for the card

Create two frames: one for the image, one for the title, description and buttons. That split gives the card a clear hierarchy from the start.

CoversImage frameText frameButtons

The card content split into two frames: an image frame, and a text frame holding the title, description and buttons.

Merge Content

Select both frames and press Shift + A to wrap them in an Auto Layout frame. Keep padding and spacing on multiples of 4 or 8 for a clean grid.

CoversShift + APadding8pt grid

Both frames wrapped into a single Auto Layout frame, with padding and spacing on the 8pt grid.

Wrap Features

Select the card frame and set its layout to Wrap. Content moves to a new line when the width runs out, so nothing overflows or gets cut off.

CoversWrap layoutNo overflow

The card frame set to Wrap, so the text frame moves to a new line once the width runs out.

Min Value for Content

Set a minimum width on both inner frames, for example 224 px. The content never collapses below that, even on small screens.

CoversMin width 224Inner frames

A minimum width of 224 px set on both inner frames, so the content never collapses below it.

Min/Max Card

Set a minimum and maximum width on the card frame. This keeps it from getting too narrow or too wide and makes it easy for developers to implement.

CoversMax widthMin widthDev handoff

Minimum and maximum widths set on the card frame itself, bounding how narrow and how wide it can go.

Spacing Measures

The images below show the spacing and type styles used in this card. A consistent 8pt grid and a clear type hierarchy are what make it feel finished.

Covers8pt gridType scaleHierarchy

The stacked card at 320 px wide, redlined: 24 px padding, the gap above and below every element, and the five type styles keyed beneath it.

The same card in its wide 720 by 272 layout, redlined with the same 24 px padding and gaps.

More notes