Grids

Applying grids in Figma

Malty grids have a library of its own in Figma. Once you start a new design, applying a Layout grid should be one of your first things to do. 

Here’s how you have access to them in your Figma design file:

Which grid to use?

Use case 1

By default, we advise you to start with the “mobile-first” approach, and if that is the case, choose the <768px -6col grid, this works for all the displays with all sorts of resolutions under 768px.

 

Use case 2

If you’re working with a specific system in mind, like Cadi, that is mostly used in tablets, you can go with the ≥768px-12cols. Now you have twice the number of columns of the resolution below, so can have more flexibility in your designs.

 

Use case 3

However, in cases like the CX Back Office, that approach “mobile-first” most likely isn’t the most suitable, so when designing for desktop, start with a screen of 1680px with the <1280px - 12 cols grid. This means that you can be displaying your content on a 1680px screen (or even wider), but your content will only stretch until 1280px, and it is adjusted to that grid.

 

Margin? No margin?

It is up to your designs. 

If you are designing for a full screen, you should go with the “margins” option because your content is not touching the edges of the screen.

If you are designing a page that already has a container, and most likely this container already has its margins, the “no margins” option makes more sense.