Figma Responsive Design (Part 4): Homepage Mobile View Tutorial

Welcome to Week 4 of the Creative Agency Website Design Series!
In this video, we’ll be designing the mobile version of our homepage in Figma, taking everything we built on desktop and making it fully responsive, clean, and client-ready.

You’ll learn how to use auto layout, constraints, and grids to make your design adapt beautifully across screen sizes, an essential skill for every modern UI/UX designer.

🎥 Watch Part 1 here: https://youtu.be/M_x7hyDw60w
🎥 Watch Part 2 here: https://youtu.be/pu30XiRaFfc
🎥 Watch Part 3 here: https://youtu.be/9UmSq9aJd4g
🎥 Watch Part 5 here: https://youtu.be/Fwb9Sh3uJ9Q
🎥 Watch Part 6 here: https://youtu.be/2tJl2n6XH8Y
🎥 Watch Part 7 here: https://youtu.be/g8_HD0tsUZM
🎥 How to Prototype: https://youtu.be/iW9RmDD1yDs

For anyone who wants the finished Figma file without building it from scratch, you can grab it here → https://emulodavid.gumroad.com/l/creativeagencyfigma

⏱️ Timestamps
00:00 – Intro
01:40 – Hero Section
10:36 – About Us Section
12:40 – Logo Section
17:35 – Benefits Section
23:10 – Works Section
26:15 – Services Section
29:30 – Testimonials Section
34:50 – FAQ Section
38:50 – Footer Section
43:50 – Navigation Bar
51:00 – Side Drawer
56:58 – Outro