Image credit Pexels.com - Kévin Dorg
Website: https://www.designwithmitch.com
Video Chapters:
0:00 Intro
0:14 Why use grids in design?
1:09 Checking in on our project overview page
1:32 A quick look at our wireframe files
1:47 Defining breakpoints for desktop, tablet, and mobile
3:07 Setting up breakpoints as a new variables collection in Figma with modes
4:10 Testing our breakpoint variables and modes
4:38 Creating grid variables in Figma
6:50 Testing breakpoints and grid variables
8:51 Reviewing the final grids for each device type
9:16 Testing grids – elements snapping to the grid
9:54 Publishing our new grid and breakpoint variables
10:23 Tidying up the grids page
11:20 Checking in on the project overview page
11:48 Next steps – what’s coming in future videos
12:06 Outro