How to Use the Layout Grid Tool in Figma

Writer
Updated on: September 29, 2022

Welcome back. We are here to make you fall in love with the Layout Grid Tool, in this article we will explore more about it, how to use it properly, and give you reasons to make the Layout Grid Tool your favorite tool in Figma. 

Reason 1: Everything Will be in Place

Not close to perfection but almost. The Layout Grid Tool helps you double-check the placement of the elements inside your design providing a visual guide, especially if you are a bit OCD about space between elements.  These elements can be images, text, menu, or bottoms, so balance is the word that describes best what the Layout Grid Tool will help you with.

Reason 2: Incredible Flexible Tool

Depending on your preferences -or the specifications of your design- you can customize the Layout Grid Tool. Changing its color, for example, if the elements in your design have the same color as the Layout Grid Tool, you need to create contrast.  

NOTE: To change its color simply press the Grid Tool dropdown, then the Color option clicking the square, and choose the color you prefer.

The Layout Grid Tool in Action

Open your Design File in Figma and let’s play with the Layout Grid Tool. You don’t need to have a project yet; we will give you a brief idea of placing elements using this tool. 

  1. Go to the top toolbar and press Frame
  2. Create a Frame or choose between the samples provided
  3. Activate the Layout Grid Tool and change the settings as you prefer
  4. At the top toolbar select the shape tool and draw two shapes
vB8oEGmVQxYDgW1KNNHSU5NaQv4uwpIXx2ti6lPABDJv8ZSzzQZoswYa9wd dTWYBO Jkbs5xbGZIsQGXtX8upvqQxIZxADmCrB08ypw8YhmC5Auxjl1XkVqIbZpl1Mt0Vs30RyBbgob Y6cCMZ2tv8RE08Qe1pihzU1MSe5JoHuDJeYYfsX88l69sD9m 1ZCbU 6w

These two shapes will represent elements and we are going to practice placing them using the Layout Grid Tool as the visual guide. For now, we don’t need to have a specific design but try to play with the elements and how they would work visually inside the frame.  

Tk2Wzpoe OiwergPJw212MCW9TwesDf

Keep drawing and placing the shapes until you feel confident using the Layout Grid Tool, the most important will be to keep practicing for when you have a project to work on. Stay tuned to learn more about other tools and features in Figma.

Access 2,701+ video lessons. Instantly.
Start Learning Now →
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram