Layout Grids & Constraints in Figma

Introduction

Behind every great UI is a solid layout. Figma gives you powerful tools to control structure and scaling through Layout Grids and Constraints. These features help you align content with precision and ensure your designs are responsive — across screen sizes and devices. In this article, we’ll explore how to apply grids, use constraints, and combine both with Auto Layout for the best results.

1. Using Layout Grids in Figma

Image Placeholder: Frame with column grid applied and grid settings panel open

Layout Grids are guides applied to frames (not individual elements) to help you align and structure content.

There are three grid types:

• Columns – Great for responsive web layouts (e.g., 12-column grids)
• Rows – Useful for vertical spacing or baselines
• Grid (pixel grid) – Perfect for icon design, spacing consistency

You can customize:

• Count (number of columns/rows)
• Type (stretch, center, left/right)
• Gutter width (space between columns)
• Margins (left/right padding)

💡 Tip: Use a 12-column grid for web and 4- or 8-point grids for mobile or modular spacing.

2. Applying Constraints for Responsive Resizing

Image Placeholder: Element with constraints panel showing “Left & Right” pinning

Constraints define how elements behave when their parent frame is resized.

To set constraints:

1. Select any element inside a frame
2. Go to the Constraints panel (right-hand side)
3. Choose how it resizes:
   • Horizontally: Left / Right / Left & Right / Center / Scale
   • Vertically: Top / Bottom / Top & Bottom / Center / Scale

Examples:

• Pin a button to the bottom-right corner of a modal → set to Right & Bottom
• Stretch a header across a card → set to Left & Right

This is essential for responsive design, ensuring that buttons, text blocks, and images behave predictably on different screen widths.

3. Constraints Inside Auto Layout Frames

Image Placeholder: Auto Layout frame with nested element and constraint settings highlighted

You can also use constraints inside Auto Layout, although their behavior is slightly different.

• Auto Layout handles spacing, direction, and padding, but you can still apply constraints to children.
• For example, if a component inside an Auto Layout needs to scale with the parent frame (instead of hugging content), set its width to “Fill Container” in the right panel.
• Constraints like “Left & Right” can still help control alignment when resizing nested frames manually.

⚠️ Note: In Auto Layout, some constraint options are disabled — because layout rules take over. Use “Fill” or “Hug” settings instead.

4. Combining Layout Grids + Constraints + Auto Layout

Image Placeholder: Web page frame with layout grid, auto layout sections, and constraints on key elements

When used together, these tools let you:

• Align UI elements consistently using grids
• Control positioning across breakpoints using constraints
• Dynamically adapt content using Auto Layout

Example Workflow:

1. Apply a 12-column grid to a frame
2. Use Auto Layout for each section (header, content, footer)
3. Apply constraints to inner elements to maintain responsiveness

This combo is ideal for designing full webpages, cards, modals, or scalable components.

Conclusion

Mastering Layout Grids and Constraints helps you design with intention and flexibility. Whether you’re building for mobile, tablet, or desktop, these tools let you create clean, scalable layouts that behave consistently. Add Auto Layout into the mix, and you’ve got a fully responsive design system — right inside Figma.