To add constraints in Figma, select the layer or object you want to constrain, locate the Constraints section in the right sidebar under Position, and adjust the horizontal and vertical settings.
Figma constraints are powerful tools that determine how layers respond when their parent frame is resized. By setting constraints, you can control whether elements stay fixed to an edge, center, or scale proportionally, ensuring your designs remain consistent across different screen sizes or layouts.
Think of constraints as rules for resizing. When you resize a Frame (like a screen or component), the layers inside it follow the rules you've set with constraints. This is essential for creating responsive designs and flexible components.
Steps to Add Constraints
Adding constraints to a layer in Figma is a straightforward process:
- Select the Layer: Choose the specific layer, group, or component instance within a Frame that you want to apply constraints to.
- Locate the Position Section: Look at the right-hand properties panel. Scroll down until you find the Position section.
- Click the Constraints Icon: Within the Position section, you will see two dropdown menus for horizontal and vertical constraints. Click the Constraints icon (often represented by a four-way arrow) next to the dropdown menus or click directly on the dropdowns themselves.
- Adjust Vertical and Horizontal Constraints: Use the dropdown menus that appear to select the desired constraint for both the horizontal (left/right) and vertical (top/bottom) axes.
Figma provides visual indicators to show how your chosen constraints will affect the layer during resizing.
Exploring Constraint Options
Figma offers several constraint options for both horizontal and vertical directions, allowing you to fine-tune layer behavior:
| Constraint Type | Horizontal Behavior | Vertical Behavior | Common Use Case |
|---|---|---|---|
| Left | Stays a fixed distance from the left edge. | N/A | Elements aligned to the left (e.g., logos, menus). |
| Right | Stays a fixed distance from the right edge. | N/A | Elements aligned to the right (e.g., buttons, icons). |
| Top | N/A | Stays a fixed distance from the top edge. | Header elements (e.g., navigation bars). |
| Bottom | N/A | Stays a fixed distance from the bottom edge. | Footer elements, fixed action buttons. |
| Left & Right | Maintains fixed distance from both edges (width adjusts). | N/A | Elements that should stretch horizontally (e.g., text blocks, banners). |
| Top & Bottom | N/A | Maintains fixed distance from both edges (height adjusts). | Elements that should stretch vertically (e.g., side panels). |
| Center | Stays horizontally centered. | Stays vertically centered. | Centered content (e.g., modals, main content blocks). |
| Scale | Scales proportionally with parent width. | Scales proportionally with parent height. | Images, background elements that should resize fluidly. |
You can mix and match these options. For example, you might set a button to be "Right" horizontally and "Bottom" vertically so it always stays in the bottom-right corner of its container.
Understanding and effectively using constraints is fundamental to creating dynamic and adaptable designs in Figma that work well across different screen sizes.
