Tips for using Constraints in your workflow

Remember the good ‘ol era of tech design, when you had to create interfaces — at most — for a PC and a Mac? Me neither. That universe seems light years away in today’s screen-addicted world.

Designers’ jobs have grown exponentially harder with the introduction of mobile phones and tablets. You’re designing for endless adaptations and contexts, a never-ending Sisyphean task.

We feel your pain at Figma, which is why we built our tool with a powerful constraints feature. It allows you to fix elements of your design to different sides of their parent frame. If you set your constraints correctly, your design will scale to fit any screen size.

You can find them here, in the righthand properties panel when you select a frame:

Constraints are amazing, but they take a little getting used to. In Figma, we let you fix objects to the left, right, top, bottom, center, scale, left & right, or top & bottom. You can play around with a simple button in a frame to see how objects react to different types of constraints.

Need help figuring out how to put them into practice? We collected five ways constraints can make your life a lot easier, ranging from beginner level to intermediate.

1) Pinning a button in the corner

A lot of mobile UIs have action buttons situated in the same place every time. For example, Google’s Material Design Guidelines favor a bottom right hand button (also known as a FAB) that encourages the user to take an action.

With Constraints, you can set that button to the bottom and right hand corner of its parent frame. That ensures the button doesn’t float around the screen when the screen size expands — it stays exactly where you want it.

2) The magic of components + constraints

You can work some fun design magic by using Figma’s components feature in connection with grids. Components (which other applications call symbols) allow you to turn parts of your design into repeating, mirrored instances. When you make changes to the original, the changes are reflected anywhere else you used that component. (You can read more about components here.)

Now, to add constraints to this: Once you’ve constrained the key parts of your design to the sides of the frame, turn the frame into a component. Duplicate the frame for multiple screen sizes. Now, when you change attributes of the original, like color or text size, you can immediately see them reflected in different screen sizes.

3) The magic of constraints + grids

Alright, buckle in because we’re getting a little more advanced. With Figma, you can use constraints to snap objects to a grid. This is particularly handy for something like a navigation bar at the bottom of an app.

To make a flexible nav-bar in Figma, create the frame that serves as the phone screen then nest the nav-bar frame at the bottom of the screen.

Set the nav-bar constraints to left & right, and bottom. With that nav-bar frame still selected, choose a layout grid from the right-hand properties panel and set the type to “stretch”.

Then, place an object — like a circular button — inside each grid column. Set the constraints on each button to be centered. When the screen size changes, your buttons will adapt accordingly. For an even deeper dive into grids, check out this post.

4) Table cells

You can use constraints to make reusable table cells designs that are flexible. Designers often need table cells to present lists of people or information, and adding constraints to the basic cell makes it easier to adapt. For example, I grouped text and an avatar together (by pressing control g), and constrained that to the center left of the frame. I then grouped text and a rectangle with rounded corners together into a button and constrained that to the center right of the frame.

As you can see, the component now reacts as you’d hope it would, with each piece of information hugging the side of the frame where it belongs, regardless of frame size.

5) Illustrations

Lastly, we figured we’d throw in a fun constraints example just for kicks. You can put horizontal or vertical constraints on illustrations or drawings to add an extra bit of humor. You can turn a hot dog into a slinky version of itself, or turn a dog that looks like a hot dog into even more of one. We played around with it for one of our designer’s recent birthdays at Figma.

Learn more about the ins and out of Constraints in our Help Center.