Figma Constraints and Grids
Constraints control how elements behave when their parent frame resizes. Grids give you a consistent spacing structure so your design aligns to a predictable system — the same way construction workers use a grid of measurements before they build.
What Are Constraints?
Constraints answer one question: "When the frame gets wider or taller, where does this element go?"
Frame resizes from 390px wide to 768px wide. What happens to the button? Constrained Left: [Button stays on the left] Constrained Right: [Button stays on the right] Constrained Center: [Button stays centered] Constrained Left+Right: [Button stretches to match new width] Constrained Scale: [Button scales proportionally]
Setting Constraints
Select any layer inside a frame. In the right panel, look for the Constraints section. Two dropdowns appear — one for horizontal (left/right) and one for vertical (top/bottom).
Horizontal Constraint Options
- Left – Element stays a fixed distance from the left edge.
- Right – Element stays a fixed distance from the right edge.
- Left and Right – Element stretches to maintain its distance from both edges.
- Center – Element stays horizontally centered in the frame.
- Scale – Element scales its size and position proportionally.
Vertical Constraint Options
- Top – Element stays a fixed distance from the top.
- Bottom – Element stays a fixed distance from the bottom.
- Top and Bottom – Element stretches vertically between both edges.
- Center – Element stays vertically centered.
- Scale – Element scales proportionally.
Practical Example: Responsive Header
Header Frame (resizes from 390px to 1440px)
├── Logo Image
│ Constraints: Left + Top
│ (Logo stays top-left no matter the width)
│
├── Navigation Links
│ Constraints: Center + Top
│ (Links stay centered as width grows)
│
└── Login Button
Constraints: Right + Top
(Button stays top-right no matter the width)
What Are Grids?
A grid overlays a repeating pattern on your frame to guide object placement. Grids make spacing consistent. When everything aligns to a grid, the design looks structured and professional rather than randomly placed.
Types of Grids in Figma
1. Grid (Uniform)
Draws a square grid over the frame — like graph paper. Set the cell size (for example, 8px). Every element should align to multiples of this base unit.
2. Columns
Divides the frame into vertical columns. Websites and apps traditionally use a 12-column grid. Each column has a set width, and gutters (gaps) sit between columns.
12-Column Grid on 1440px Desktop:
+-|--|--|--|--|--|--|--|--|--|--|--|--|--|-+
[Col][Col][Col][Col][Col][Col][Col]...
↑ gutter ↑ gutter
Margin: 80px left/right
Gutter: 24px between columns
Count: 12 columns
3. Rows
Divides the frame into horizontal rows. Useful for lining up elements vertically across a long page or for creating table-like layouts.
Adding a Grid to a Frame
- Select any frame.
- In the right panel, click + next to Layout Grid.
- A default grid appears. Click the grid icon on the left of the grid row to open settings.
- Choose Grid, Columns, or Rows from the type dropdown.
- Set count, gutter, margin, and color as needed.
Press Ctrl/Cmd + Shift + 4 to toggle grid visibility on and off.
The 8-Point Grid System
The 8-point grid is the most popular spacing standard in digital product design. Every dimension — padding, margin, icon size, spacing between elements — uses a multiple of 8 pixels (8, 16, 24, 32, 40, 48…).
8-Point Grid Examples: Button padding: 12px top/bottom, 24px left/right ✓ Card padding: 24px all sides ✓ Space between cards: 16px ✓ Navigation height: 56px ✓ Button padding: 11px ← Not an 8pt multiple ✗
Using 8-point spacing makes your design easier for developers to implement because they can often spot these numbers visually and use them as a system.
Grid Styles
Save a grid configuration as a Grid Style to reuse it on every frame in your file. This ensures every screen uses the same column count, gutter size, and margin — a critical consistency tool for large projects.