Overview
Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Master responsive grid-based layout design in this comprehensive Figma tutorial that explores the fundamental principles and practical application of grid systems in web design. Discover the historical influence of grid layouts on modern web design and examine common grid types used across different design contexts. Learn essential layout principles through real-world examples and follow along with a complete web design demonstration that showcases grid implementation from concept to execution. Explore Figma's powerful "Grid" auto layout feature in detail, understanding how to leverage this tool for creating structured, organized designs. Practice applying grid systems to actual design projects while learning techniques for maintaining visual hierarchy and content organization. Gain hands-on experience using Figma's grid tools to layout complete design compositions, and understand how to create responsive designs that adapt seamlessly across different screen sizes and devices.
Syllabus
0:00 What you’ll learn
0:22 The influence of grid layouts
1:12 Common grid types
2:10 Grids in action layout principles
2:59 Web design example
4:27 How “Grid” auto layout works in Figma
10:57 Using “Grid” to layout our design
16:18 Responsiveness
Taught by
Flux Academy