Figma Prototyping: Navigation, Page transitions, Variant states, Scrolling - Beginner 2025 - Part 3

This part 3 of my tutorial series Figma for beginners covers Prototyping. First we cover from a UX Design perspective "Why Prototyping", then we dive deep into How to do that in Figma. From basics to advance prototyping we cover how to:
- Prototype Primary Navigation in tab bar,
- Page transitions,
- Secondary Navigation with moving to a detailed view of an item & Back to the list,
- Variant states of Components to change them up user interactions,
- Prototype Vertical Scrolling of items in a list,
- Prototype Carousel with Horizontal Scrolling.
-------------------------------------------------------------------------------
Resources:
-------------------------------------------------------------------------------
🌈 Figma Template I Created for you ⬇️
https://www.figma.com/community/file/1476677824644780396
-------------------------------------------------------------------------------
Helpful Videos you can watch Next:
-------------------------------------------------------------------------------
💁🏻‍♀️ The Fastest Method - Color Palette to Figma Color Variables: https://youtu.be/cjZuJ41EJDM
💁🏻‍♀️ 8px Figma Grid - Grid Styles for Pixel Perfect Designs: https://youtu.be/hxR2Aqy7ZZc
💁🏻‍♀️ 4 best practices to Organize Figma files: https://youtu.be/PLOD5w4AqOw
💁🏻‍♀️10 Usability Heuristics Simplified: https://youtu.be/6_e1AiOZHC0
-------------------------------------------------------------------------------
Connect with me!
➡️ LinkedIn: https://www.linkedin.com/in/nehmatgereige/
👩🏻‍💻 Portfolio: https://nehmatgereige.com/
🌸 My Gardening & Creativity🌹 YouTube Channel:
https://www.youtube.com/@Ottawa-Intuitive-Gardener
-------------------------------------------------------------------------------
🧘🏻‍♀️ My Gear ⚙️:
-------------------------------------------------------------------------------
LED Recording Light: https://amzn.to/4b3Ey6p
Microphone: https://amzn.to/3EUoFmC
MacBook Pro: https://amzn.to/40XXjUc

🌸 Disclaimer: Links included in this description for my gear are Amazon Affiliate links. If you purchase a product or service with these links, I may receive a small commission at no additional charge to you! Thank you for supporting my channel so I can continue to create free content.🌸
-------------------------------------------------------------------------------
Music Credit
-------------------------------------------------------------------------------
Music by Bensound.com
Artist: Benjamin Tissot
License code: IBB79TUQVB0XP5SE
---------------------------------------------
---------------------------------------------
⏰ CHAPTERS ⏰
00:00 #1. Intro
00:30 #2. Previous steps needed
01:43 #3. Prototypes in UX Design
04:57 #4. Prototype Navigation tab bar
21:36 #5. Secondary Navigation: detailed view & Back
27:19 #6. Change component states with variants
39:43 #7. Prototype Vertical Scrolling
42:35 #8. Prototype Carousel Horizontal Scrolling

Видео Figma Prototyping: Navigation, Page transitions, Variant states, Scrolling - Beginner 2025 - Part 3 канала Nehmat Gereige | AI-Design Professor