Display GRID and responsive design

Although figma does not have display GRID we can use the following tags so that when we paste the design into Bricks builder it will use display grid.

responsive grid figma

GRIDs

(grid-x): You can define the column number.

(grid-x-x): You can define the number of columns in two dimensions.

The numbers that you put in grid must exist in the variables, you can create the variables that you need, in the base Figma file of Fancy Framework you have a base of grid variables.

Grid variables in figma

Responsive GRIDs

It is important that your Figma design is responsive so you can define the number of columns for each Breakpoint:

(grid-x-t): Tablet

(grid-x-l): Landscape

(grid-x-m): Mobile

Help video

YouTube video