Embracing Constraints
Figma, obey me!
Intro
In this article, we’ll take a journey from a somewhat philosophical argument to the pure nerdy application of constraints and auto layouts in Figma to create complex yet obedient components and pages.
I will finish up with some practical examples, so if you’re here for more action than talk, scroll down to videos under the article.
Disclaimer: In this article, I’m discussing software features available in Figma as of spring 2021. They might become outdated/improved with time.
From constraint to infinity
We have to limit ourselves to become limitless.
— Phil Hansen, Embrace the Shake
I’m a firm believer that constraints can not only alleviate decision anxiety but can also breed creativity.
In the world of fine arts, the examples of creative constraints are countless: from the format of a haiku to Igor Stravinsky composing The Rite of Spring without using any time signatures. You can learn more about creative limitations in this great TED talk by Phil Hansen.
The art of Figma constraints lies within the challenge of doing more with less, of giving ourselves and our frames fewer choices and fewer options to surprise us. How can we constraint our design elements to become limitless?
What are constraints and how to use them?
The article by Figma explains that “(Constraints) allow 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.” In layman’s terms, using constraints means giving the elements of your composition certain jobs to perform.
Let’s have a look at the types of jobs our elements can do — You can fix objects to the left, right, top, bottom, center, left & right, or top & bottom (or you can choose your element to scale). You add constraints in relation to the horizontal and the vertical axis of your parent frame.
So far, so good. We’ve limited the behavior of our elements. They perform one ascribed function and nothing else. But what if we want the elements in a composition to interact with each other? What if we want to create a flexible main component that can be adjusted to fit any copy, support different types of buttons, have padding and spacing that’s always consistent? What if it’s not just about scaling but about making it feel alive?
Enter the Auto Layout
Auto Layout can bring us to another level. It allows us to create complex structures of interdependencies one step at a time.
But wait, why do we need this additional complexity? Can’t our frames and their constraints do that job for us? The answer is yes and no.
To grab another far-fetched metaphor: in auto layout, children frames have a direct influence over the whole family unit. If they want more space for candy, they get more space.
In the process of creating an auto layout frame, it’s important to think first of the separate elements of the composition (spoiled children) and secondly on the interactions between those elements (the family). Auto layout doesn’t let you add the same kind of constraints as the ones we discussed above so it’s also crucial to understand the language of Auto Layout’s Resizing and Alignment to take full advantage of their flexibility.
Here’s a little cheat-sheet of those terms.
- Hug contents — Makes a parent fit to the size of its children. Your go-to option to make sure the parent frame stretches along with changing content. Especially useful with text.
- Fixed Height/Width — means an object won’t resize with its parent or children, e.g. that “X” icon in the corner of your modal.
- Fill Container — makes an object stretch to fill its container. It can only be set on children of an Auto Layout frame. It ensures your object wraps correctly.
The fact that you can’t define constraints in the same way as in regular frames doesn’t mean that you don’t have an option to make things “stick” to the auto-layout frame. For what it’s worth a “left, top” constraint is exactly the same as this visual alignment indicator.
Auto Layout or a frame?
So is Auto Layout the best, the one to go to, all hail the auto layout?
Not quite. Auto layout is great for reusable components, for design system elements, buttons, beautiful cards, etc. But it will not replace the ease of placing elements on a grid within a regular frame.
Here are some things that an auto layout can’t do:
- You can’t add a layout grid to an auto layout frame
- You can’t apply Constraints to any objects within an Auto layout frame (as discussed above).
The name of the game is making components interact in the way that you would hope them to do. A certain level of a reality check is necessary to make sure you don’t go over the board creating complex, completely reusable elements for one-time use. Let’s try to be as utilitarian as possible.
Back into the frame
Remember when I mentioned that auto layout frames do not have constraints like the regular frames? True, but when you place an auto layout frame within a regular frame, it behaves like any old element, with constraints and all bells and whistles. Note, that the UI gets a bit complicated with an option to pick simultaneously resizing options and “regular” constraints.
Sometimes thinking inside the box takes you out of it. Wishing you a lot of fun experimenting with constraints and auto layouts.
Not enough nerdy UI articles for the day? Feel free to check out my other work:
- Honey, I shrunk the UI Illustrations
- Minimalism in UI illustrations
- No-Bullshit Illustrations
- 404: We have a problem
Now for some bonus tutorials…
