Create Responsive Grid System - Figma Tutorial (FREE TEMPLATE)

Master UI design for $9 with my new ebook!

In this video, we're going to create Responsive Layout Grids in Figma. We'll talk about everything you need to know about creating desktop, tablet, and mobile layouts in less than 15 minutes!

P.S. Make sure to grab the free layout grid template from the Figma Community below👇

00:00 - Intro
00:33 - Getting started
01:00 - Adding a Layout Grid
01:42 - Column Grid settings
03:09 - 8px vs 5px Grids
04:06 - Aligning Elements
06:02 - Row Grid
08:01 - Spacing & Nudging
09:13 - Fluid vs Fixed Grids
10:48 - Helpful shortcut
11:22 - Saving Grid Styles
12:20 - The Box Model
13:36 - Tablet and Mobile Grids
14:54 - Grid Documentation
16:04 - My Design Ebooks
16:47 - Outro

Connect with me 👋

Thanks for dropping by my channel - if you enjoy what you see, feel free to subscribe and hit that bell notification, and I promise to bring you a ton of free value every week!

----------------------------------------------

P.S. If you're interested in learning UI/UX design feel free to check out my design ebooks - there are free samples available (110+ pages total).

For mobile designers 👇

For website designers & freelancers 👇

My Figma Mastery video course 👇

[fafa]

Please, continue to do this! I usually don't write any comment but for a UI starter you are such a great teacher!!

[craciunionutt]

Great tutorial, Adrian! 🔥Can't wait to see the next ones. Keep going! 🙌

[Accronym]

Thanks for the video! Would love to learn more about the box model you mentioned in the next video!

[sarmadsheraz]

Love your work. Great method of explaining. I am a self-taught UI/UX designer. I found it to be extremely valuable. Keep on making great content.

[melanieberggren]

What program do you use to screenshare like this? Love your videos Adrian!

[Giorgos__K]

Awesome video on grid systems!! Very helpful, keep on making great content!! 🎸

[fahim]

hey TBH! i never write any comments but your video made me!!!. Continue this UI tutorials and I'm looking forward!

[KG-dbkg]

Brilliant teacher! bg music was a bit loud, but your quality of teaching process cut through it, would love to see the box model video

[sharitajohnson]

Thank you . Great videos! I am new and I am learning and I would like to see the box model video soon .

[mariacasuso]

Thank you Adrian! So helpfull! Please keep making content!✨✨

[Anas-Ben]

Thank you for this great tutorial and we would like to explain more about the box model in a separate video for using it in the No-Code platforms.

[stephnpraise]

This is really awesome! My goodness! I just subscribed. Please keep creating awesome videos like this.

[rifaba]

Thank you so much Adrian, please continue to do your videos please

[ThisisSherry]

Hey man, Amazing stuff ❤ please add more tutorials like these.

[milomakesstuff]

Very valuable making my workflow more structured and faster.
Thanks a lot!

[hamzasadouk]

Nice tutorial, continue the great work Adrian .
Also for windows users the shortcut to show / hide the grid is shift+G since ctrl+G is used to group elements

[ayobamidele]

Just discovered your channel. Great content here!
I will love to see the box model tutorial.
Please reduce or prolly take out the background music and increase your volume. Thanks for what you do!

[raulzilahi]

Very nice! Straight to the point and easy to understand. Very helpful stuff👌. Would love to see a video on box model with auto layout if possible please

[RLNDcaST]

Great design Adrian. Nice to learn some new things👍🏻 would love to see more about box model😀

[oscarmattisson]

Excited about this one! Love the content Adrian🌟