9 Viewsยท 12/05/24ยท Tutorials
Create Responsive Grid System - Figma Tutorial (FREE TEMPLATE)
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
0 Comments