Figma Tutorial - How to Setup Layout Grids for Website

Do you know how to set up the website grid in Figma? Whether it's bootstrap or other types of a grid? In today video, I am gonna talk about how you can set up any type of grid system or grid layout into Figma!

▬▬▬ My Products ▬▬▬

▬▬▬ Connect with me ▬▬▬

▬▬▬ Hashtags ▬▬▬
#figma #webdesign #websitedesign

▬▬▬ Chapters ▬▬▬
00:00 - Intro
00:25 - Examples
01:53 ​- Grid

[faizurrehman]

Here is new video about layout grids, lets me know what do you think!

[helendarf]

Finally have some good source about a grid, thanks😊

[faizanyousaf]

Love to have you back!
Keep up the good work ❤️

[andrew.schaeffer]

This is brilliant thank you. I was having trouble finding the best way to set up a grid *with* a max-column-width that would be the same as the max-width of my website content containers. Your solution is really simple, and can't wait to try it.

[gabugabu]

Very informative and straightforward, thanks for sharing

[gazijakiasultana]

Thanks a lot, Faizur.This tutorial gives me a clear idea about the Figma grid layout.V ery good job

[stejas]

hi faizur, it was very helpful. I want to know how you exactly decide which grid system to choose while working on web and mobile apps. I saw many videos where they explain only about spacing, gutter, margin for specific components like cards, text, buttons but when it comes to carousel cards, bottom tab bar of mobile or odd number of horizontal scrolling elements, do that also come under grid system or you can skip few elements?

[devednyavyas]

Would like to see how you take it ahead while designing responsive for mobile and how it matters to developers.

[amadichijindu]

Hi Faizur Rehman. Love this tip. I have a question. What kind of grid system should be used when designing dashboards and web applications?
I would love if you can do a tutorial to answer this.
Thanks.

[sivaneeli]

Great Tutorial Very Big Thanks from India.

[sandyj]

Nice work and welcome back 🔥bro, make a video for font pick and size and spacing for both mobile app and website..

[KINGOZYMANDIAS]

great videos! one question wouldn't be better to set the gutter to 16 px instead of 15? that was we can apply the 8px spacing also horizontally and not only vertically

[amalaliyu]

Love the video really helpful but quick question why is your art board width 1440 and not 1920

[balajiravi]

Is right and left side white space is good for ux desing or not?

[Vipin]

What would be the grid layout for Dashboard designs?
Because I see mostly designers follows new trends like leaving just little margin spaces on both left & right (around 10px).
It's not understandable that, in website designs we use 150px margins on both sides but what about dashboard designs that we see on dribbble.

[johnshort]

Good tutorial but Bootstrap 4 gutter widths should be 30px. It says 15px because what it really means is that there's 15px of padding either side of each column, which equals to 30px. Nice looking layouts though! Great typeface choice too

[abhinavsharma]

the art board size is 1440*1080px so where did that width of 1140 came from? ive watched this video before and understood the concept completly but now i dont know what am missing here

[muhammadfurqan]

Brother i am facing a problem in grid layout, the grid appears in board "1" but when i create 2nd new board the grids are not showing on that 2nd board although i have setup all the grid setting but it wont appear.

[suryas]

in ecommerce site 1920 wide screen how to define it container grid?

[danny]

So, the wide Grid has 81px column width? 🧐