delasign
delasign

How to set the constraints of a UI element in Figma

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 07/26/2023 at 13:50
Last Updated on 08/03/2023 at 16:15
A flower that represents Figma with the text “Constraints” beneath it.

A step by step guide for setting constraints of a UI element, such as text, an image, a shape or a component, within a Frame (artboard) in Figma.

Subscribe
What are Digital Interface Constraints?

Step One: Select a UI element

A screenshot of Figma that shows you a frame with the text “HELLO” centered on the screen. The text has been selected.

In the Figma project, select a UI element.

Step Two: Change the Constraints

A screenshot of Figma that shows you a frame with the text “HELLO” centered on the screen. The text has been selected. Highlighted on the right menu bar is the location where the constraint options are found.

On the right menu side bar, under Constraints change the vertical and horizontal constraints. This will dictate the position relative to the screen that the object should be placed.

The options for the horizontal constraints (top option) include:

  • Left
  • Right
  • Left and Right
  • Center
  • Scale
A screenshot of Figma that shows you a frame with the text “HELLO” centered on the screen. The text has been selected. Highlighted on the right menu bar is the pop up that appears if you click the constraint input for the horizontal constraint. The options that appear are left, right, left and right, center and scale.

The options for the horizontal constraints (top option) include:

  • Top
  • Bottom
  • Top and Bottom
  • Center
  • Scale
A screenshot of Figma that shows you a frame with the text “HELLO” centered on the screen. The text has been selected. Highlighted on the right menu bar is the pop up that appears if you click the constraint input for the vertical constraint. The options that appear are top, bottom, top and bottom, center and scale.

Step Three: Place the UI element

A screenshot of Figma that shows you a frame with the text “HELLO” centered on the screen. The text has been selected. Highlighted on the right menu bar is are the x, y, width and height inputs that allow you to change the location and size of the UI element.

If you need to, change the location and size of the UI element.

Step Four: Test

A screenshot of Figma that shows you a frame with the text “HELLO” centered on the screen. The text has been selected. The frame has changed dramatically in dimensions, but the text has not changed its relative position and remains centered on the screen, matching the constraints that we set.

Resize the frame and confirm that everything works as expected.

Looking to learn more about things you can do with Figma ?

Search our blog to find educational content on learning how to use Figma.

Search our Blog

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
delasign logo
You imagine it, we create it.

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details

We'd love to chat &
see how we can help.