Layout Basics for Product Screens: Grids, Constraints, and Repeatable Patterns in Figma

Layout Grids: Your Placement “Ruler” for Product Screens

When you design product screens, the fastest way to make layouts feel consistent is to place everything against a grid. In Figma, layout grids are attached to a frame and act as a visual guide for alignment and spacing. They don’t move objects for you; they help you place objects predictably.

Common grid types and what they’re for

• Columns: Most common for mobile and web UI. Helps you align cards, text blocks, and buttons to consistent left/right edges.
• Rows: Useful for vertical rhythm (e.g., aligning sections, repeated modules, or baseline spacing).
• Grid (square): Helpful for icon design or dense, modular layouts; less common for typical product screens.

Key grid terms (practical meaning)

• Margins: The “safe area” on the left and right (and sometimes top/bottom). Your content usually stays inside these.
• Gutters: The space between columns. Gutters create consistent gaps between modules.
• Count: Number of columns/rows. Mobile often uses 4 columns; web commonly uses 12.
• Type: Stretch vs Center: Stretch adapts to frame width (common for responsive). Center keeps a fixed grid centered in the frame (common for fixed-width web containers).

How to add a layout grid to a frame

1. Select the screen Frame (not an object inside it).
2. In the right panel, find Layout grid and click +.
3. Click the grid settings icon and choose Columns (or Rows).
4. Set Count, Margin, and Gutter to match your product’s spacing system.
5. Toggle grid visibility as needed (you can also quickly show/hide with the grid eye icon in the panel).

Suggested starting point (mobile): Columns = 4, Margin = 16, Gutter = 16, Type = Stretch. This gives you a simple, repeatable structure for most app screens.

Constraints: How Elements Behave When a Frame Resizes

Constraints define how an object is positioned and sized relative to its parent frame when that frame changes size. This is essential for responsive behavior: when you test different device sizes or adjust a frame, constraints prevent UI from drifting or breaking.

Constraint directions you’ll use most

• Left / Right: Pins an object to the left or right edge of the parent frame.
• Top / Bottom: Pins an object to the top or bottom edge.
• Center: Keeps an object centered on an axis.
• Left & Right (stretch): Keeps both side distances, so the object stretches horizontally as the frame grows.
• Top & Bottom (stretch): Keeps both vertical distances, so the object stretches vertically as the frame grows.

Constraints are set per object (or group/frame) and depend on the object’s parent. If something behaves unexpectedly, check whether it’s nested inside another frame and whether that parent is the one resizing.

Practical constraint cases you’ll use in product screens

1) Pinning a header to the top

• Set the header container constraints to Top and Left & Right so it stays at the top and spans the width.
• If the header has a background rectangle, that rectangle should also be Left & Right so it stretches with the frame.

2) Stretching a content area

• For a scrollable content region placeholder (e.g., a big content frame), set constraints to Top & Bottom and Left & Right so it expands/shrinks with the screen height and width.
• Keep internal cards pinned to the top of that content region (or use consistent spacing), so they don’t float unpredictably.

3) Keeping a primary button anchored

• For a bottom CTA button, set constraints to Bottom and Left & Right so it stays near the bottom and stretches across the safe area.
• If you want a fixed-width button centered, use Bottom and Center (horizontal).

Walkthrough: Build a Home Screen with Grid + Constraints

In this exercise, you’ll create a simple home screen layout that remains stable when resized. You’ll use a column grid for placement and constraints for responsive behavior.

Continue in our app.

• Listen to the audio with the screen off.
• Earn a certificate upon completion.
• Over 5000 courses for you to explore!

Or continue reading below...

Download the app

Step 1: Create the frame and apply a column grid

1. Create/select a mobile home screen frame (any common mobile size is fine).
2. Add a Columns layout grid to the frame.
3. Use a practical setup such as: Count 4, Margin 16, Gutter 16, Type Stretch.

Placement rule for this chapter: Align key edges (text blocks, cards, icons, buttons) to the column boundaries and keep outer padding inside the grid margins.

Step 2: Add a header area aligned to the grid

1. Draw a header background rectangle across the top, spanning from left margin to right margin (visually aligned to the grid).
2. Add a title (e.g., “Home”) aligned to the left margin/first column edge.
3. Add a right-side icon (e.g., profile or settings) aligned to the right margin/last column edge.

Apply constraints (header)

• Select the header background: set constraints to Top and Left & Right.
• Select the title text: set constraints to Top and Left.
• Select the right icon: set constraints to Top and Right.

Step 3: Create a featured content card that follows the grid

1. Below the header, draw a card rectangle aligned to the grid margins.
2. Place card content (thumbnail area, title, subtitle) aligned to the same left edge and consistent internal padding.
3. Keep the card width spanning the grid content area (inside margins).

Apply constraints (featured card)

• Select the card container: set constraints to Top and Left & Right so it stretches horizontally with the frame.
• Select card text elements: set constraints to Left (and Top), so they keep their left alignment as the card grows.
• If the card has a right-side thumbnail: set it to Right so it stays anchored to the card’s right edge.

Step 4: Add a bottom navigation bar anchored to the bottom

1. Create a bottom nav background rectangle aligned to the grid margins (or full width if your design system uses edge-to-edge nav).
2. Add 3–5 nav icons/labels evenly spaced.

Apply constraints (bottom nav)

• Select the nav background: set constraints to Bottom and Left & Right.
• Select each nav item group: set constraints to Bottom. If you want them to keep relative spacing, place them carefully and consider grouping them inside a container that is Left & Right (so the container stretches while items remain positioned within it).

Step 5: Test by resizing the frame (the real check)

1. Select the home screen frame.
2. Resize it wider and narrower (simulate different device widths).
3. Resize it taller and shorter (simulate different device heights).

What you should see:

• The header stays pinned to the top; the right icon stays on the right.
• The featured card stretches horizontally but keeps internal alignment.
• The bottom navigation stays pinned to the bottom.

If something breaks: click the element and verify (1) its constraints, and (2) whether its parent is the frame you’re resizing. Incorrect nesting is a common cause of “why didn’t my constraints work?”

Pattern Library Exercise: Header, Content Card, Bottom Navigation (Grid + Constraints)

This exercise creates a small, structured pattern library so you can reuse predictable building blocks across screens. The goal is not just visual consistency, but behavior consistency when frames resize.

Set up a “Patterns” frame for testing

1. Create a new frame named “Patterns”.
2. Apply the same Columns layout grid you used on the home screen.
3. Inside it, create three labeled sections: Header Pattern, Card Pattern, Bottom Nav Pattern (simple text labels are fine).

Pattern 1: Header

Build

1. Create a header container (background rectangle or frame) aligned to the grid margins.
2. Add left title text aligned to the left margin/column edge.
3. Add a right-side icon aligned to the right margin/column edge.

Constraint rules

• Header container: Top, Left & Right.
• Title: Left, Top.
• Right icon: Right, Top.

Test: Resize the parent frame wider. The title stays left, icon stays right, header spans.

Pattern 2: Content Card

Build

1. Create a card container aligned to the grid margins.
2. Add a title and supporting text aligned to the left edge with consistent padding.
3. Optionally add a right-side thumbnail or chevron aligned to the right edge.

Constraint rules

• Card container: Left & Right, Top.
• Text stack: Left, Top.
• Right accessory (thumbnail/chevron): Right, Top (or Center vertically if you want it vertically centered within the card).

Test: Resize the parent frame. The card widens; text stays aligned; right accessory stays pinned to the right.

Pattern 3: Bottom Navigation

Build

1. Create a bottom nav container aligned to the grid margins (or full width if that’s your rule).
2. Add nav items (icons/labels) placed consistently across the width.

Constraint rules

• Nav container: Bottom, Left & Right.
• Nav items: Bottom. If you group items, ensure the group is positioned correctly and does not have conflicting constraints.

Test: Resize the parent frame taller/shorter. The nav stays at the bottom. Resize wider/narrower. The container stretches; items remain in their intended positions.

Quick Troubleshooting Checklist (Grid + Constraints)

Mini Practice: One Rule Per Pattern

• Header rule: Left title stays left; right action stays right; background stretches.
• Card rule: Container stretches; left content stays left; right accessory stays right.
• Bottom nav rule: Always pinned to bottom; container stretches across safe area.