How to use auto layout to build responsive UI designs faster

Design & Visuals

Jump to tools ↓

A practical guide to using auto layout to speed up responsive UI design.

Who is this for?

Product designers, UX/UI designers, front-end developers collaborating on UI layouts.

Before you start

Basic familiarity with design tools, understanding of responsive design concepts.

Jump to tool:

Figma

Canva

🏆 Recommended for this task

🏆 Recommended

Figma

Best for: Designers, product teams, and developers who need to ideate, design, prototype, and ship products together. It helps ensure consistency across teams with shared design systems.

Free Plan Available$3 / month

How to in Figma

Select Elements for Auto Layout: Click the heading, subtitle, and button. Hold Shift and click to multi-select. Press Shift+A to convert to an Auto Layout frame.
Create Auto Layout Frame: With the elements selected, confirm the Auto Layout frame appears in the canvas and is shown with pink spacing handles.
Set Gap Between Items: In the right-hand Auto Layout panel, set Spacing Between Items (gap) to 32 px.
Center or Align Content: Use the alignment controls to align left, center, or right within the Auto Layout frame.
Switch Orientation to Vertical: In the Auto Layout properties, switch direction from horizontal to vertical to stack items.
Create Sub-Layout for Image and Text: Select the image and the text container, then press Shift+A to create a new horizontal Auto Layout container.
Set Gap Between Sub-Layout and Text: Set the gap between the sub-layout and the text content to the desired value (e.g., 100 px).
Duplicate for Multiple Columns: Select the entire section frame and press Ctrl+D (Cmd+D on Mac) to duplicate. Repeat to create additional columns.
Group Sections into a Wireframe: Select multiple section frames and press Shift+A to place them in a new parent frame. Center the new frame in the canvas.
Ungroup for Individual Editing: Right-click the grouped frame and choose Ungroup to edit elements individually.
Make Sections Responsive with Fill Container: Select a child element (e.g., a button). In the resizing options, set Horizontal resizing to Fill container (and Vertical as needed). Test by resizing the parent frame.
Fine-Tune Spacing and Proximity: Adjust internal gaps (e.g., 100 px between heading and content) to improve visual balance.
Move Sections into Main Wireframe: Drag the prepared section into the main wireframe and align center. Repeat as needed for consistency.
Test and Iterate: Resize the main frame to verify responsiveness. Lock in final spacing and colors for the final design.

Try Figma Tool details

This link may be an affiliate link. If you sign up through it, we may earn a small commission at no extra cost to you.

Alternatives

Canva

Best for: Designers, marketers, and teams who need an integrated platform for creating visuals, videos, and brand assets.

Free Plan Available$120 / year

How to in Canva

Open Canva: Go to canva.com and sign in. Click Create a design.
Create With Custom Size: Click Create a design, select Custom size, set width to 1280 px and height to 720 px, then click Create design.
Search Templates: In the left panel, click Templates. Type 'magazine' or 'UI' to find starting layouts. Select a template that supports grids or frames.
Set Up Page Grid: Go to Elements > Grids. Drag a grid onto the canvas as the base for your auto-layout-like behavior.
Add Frames: Open Elements > Frames. Drag a frame onto the page to act as a placeholder for imagery.
Upload Assets: Click Uploads in the left panel. Choose Upload media and select your images from disk, then drag them into frames.
Apply Brand Fonts: Click a text box. In the top font menu, select your brand font. Use the Change All option to apply across the page.
Create Text Blocks: Add Heading and Body text. Use consistent font sizes and line heights for uniform layouts.
Duplicate Pages: In the bottom page panel, right-click a page and choose Duplicate page to create multiple similar sections.
Organize With Guides: Go to View > Show rulers and guides. Use Add guides to create vertical columns or margins to guide alignment.
Group And Align: Select multiple elements and choose Group. Use Align left/center for precise placement.
Link Pages For PDF: Highlight text, click the Link icon, and choose a page to link to within your document.
Export And Save Template: Share > Download. Choose PDF Standard for digital distribution or PDF Print for print-ready output. Save as a copy for template reuse.
Save As Template (Pro): In Canva Pro, use Brand Templates to publish the design as a template and spawn copies for new projects.
Save As Copy (Free): In Canva Free, choose Make a Copy to preserve the original design and work on a fresh copy for your final output.

Tool details

Quick Comparison

Tool	Free Plan?	Min Price
Figma	Yes	$3 / month
Canva	Yes	$120 / year

Which tool should you choose?

Figma

Figma's Auto Layout accelerates responsive UI design by grouping items, controlling gaps, and allowing containers to fill space. With simple keyboard commands and live preview, you iterate faster, maintain consistency, and adapt layouts without manual reshaping. It's ideal for rapid wireframes and scalable designs.

Canva

Canva stands out for rapid, visual-driven layout assembly. Its drag-and-drop interface, prebuilt grids, and flexible templates let you assemble responsive UI designs quickly. With consistent typography and reusable blocks, you can iterate layouts faster than from scratch, while maintaining brand cohesion across pages.