Using Constraints

Constraints allow you to specify how you want an object to respond, when the Frame it is contained within is resized. Constraints can be applied to Frames, as well as individual objects.

You can set both the horizontal and vertical constraint for each object or parent, as well as determine how an object will respond to scrolling during Prototyping. Learn more about Prototyping in Figma.

This is perfect for when you want to control how a design looks across different screens sizes or devices.

In this article, we'll cover:

  1. Horizontal Constraints
  2. Vertical Constraints
  3. Applying Constraints
  4. Working with Grids and Constraints

Check out the video below, or keep reading to find out more.

Horizontal Constraints

The Horizontal constraint determines how you want the object to behave when its containing Frame is resized horizontally.

  • 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 horizontally, when resized.
  • Center maintains the object’s position, relative to the horizontal center of the frame.
  • Scale will fix the object’s size and position as a percentage and scale it accordingly. For example: if the object takes up 70% of the frame or parent, horizontally, with 10% offset on the left and 20% on the right, the same proportions will be maintained when it is resized.

Vertical Constraints

The Vertical constraint determines how you want the object to behave when its containing Frame is resized vertically.

  • Top maintains the object’s position, relative to the top of the frame.
  • Right 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 vertically, when resized.
  • Center maintains the object’s position, relative to the vertical center of the frame.
  • Scale will fix the object’s size and position as a percentage and scale it accordingly. For example: if the object takes up 10% of the frame or parent, vertically, with 5% offset from the top and 75% from the bottom, the same proportions will be maintained when it is resized.

Depending on the object’s position to the frame, more than one of the constraint options may achieve the same result. 

Applying Constraints

To set the constraints for an item:

  1. Select the object or parent within the Frame: 

  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.

    The blue lines indicate which constraints are currently selected: 

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

  6. If you want the object to remain in the same position when scrolling - like a navigation bar - check the box next to Fix position when scrolling

  7. When you resize your image, your Constraints will be used: 

Groups vs Frames

As a Group is not an object itself, it doesn’t have explicit bounds or affect Constraints. If you have your objects in Groups, then you won’t be able to apply Constraints to the Group itself. If you do apply a Constraint to a Group, those Constraints will be applied to any child objects within the Group instead.

Working with Grids and Constraints

Constraints are great at giving you a basic framework for where object are positioned within a frame. When it comes to creating more complex designs, we need more precise control and flexibility to ensure 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 together in our Working with Constraints and Layout Grids article.


Glossary

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

Objects are elements of your design that have been added to a canvas, like shapes, images, text and vector networks.

Constraints determine how an object or objects will respond, when a frame or design is resized.

Components are a collection of objects or layers that together form a single UI element (e.g. a button) that can be reused across your designs. When it comes to Constraints, Components are treated like Frames, as opposed to Groups.

Groups are a collection of objects that have been placed together, and are nested within a frame. Unlike a Frame, a Group doesn't have its own size or constraints.

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

Stretch grids are grids that will scale when a design is resized. Any objects within a stretch grid will retain their constraints.

Non-stretch grids are grids that are fixed within the frame, in both size and position. When a design is resized, they will ignore an object's individual constraints and ensure it aligns with the grid instead.

New to design, or need a refresh? Make sure to 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.