Figma Beginner Tutorial (Part 7): Blog & Contact Page Design
1074 次观看 · 2025-12-01
UI 设计
Welcome to Part 7 of the Creative Agency Website Design Series!
In this tutorial, we’ll design the full Blog Page and Contact Page in Figma both desktop and mobile versions, using clean layouts, modern UI patterns, and responsive best practices.
🎥 Watch Part 1 here: https://youtu.be/wucal1Xl4p8
🎥 Watch Part 2 here: https://youtu.be/pu30XiRaFfc
🎥 Watch Part 3 here: https://youtu.be/9UmSq9aJd4g
🎥 Watch Part 4 here: https://youtu.be/ACAb4k3Hsyc
🎥 Watch Part 5 here: https://youtu.be/Fwb9Sh3uJ9Q
🎥 Watch Part 6 here: https://youtu.be/2tJl2n6XH8Y
🎥 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
00:48 – Blog Page (Desktop)
02:00 – Post Card (Component)
15:30 – Blog Page (Mobile)
19:54 – Blog Preview (Desktop)
26:40 – Blog Preview (Mobile)
31:20 – Contact Page (Desktop)
48:00 – Contact Page (mobile)
50:35 – Outro
🔗 Connect With Me
Instagram → https://www.instagram.com/ui.davidemulo
Twitter/X → https://x.com/DavidEmulo
Behance → https://www.behance.net/nnaomaemulo
LinkedIn → https://www.linkedin.com/in/david-emulo
In this tutorial, we’ll design the full Blog Page and Contact Page in Figma both desktop and mobile versions, using clean layouts, modern UI patterns, and responsive best practices.
🎥 Watch Part 1 here: https://youtu.be/wucal1Xl4p8
🎥 Watch Part 2 here: https://youtu.be/pu30XiRaFfc
🎥 Watch Part 3 here: https://youtu.be/9UmSq9aJd4g
🎥 Watch Part 4 here: https://youtu.be/ACAb4k3Hsyc
🎥 Watch Part 5 here: https://youtu.be/Fwb9Sh3uJ9Q
🎥 Watch Part 6 here: https://youtu.be/2tJl2n6XH8Y
🎥 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
00:48 – Blog Page (Desktop)
02:00 – Post Card (Component)
15:30 – Blog Page (Mobile)
19:54 – Blog Preview (Desktop)
26:40 – Blog Preview (Mobile)
31:20 – Contact Page (Desktop)
48:00 – Contact Page (mobile)
50:35 – Outro
🔗 Connect With Me
Instagram → https://www.instagram.com/ui.davidemulo
Twitter/X → https://x.com/DavidEmulo
Behance → https://www.behance.net/nnaomaemulo
LinkedIn → https://www.linkedin.com/in/david-emulo