Constraints in Figma
Constraints are probably familiar to those who use Sketchapp / Figma to create responsive components. In terms of mechanisms and constraints in these two tools, it is quite similar, but I will explain more in Figma because it has a secret weapon: Grid.
In this article, I will go through how to create the chart in the link below, try dragging the chart on page 1: https://www.figma.com/file/yEbl1L9elshpeGc85eXoHO/Constraint-in-Figma/duplicate
First of all, I’ll introduce how to use the Figma constraint(1) below (skip if you are familiar with Figma).
1. Constraints and options
When you have a shape/text layer in a frame (F) or component (Ctrl + Alt + K), Constraints would show on the right with the default setting as Left _ Top.
Constraints have 2 dimensions, horizontal and vertical.
a. Horizontal
- Left: keep the distance from the left margin
- Right: keep the distance from the right margin
- Left & Right: keep the distance from both left and right margins
- Center: keep the size and distance to the center
- Scale: change the size and distance to the margin according to the frame rate
b. Similar for vertical dimension.
2. Combining constraints and grid(2)
If you have used Figma, you will know that each frame is capable of containing grids. The component is also because it is actually a frame. The amazing thing is, if you have an object placed in a grid, it will respect the grid’s boundaries instead of the frame’s.
Gif created by Carmel DeAmicis will help you understand better:
As you can see, the icons follow the grid and keep the position in the middle of the grid column, and these 3 grid columns follow the scale relative to the entire outer frame. This makes the distance change while maintaining the size of each icon. Very convenient, right?
If Figma hadn’t had this feature, you will have to create separate frames/components containing each icon, set scale for each frame in the outer frame and also set center for each icon in the said small frames. It’s too much to comprehend without the grid 😅
— — — — — — — — —
From these possibilities, making complex components is completely feasible in Figma. If you want to know how you made those charts, read on and go to page 2 of the Figma file.
1. Review component’s anatomy
I always create all the necessary object in the main component, if you don’t need something in the instance, you can simply “delete” it 😌
In this case, a simple column chart includes:
- Left / right vertical axis and unit name:
keep the distance to a vertical edge, stretching vertically - Horizontal axis:
keep the distance to the bottom edge, stretching horizontally - Unit division lines:
keep distance with 4 margins, proportional - Bars:
keep distance with 4 margins, need to be divided evenly in horizontal distance, proportional
We have settings for each part as follows:
- Frame 1 (left axis): Left _ Top & Bottom
- Frame 2 (columns and unit lines): Left & Right _ Top & Bottom
- Frame 3 (right axis): Right _ Top & Bottom
- Frame 4 (horizontal axis): Left & Right _ Bottom
- Frame 5 (left axis unit): Left _ Top
- Frame 6 (right axis unit): Right _ Top
2. Creating grids
This part is gonna be harsh, brace yourself 🤣 If you look at page 2 but don’t see the grids, press Ctrl + Shift + 4.
Let’s start with Frame 1 (left axis) first. Usually, the vertical axis is divided by 3–5 steps, or according to the height of the chart. Here I choose 4 steps, ie 5 numbers (0, 200, 400, 600, 800). So I have the bottom 0, stick to the bottom edge, number 400 Center, and 800 Top. So there are 400 and 600? Ugh. You can give these two numbers the Top & Bottom spacing, but if you don’t want these to be ugly and looking unprofessionally, think about having a grid.
Here you can see that creating a 5-line grid would be unfit 🤔 Figma forces you to determine the distance between the grids (gutter), which (equals the distance between steps in this case) will be changed when we change the chart height.
Now try to look at this case in a creative way, because when there is a fixed element (gutter) and a flexible element (grid), you can completely reverse the position of these things and still run smoothly. We can have the gutter = axis text = fixed height, and the grid will play the role of the distance between the numbers!
Now, my numbers are in text layers with the height of 12px. Hmmm, so we will have 4 grid lines, gutter 12px, margin 12px, right? Wait, of course, the 4 lines grid will be the standard for you to create a damn axis that costs me an hour trying to explain to you in words but no!!! We’ll take things a bit simpler.
You already have 0–400–800 that fits into the Bottom — Center — Top position, and now we just need to get 200–600 into place. That means you only need 2 grid lines, that’s enough. 2 grid lines, gutter 12px, margin 12px is the final answer. So you have 200–600 neatly in the middle of the 2 grid lines, and we just need to set them in the middle (Center).
With the width of these numbers, you can choose as you like, I choose Scale.
With Frame 2 (right axis), the same thing happened. I choose 3 steps, 4 numbers (0, 30, 60, 90). This time, there is no way to reduce the number of the grid, we create 3 lines grid, gutter 12px, margin 12px.
At frame 3, everything is simpler. I want the chart to have 7 columns, I create a grid of 7 columns, gutter and margin are equal to 0. Also, to help the horizontal lines be divided equally, I have to add 2 lines grid, gutter 0 for these 5 lines.
Phew, that’s done with the grid, the obstacle is over, the road ahead is easy 😤
3. Insert text
It sounds simple, yet, I still want to take a step for it.
After arranging the number in the frame for the left vertical axis to follow the grid, the unit name is left for each axis. Put the People and Million letters on these pretty little corners and finish.
With a horizontal axis, usually used for Time, I make 7 days a week, the length of each text layer is equal to the total length of the divided frame 7, the distance between the layers is 0. So, when you give these Scale layers horizontally, they will always be aligned with 7 columns above 😎
4. Add columns and lines
Just like the left vertical axis, I created 5 horizontal lines corresponding to 5 numbers. 3 Bottom — Center — Top lines, 2 grid-centered lines.
With the bars, I choose a thickness of 16px and let them line up with each text layer in the lower horizontal axis. If you want these columns to vary in thickness and height in proportion, then choose a Scale for both ways, or you can choose Center for horizontal and/or Top & Bottom for vertical because we need these bars always sticking to that chart.
Remember to test constantly to know if anything is going wrong!
5. Finishing
Now that we have reached the last step, you can add other details to your chart. For example, I added another 2 bar groups, and created a stack bar chart! Or you can make bar thinner and stand next to each other. After you finish, please send it to me, I’d be very happy yay.
— — — — — — — — —
My God, it’s over! Thank you, everyone, for reading this article. I attached a bonus page in the Figma file, containing a bar chart that looks similar, but definitely not what we just did! Try playing with it.
By the way, I need to ask you to give some feedback on how I write (comment for example), and if you want me to write on other topics, don’t be afraid to drop by Facebook and leave a message.
— — — — — — — — —
* Refs:
(1) Using Constraints, Figma Help Center
https://help.figma.com/article/54-constraints
(2) 5 essential ways to use design constraints, Carmel DeAmicis
https://www.figma.com/blog/five-essential-ways-to-use-design-constraints/
