Skip to content

PRO TIP Block youtube.com at the DNS level — Pi-hole, NextDNS or your hosts file — but allow youtube-nocookie.com and i.ytimg.com. These tutorials keep playing; the rabbit hole does not.

Learning without distractions

Figma UI Design: Create a Pro Website (with FREE Resources)

73.6K views on YouTube

Learn how to design a beautiful website landing page using Figma! In this easy-to-follow tutorial, we’ll show you how to create an eye-catching hero section step by step. Perfect for both beginners and experienced designers, you’ll learn the basics of Figma, simple design tricks, and professional tips. By the end of this tutorial, you’ll have the skills to create impressive website designs on your own.

✅ Checkout Mobbin here: https://www.mobbin.com/?via=Dope-Motions

⚡Download Figma for Free: https://psxid.figma.com/bpmjxc
⚡Figma Playlist: https://rb.gy/9iy3fw

🎉Chapters:
0:00 – Intro
0:19 – Benefits of Mobbin
1:53 – How to Get Ideas
2:22 – What is Hero Section
3:19 – Start Making the UI Design
4:52 – Creating Navigation Bar
6:27 – Add Text Elements
8:24 – Creating the Hero Image Design
11:14 – Trick to Add Gradients
12:19 – Adding Widgets
13:25 – Add a Grid Background
15:28 – Outro

📌 Top 5 Best Selling Templates:
Handy Seamless Transitions – https://1.envato.market/r1Prv
Photomotion X – https://1.envato.market/aZXoR
AE Face Tools – https://1.envato.market/9WRdBj
1850 FX elements – https://1.envato.market/mkR2Z
Toko Graphics Pack – https://1.envato.market/gQEnA

❤️ My Instagram profiles:
Dope Motions – https://www.instagram.com/dope.motions/
Nikhil Pawar – https://www.instagram.com/nikhilpawarrr/
Join my Telegram Channel for Freebies: https://telegram.me/dopemotionss

✅C ontact
For business, inquiries email me here: nikhil@dopemotions.com
Website: https://dopemotions.com

Thank you

#figma #uidesign #websitedesign