Master Layout grids (Figma, Adobe XD and Sketch)

In this course we will see what are layout grids and how to use them consistently for our designs. No matter if it's for an app or website or even a physical product like a poster, a brochure or even our CV.

You will learn the theory behind the grids and we will see how to make the most common grids like Bootstrap (4 and 5!) and the mythical and so much talked and used 8px grid.

As well we will cover how to make proper typographic decisions in order to stay on the grid and followa proper baseline vertical rythm.

No matter the software you use we will see how to make layout grids in the most common prototyping tools like Figma, Adobe XD and Sketch.

For this course you don't need any previous knowledge on the tools or on grids.

• 1 - Introduction
• 2 - What the hell are Layout grids (Theory)
• 3 - Bootstrap Layout grid
• 4 - 8px grid explained (and settings in Figma)
• 5 - 8px grid in Sketch
• 6 - 8px grid in Adobe XD
• 7 - Congratulations