How to Use Constraints in Figma

In this post, we are covering the basics of one key feature in responsive design: constraints. User Interface (UI) design and prototyping must ensure that layouts remain consistent and intact across different devices and screens, so if you are on your personal journey to becoming a UI Superhero, Constraints and Auto-Layouts will be your ultimate sidekicks!

This post is based on one of the classes from my Figma UI UX Essentials Course. When you become a BYOL member, you gain access to this course as well as my 30+ additional courses on After Effects, Photoshop, Illustrator, Lightroom, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up!

Time to go responsive!

Constraints, Parents, Children, and Siblings.

I’ll begin by setting a golden rule: Constraints define how a Child object responds when a Parent frame is resized. Think about scaling up your prototype from iPhone to iPad, or from mobile phone to desktop screen. Auto Layouts also have a significant role in keeping everything together, but we will keep our focus on Constraints.

Now let’s clarify these relationships:

• A frame becomes a Parent when it contains objects within it, like text, shapes, or images. Frames, Components, and Groups are Parents.

• An object contained within a Parent is called a Child. When a Parent frame holds more than one Child object, we call these Siblings.

• One more thing before we move on: Frames, Components, and Groups can be both Parents and Children.

There can be some onion layers in responsive design, but we’ll take it step-by-step so you can relax and have fun while you are learning.

In this guide, we will be designing a basic navigation bar, containing a logo for Scott Shoes and three actionable icons: Home, Search, and Settings.

Looking at the image below, the Parent frame is called Mobile. This Parent holds the following children, or siblings:

• two text elements

• four icons, which are frames with vector elements inside.

• an auto-layout button frame

Applying Constraints to Child Objects

Let’s arrange our objects to form the navigation bar layout at the top of our “Mobile” Parent frame. We’ll place the logo to the left and the actionable icons to the right. You can use Layout Grids to keep things balanced and accessible.

Next, we duplicate “Mobile,” using the shortcuts Command + C and Command + V on a Mac or Control + C and Control + V on a PC to copy and paste it. We can also hold Option on a Mac or Alt on a PC and drag the frame to the side to duplicate it. Let’s name the second frame “iPad.”

Now, if we click on “iPad” to select the frame and change its width, we can observe:

• The logo held its initial position.

• The icons didn’t hold their initial layout position.

Let’s see why this happened:

Looking at the logo, we can see that text elements and shoe frame have a default constraint setting. They are constrained to the top and left side of the parent frame. This is also happening with the icons. In other words, children are holding their parent’s hands at their top and left side. When we change the parent’s frame width, they will hold their position to the left corner.

Let’s try changing the Constraint rules for the settings icon placed to the right of the Parent. We click on its frame to select it, navigate to the Constraints boxin the Properties panel and click on the right marker to update the rule. We can also use the drop-down next to the Constraints box and choose Right.

Let’s see what happens now if we change the Parent frame’s width.

It worked! Now we can do the same for the remaining icons and move on with our design. 

Or is there a more efficient approach to this…?

Timeout #1

If you want to be sure that your UI prototypes flow smoothly across different devices and screens, understanding responsive design is a valuable first step.

Applying Constraints to Frames

We can apply Constraint rules to frames. For this example, we’ll group our three icons inside a new frame. Keeping them selected, we right-click with our mouse over them, and choose “Frame selection” from the flyout menu. There’s also a shortcut for this: Command + Option + G for Mac or Control + Alt + G for PC.

Take a deep breath, now. This may feel complex, but it’s not that complicated, all it takes is some hierarchical thinking. Remember when I shared with you that “frames can be both parents and children”? This is it, Figma allows us to nest Parent frames inside a Parent frame, and these become Child objects.

Have a look at the image below. I’ve grouped the logo inside a frame as well, to make it easier to understand:

• Parent frame: “Mobile”

• Siblings: “Logo,” “Icons” and “Purchase Button” frames.

I’ll give you a break from here on because we’re working at the Essentials level, and I want you to stay focused on constraints for now. Just remember that responsive design is a multi-layered process that takes a little time to get used to. 

Let’s move on and apply Constraint rules to our new Icons frame!

We are back to the easy stuff! With our Icons frame selected, we move to the Constraints box and click on the Right marker to apply the rule.

As we can see, there are two Constraint lines showing that this object is now bound to its top and right position. Let’s adjust the Parent frame’s width again and evaluate our icons’ responsive behavior.

Let’s work on our Purchase button Auto Layout frame. We want this call-to-action to stay fixed to the bottom of our Parent frame.

We select it with the Move tool (Shortcut V), navigate to the Bounding box, and click on the Bottom marker to set the rule.

Time to evaluate the Constraints we have applied to our Auto Layout frame.

OK, the button feels a bit odd, fixed on that lower-left corner. In the initial layout, it was centered to the screen, so let’s update Constraint rules and optimize our prototype’s user experience.

To make it more dynamic, we want the button’s own width to expand or contract along with the Parent’s width.

Once again, quick and easy! We select the button, move to the Constraints box, click the drop-down menu, and select left and right. We could also hold Shift and click on both Left and Rightmarkers in the Constraints box.

And let’s have a look at how our call-to-action buttons respond to responsiveness. Let’s select our Parent frame, click and hold the edge or one of the corner handles, and drag to change width size.

Awesome! The button’s appearance is now automatically adjusting to its Parent frame’s new width size, keeping the initial distance to both frame edges. Good responsive design! The Scale rule has a similar effect to Left and Right, but distance to frame edges suffers a proportional increase or reduction as the screen size changes.

If we wanted to keep the Purchase button centered on screen without dynamic behavior all we had to do was select Center as horizontal Constraint rule.

Pro tip: Constraint options are only available when an object is placed inside a Parent frame. The example below shows an Icons frame duplicate that I’ve dragged to the workspace, or as I call it, “no man's land.” When I select it with the Move tool, you can see that the Constraints settings are gone from the Properties panel! If we move the duplicate back into the Parent frame, they will become active once again.

Timeout #2

Responsive design is only one part of the whole process of designing for aesthetics and functionality. Expand your knowledge on efficient UI design and grow as a skilled professional.  

Wrapping up our navigation bar design, in three quick steps and a quick review.

With both Logo and Icons frames selected, we pick the Frame tool from the Toolbar (shortcut F) and click and drag to add a new frame to our prototype. Because we had these frames selected, they are automatically placed inside the new one. I’ll call it Nav to make it easier to organize.

The Nav frame is now Parent to both Logo and Icons frames, but a Child object to the iPad Parent frame. Boom! Inception-level fun!

Remember that we’ve applied Constraint rules to the Logo and Icons frames. What happens now that they are part of a whole new frame?

Both Logo and Icons frames keep their Constraint Rules but now referenced to their new nesting frame. This means that we must set new rules to the Nav frame.

Quick and easy! I’m sure you know what needs to be done! We select the Nav frame, navigate to the Constraints box and set the Left and right Constraint rule! This will do the trick!

And there we have it!

Plugins are fun and game changing. I could dedicate hours to so many of them! I find Unsplash a valuable option to show you, not only because of the vast offer and simplified license terms, but also for not being based on a profit goal, for giving anyone the opportunity to do some real and meaningful creative work, no matter if they are freelancers, starting a new business, or going through an internship in a huge company.

What 's Next?

Go further with Figma by joining BYOL. As a BYOL member, you will gain access to my  Figma UI UX Essentials Course as well as my 30+ additional courses on After Effects, Photoshop, Illustrator, Lightroom and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up! 

See you in class! – Dan