Figma Course #6. Auto Layout, Constraints and Layout Grids – .com

In the sixth lesson of the Figma beginner course, we are going to learn how Auto Layout, Constraints and Layout Grids work.

Adding Auto Layout to our layers is going to make the layout automatically adapt to the content, it seems like magic! Before learning how to add Auto Layout, you are going to see how complicated it would be to create a simple button while maintaining a coherent design if we did not have Auto Layout.

But luckily, we do! With Auto Layout it is very easy to maintain the same spaces between layers, and the same padding in the different layers of a design. This is essential for our design to be coherent and harmonious. Let’s see it!

You have already seen how these three tools make our lives easier. The Constraints will allow us to define how we want the distance of the layers to the margins of the frame to behave when we resize a frame. It comes in handy for our responsive designs. And with the Layout Grid they can be of the Grid, Column and Grid type, and they will be very useful when designing.

Now it’s your turn to put it into practice in your Figma. As exercises to practice what we have seen in this topic, I propose the following:

• Create the text “Download”. Add Auto Layout with Shift + A to create a button. Change the background color and round the corners. Select the button frame and add Auto Layout. Select the button frame and duplicate that button with CMD + D (on Mac) or CTRL + D (on Windows). From the options on the right panel, Auto Layout, place the two buttons horizontally. Change the text of one of the buttons to check that the padding remains the same. Reduce the space between the two buttons to 8 pixels.
• Create a frame. Inside that frame, create a star (Star) that is constrained (Constraints) 24 pixels away from the top of the frame (Top) and 18 pixels from the right part (Right). Resize the frame, and to check that the star stays constrained to that distance, find out the distances by selecting the star layer and holding down the Alt key, hovering over the frame, without clicking.
• Create a frame and add a grid of 12 columns (Column), of type (Type) Stretch, with 8 pixels of margin (Margin) and 8 pixels of space between columns (Gutter).

You see it! Figma makes our lives a lot easier when it comes to creating good designs: with consistency and responsive.

If you have any questions, you can leave a message on the intranet form. Thank you very much and see you in the next topic. A hug and enjoy the automatic designs a lot!

Remember that if you will have access to everybody the courses and you can also enjoy everything from .

All chapters in this course: