Using Constraints

Constraints tell Figma how objects should respond as you resize their Frames. 

This helps you to control how designs look across different screen sizes and devices.

In this article, we'll cover:

  1. Using Constraints
  2. Horizontal Constraints
  3. Vertical Constraints
  4. Applying Constraints to an Object
  5. Ignoring Constraints
  6. Working with Grids and Constraints

You can check out the video below, or continue reading to find out more.

Using Constraints

You can apply Constraints to any object within a Frame. 

  • You can also apply Constraints to Frames you have nested within other Frames.
  • You can apply both horizontal and vertical constraints to objects.
  • You can use Constraints to define how objects respond in scrolling Prototypes. Learn more about Prototyping in Figma.
  • You can't apply constraints to Groups. A Group will inherit its bounds from the objects contained within it. They aren't considered a single object with bounds. 

Note: If you apply Constraints to a Group, we apply these to the individual objects instead.

Horizontal Constraints

Horizontal constraints define how an object behaves, as you resize the Frame along the x axis.

  • Left maintains the object’s position, relative to the left side of the frame.
  • Right maintains the object’s position, relative to the right side of the frame.
  • Left and right maintains the object’s size and position relative to both sides of the frame. This may cause objects to grow or shrink along the x axis, when resized.
  • Center maintains the object’s position, relative to the horizontal center of the frame.
  • Scale will define the object’s size and position as a percentage of the Frame's dimensions. It will then maintain those proportions as you resize it. 

    For example: The Frame's width is 100px and the object's width is 70px i.e. the object takes up 70% of its parent Frame. If we resize the Frame to 200px wide, Figma will resize the object to a width of 140px, 70% of 200px.

Vertical Constraints

Vertical constraints define how an object behaves, as you resize the Frame along the y axis.

  • Top maintains the object’s position, relative to the top of the frame.
  • Bottom maintains the object’s position, relative to the bottom of the frame.
  • Top and bottom maintains the object’s size and position relative to the top and bottom of the frame. This may cause objects to grow or shrink along the y axis, when resized.
  • Center maintains the object’s position, relative to the vertical center of the frame.
  • Scale will define the object’s size and position as a percentage of the Frame's dimensions. It will then maintain those proportions as you resize it.

Note: Depending on the object’s position, more than one Constraint may achieve the same result.

Applying Constraints to an Object

To set the constraints for an item:

  1. Select the object or parent within the Frame. The blue dotted line shows which constraints are currently applied: 

  2. Go to the Constraints settings in the Properties Panel: 

  3. Use the first drop down menu to set the Horizontal constraint: 

  4. Use the second drop down menu to set the Vertical constraint: 

  5. Or, use the diagram (to the left of the drop down menus) to set the object’s constraints:

    Tip! You can hold down the shift key to select two constraints e.g. left and right, or top and bottom.

  6. To keep the Object in the same position when scrolling, check the Fix position when scrolling box: 

  7. Now we'll apply your Constraints when you resize the Frame.

Ignoring Constraints

You may want to resize an object, without applying the Constraints. You can choose to ignore an object's Constraints.

To ignore Constraints, hold down the modifier key and resize the Frame. The modifier key is:

  • MacOS: Command (⌘)
  • Windows: Ctrl

We'll ignore the object's Constraints and scale the object.

Working with Grids and Constraints

Constraints give you a basic framework for positioning objects within a frame. When it comes to more complex designs, we need more precise control and flexibility. This ensures our designs behave when resized.

That’s where Grids come into play.

When you use a Grid within a frame, by default, Figma will align any objects within the Frame to that Grid.

Learn more about using Constraints and Layout Grids in Working with Constraints and Layout Grids.

Glossary

Frames are containers or working areas within your canvas, like an Art board. Frames have their own dimensions and Constraints. You can place objects within a frame, as well as nest frames within other frames.

Objects are elements of your design that you've added to the canvas. These can be basic shapes, images, text or vector networks.

Constraints define how objects should respond as you resize their Frames.

Components are a collection of objects or layers that together form a single UI element. You can reuse these across your designs (e.g. like a button or nav bar). When it comes to Constraints, we treat Components like Frames, as opposed to Groups.

Groups are a collection of objects that you've placed together. Unlike a Frame, a Group doesn't have its own dimensions or Constraints.

Layout grids are visual aids that give structure and coherence to your design. They help keep objects aligned within Frames. They are not visible on the final design.

Stretch grids are grids that will scale when you resize a design. Any objects within a stretch grid keep their Constraints.

Non-stretch grids are grids that we fix in both size and position, within the frame. When you resize a design, we will ignore an object's Constraints and ensure it aligns with the grid.

New to design, or need a refresh? Check out Figma's Design Dictionary for detailed descriptions of common design terms.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.