TL;DR: Build a responsive landing page in Figma by using Auto Layout for flexible containers, constraints for element anchoring, and breakpoints via frames. You’ll design once, then test and adjust at desktop, tablet, and mobile widths without redrawing.
Step-by-Step Guide
Step 1: Set up your frame and grid. Create a new frame (F) sized at 1440×900 px for desktop. Enable a 12-column grid (Layout Grid > Grid > Columns) with 24 px gutters and 80 px margins. This grid will be your alignment backbone. For mobile, duplicate the frame later and resize to 375×812 px, but don’t start there—design desktop-first for easier scaling.
If you want to dig deeper, check out our guide on Here are several options, categorized by the angle of the ar.
Step 2: Build the header with Auto Layout. Select the header frame (e.g., logo + nav links + CTA button). Press Shift+A to wrap them in Auto Layout. Set direction to horizontal, spacing to 24 px, and padding to 24 px. For responsiveness, change the nav links’ “Resizing” property to “Fill container” so they stretch or shrink. For the logo, set “Hug contents” to keep its size stable. This makes the header reflow automatically when you resize the parent frame.
Step 3: Create the hero section with flexible text. Add a heading, subheading, and button. Select all, then Shift+A to group vertically. Set the text layers to “Fill container” horizontally. For the heading, set “Min width” to 0 in the Auto Layout panel—this allows text to wrap instead of overflowing. Add a max-width constraint (e.g., 600 px) on the container so it never becomes too wide on large screens.
Step 4: Use constraints for side-by-side content. For a two-column hero (text left, image placeholder right), place both in an Auto Layout frame set to “Horizontal.” Set the left column to “Fill container” and the right column to “Fixed width” (e.g., 500 px). On mobile, change the direction to “Vertical” via the dropdown in Auto Layout, and the image will stack below. Test by dragging the frame width.
Step 5: Test breakpoints. Duplicate your main frame (Ctrl+D) and rename it “Mobile.” Change its width to 375 px. Auto Layout will compress content, but you’ll need to manually adjust font sizes (use the “Text” tool’s “Type scale” presets) and reduce padding from 24 px to 16 px. For tablet (768 px), duplicate again and tweak spacing. Tip: Use “Interactive Components” or “Variant” for button states, but keep layout testing simple—just resize the frame live.
Step 6: Polish with constraints inside Auto Layout. For elements like icons or badges inside a card, use “Constraints” (top, left, right, bottom) only when NOT in Auto Layout. Inside Auto Layout, rely on “Alignment” and “Spacing” instead—this avoids conflicts. For images, set them to “Fill container” and enable “Clip content” to avoid distortion.
Step 7: Final responsive check. Use the “Prototype” mode, then set the starting frame to Desktop. Click “Device” and choose iPhone 14 Pro to simulate. Drag the frame edges in design mode to see live reflow. Adjust any fixed pixel values to “auto” or “%” where needed. Save as a component for reuse.
FAQ
Q: Why use Auto Layout instead of manual resizing?
A: Auto Layout automatically recalculates spacing and alignment when you change the frame width, eliminating manual repositioning and reducing errors across breakpoints.
Q: How do I handle images that need to crop on mobile?
A: Place the image inside a fixed-height container (e.g., 300 px), set its “Object fit” to “Cover,” and enable “
Leave a Reply