Figma Tutorial: Layout Grids

In this video we'll discuss the various types of Layout Grids you can use in Figma when working on responsive designs.

0:00 - What are layout grids
0:24 - How to add layout grids
0:38 - How to adjust grid settings
0:55 - Adding multiple grids to frames
1:10 - Adjusting gutter and margin properties
1:31 - Changing layout grid settings

#Figma #FigmaDesign #FigmaTutorial #LayoutGrid #Grid #Autolayout

[Figma]

"In June 2024, we introduced a redesigned Figma—called UI3.
With UI3, some parts of this video might not match what you see in the product today. We appreciate your patience while we update our content.

[DaryaNavitskaya]

Guys! Thanks for such an amazing design tool!!!

[cryptocomix]

Layout grid does not show up as an option under design tab... watching this in 2022, using free version. Anyone else have same issue?

[progmell]

This is a must, it's like 100% necessary to use it, cause of consistency of the design we want to create, thanks for a so easy to follow classes.

[Futureshucks]

Man, this is the guy they should use for all tutorials. The guy on the Figma Beginners Tutorial goes too fast. Get this guy back if he has gone somewhere else, new users need him!

[ByInside]

Can one column have 1 additional pixel? I set up a dashboard 1440x1024 100px margin 24px gutters and the width of the columns are sometimes different (1px difference). Did I just ruin the design system that I’m working on? It just stretched this way.

[mateuswild]

For those who need to leave the column unfilled and only with borders, just set the gutter to 0 (zero).

Hope to help =)

[patrickkaman]

Is there any way I can lock my guides? Yet making it snap to the grid?

[thebrunoserge]

Why does the grid always start on the top left corner? So when I resize the frame now I have center aligned columns out of alignment with the grid…

[petergunold]

The Grids dont have any effect on my elements. no matter what I configure for the grids, I am not able to put some elements in a table-link orientation (it is not possible to put one element next to another)

[mttpul]

I dont understand the 'width' property... it doesn't appear to be based on either pixels or percentages?

[justinewert]

Just a quick question, as of Aug. 23rd can you show both columns and rows for a CSS Grid type of setup? Just wondering if there are any plans for this possibility in the near future. Thanks Figma team :)

[juanra.ortizp]

Guys I need help. Control + G will not toggle on and off the grid like you said in 1:55, but group elements. What is the shortcut to toggle on and off my grid visibility, please? In the shortcut list in the help section, it is not listed neither.

[HyuLilium]

the menu was changed to change columns and rows

[AlexMercadoGo]

Should I be using Figma's Layout Grids to communicate how I want flexboxes to be styled for the developers, or is it just a tool for me to color inside the lines?

[iamzealot]

Can the Grid "Size" be a decimal? or does it always have to be a whole number?

[wildblue]

Any idea why it doesn't show when I chose paper presets? A4 for example

[luckycharms]

my dudes and dudettes....I am shooketh!

[mamupelu]

what are the web patterns for sizing? 12 column grid?

[suryachataut]

Is there a way to display grid outside the frame? I am designing a web layout and I have elements outside the frame and need grids to position them.