9 Viewsยท 12/05/24ยท Tutorials

Create Responsive Grid System - Figma Tutorial (FREE TEMPLATE)


designvp
Subscribers

Join 2,500+ students and master the foundations of UI design for $9 with my new ebook!
๐Ÿ‘‰ https://howtodesignbetter.com/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๐Ÿ‘‡
https://www.figma.com/communit....y/file/1225060948591

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 ๐Ÿ‘‹
Instagram - https://instagram.com/uiadrian
Twitter - https://twitter.com/uiuxadrian
Linkedin - https://linkedin.com/in/adrian-kuleszo/

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 ๐Ÿ‘‡
https://howtodesignbetter.com/design-manual

For website designers & freelancers ๐Ÿ‘‡
https://howtodesignbetter.com/web-design-guide

My Figma Mastery video course ๐Ÿ‘‡
https://howtodesignbetter.com/figma-mastery

Show more

Up next


0 Comments