Constraints for responsive behavior in Figma - Step-by-Step Guide

Introduction

Constraints in Figma help your design elements adjust automatically when the frame size changes. This makes your designs responsive, so they look good on different screen sizes without manual resizing.

When designing a dashboard that should look good on both desktop and tablet screens

When creating buttons that stay aligned to the right edge of a panel regardless of panel width

When you want text boxes to stretch horizontally as the frame grows wider

When you need icons to stay centered inside a resizable container

When building a navigation bar that should keep spacing consistent on different screen widths

Steps

Step 1: Select the design element

- Canvas or Layers panel

The element is highlighted and its properties appear in the right sidebar

Step 2: Locate the Constraints section

- Right sidebar under the Design tab

You see a box with arrows and options for horizontal and vertical constraints

Step 3: Click the horizontal constraint option

- Constraints box in the right sidebar

You can choose Left, Right, Center, Left & Right, or Scale for horizontal behavior

Step 4: Select the vertical constraint option

- Constraints box in the right sidebar

You can choose Top, Bottom, Center, Top & Bottom, or Scale for vertical behavior

Step 5: Resize the parent frame

- Canvas by dragging frame edges

The selected element adjusts its position and size according to the constraints set

Before vs After

Before

A button inside a frame stays fixed in size and position when the frame width changes, causing overlap or empty space

After

The button stays aligned to the right edge of the frame and resizes or moves smoothly as the frame width changes

Settings Reference

Horizontal Constraints

📍 Right sidebar > Design tab > Constraints section

Controls how the element moves or resizes horizontally when the frame changes size

Default: Left

Vertical Constraints

📍 Right sidebar > Design tab > Constraints section

Controls how the element moves or resizes vertically when the frame changes size

Default: Top

Common Mistakes

Not setting constraints on elements inside a resizable frame

Elements will not adjust their position or size, breaking the responsive layout

Always set appropriate horizontal and vertical constraints for elements inside frames that will resize

Using 'Scale' constraint without testing on different frame sizes

Scaling can distort elements unexpectedly if the frame size changes a lot

Use 'Scale' carefully and preview on multiple sizes; prefer 'Left & Right' or 'Top & Bottom' for predictable resizing

Summary

Constraints control how design elements move and resize inside frames when the frame size changes

Set horizontal and vertical constraints to make your designs responsive across screen sizes

Test resizing frames to ensure elements behave as expected and avoid layout issues