What is the Layout Grid Tool in Figma

If you have ever experienced trouble placing elements in your design, don’t worry! “Super Layout Grid Tool” is here to save your day. In this tutorial, you will learn how to use it properly and never, ever, eeeeever face this issue again.

The Super Power of Visual Hierarchy

Take a look at a picture, or design you find very mesmerizing. For some reason it feels oddly satisfying to stare at it, to visualize it. This is known as Visual Hierarchy, and it determines how you read the image and what the user gives attention to. When we are not sure how to follow this rule -especially in UI/UX design- we use The Layout Grid Tool. So let’s create one from the start.

  1. Open your Design File. Go to the top toolbar. Create a Frame… oh nodon’t know yet how to create a Frame?  We suggest checking, How to Create a Frame tutorial.

xVEQihKnYH1xD85xmA3z1EACWYvGnVJXM 1bJm3DYckrUPNtzXpk7YZ9g6H8FhEQHANRXT pxI1l4692kGKyu HPJPv669lIpIarzC6W9MASi5qdCe3bmKmBzT6IThOkZX J0mqsUPDSi phE QGR0WL1Ow1nlIPXMTYwNd0 PJALyoUXUnGyNSk9Xe6

Once you create the Frame go to the menu at the left and see the Layout Grid Tool option. When you activate this option, the grid will appear over the frame you draw. If you want to change the number of grids based on how you want to place the elements of the design, just press the dropdown bottom and see what has to offer.

You can change the color and rows, and customize your grid as needed. Some designers prefer using columns instead for bottom placement for example.

IWwl6F22BYinlJeDf PWOVC6WiTp5O J1AS2nh4tVBy2FYjcwJSE1kVrNCNXPTMIZlz99GKaxMEqsQK0H0KNqyqPh60410kJpNSuOT8ppjtUxSZ2bznJUEcgdELaqa89kEb4b PRJfKTgOpVll ap77 1kL7er89y977TPohMaCVff TgCh3n2vopLPyvzsqc3 yA

Don’t be afraid to explore how your workspace can help you flow better -and even more effectively- within the design process. Remember that it will determine how long and how much of your energy will be invested in it.

In our next tutorial How to Use the Layout Grid, we will dive a bit more into it, so stay tuned! 

Read The Previous Lesson