How to Setup Layout Grids for Website in Figma | Calculate Bootstrap Layout Grids for Beginners

In this Figma tutorial, I'm going to show you how to use Layout Grids for web design. Layout Grids will help your place elements in design in the right place. I highly recommend you set up layout grids first before starting design websites in Figma. Also, I will refer to the Boostrap's system design to set up Layout Grids, so it's easy to understand how to setup grid layout for beginners. This is a hand-on tutorial, so you can apply what you learn in this video to your real-world projects.

[@yorchmv8715]

Best video ever

[@emilymiro5772]

Nice, it's the first video that teaches the use ot this layout with bootstrap rules that I see. Thanks!

[@Devtamin]

Glad it was helpful!

[@frkgrbz]

Your screen (or frame) has a width of 1521 px. It appears to me that the container size becomes 1320px on XX-Large screens by default. Why did you go for 1140px as the container size?

[@lucky5306]

great tutorial, thanks a lot

[@Devtamin]

You're welcome. I really appreciate your comment. Please, subscribe

[@AndriusRacing]

nice videos. something what is interesting for me: You also work with Adobe illustrator + photoshop etc? Like full full stack? nice then :) !!

[@Devtamin]

Yes, I'm a full stack developer. I know some Adobe illustrator and photoshop

[@jl7610]

Hmm so this Layout Grid is specifically for this one frame with that size. Any way to make it reusable to other sizes? For mobile design and so on.

[@Devtamin]

Yes, this layout grid is for that frame with that size. If you want to use it with other screen sizes, you need to recalculate it. I've showed how to calculate any layout grid in the video. I think it is simple and straight forward. Please, subscribe

[@andrewii23]

Thanks

[@Devtamin]

You're welcome. Thank you for your comment. Please, subscribe