Create an Interactive TAB NAVIGATION Prototype ft. Smart Animate (Project Files Available)
67,548
Published 2022-07-01
Visit my STORE: bit.ly/mavi-design-store
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Get FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
This time we’ll go over how to create an interactive and functional tab switcher / navigation for your Figma prototypes. It’s featuring smart animations, hover states, pressed states and active states. It is also visually appealing with a lot of carefully placed visual effects. You’ll learn how to use components, nested components, variants and smart animations to create a visually interesting tab navigation prototype in Figma. It’s great for website and app prototypes (product design) and guaranteed to keep your Figma prototype organized.
How to create / design / build an interactive tab switcher navigation component prototype in figma (full process step-by-step explanation tutorial)
————————————
© 2022 Mavi Design
All Comments (21)
-
Thx for the video, i copied your demo exactly, but you made it quite hard to follow along. The details you pretty much skipped and not constructively organized. Plz, take that as constructive criticism. I have one question though, when you change from "after release" to "active",what prototyping did you use for the active state? In what process did the element come into play and how.. Thx again for the video, the content was great.
-
Atlast I find the material that I was searching for.. Thanks for the video 😊
-
This channel has everything EVERY TUTORIAL I need. THANK YOUUUUU!!!
-
Thankyou Mavi!!! This video meant a lot to us!
-
wowwwwwwwwwwww i can not find any work for it to tell you how great it is i always follow you videos becaus ethey are so helpful and great and amazing
-
Badass. Great design! Thanks for the tutorial 🙌
-
what if the text goes longer? How can we have the bottom bar adjust to the width of each tab label?
-
Thank you sir for this well made tutorial.
-
When I select the tab button, the page and highlighter work well, but I can't see the light behind me. What did I do wrong.
-
Hey, it doesn`t work for me. When i click on the tabs, from home to page 1, the "active" state disappears.... how can i solve that? thanks!
-
help me a lot, thank you very much!
-
This looks great, thanks for the detailed tutorial. One issue I encounter is that I created my tabs switcher for my Design System prototype and because the tabs used were part of the Buttons page, everytime I go to the Buttons page or leave it the tabs - the menu moves up and down from it's position to where is located on the Buttons page. This can be fixed with no smart animations. but that will defeat the purpose... so anyone any idea? Much appreciated! :)
-
08:25 - straight explanation how to do transitions between states of the button
-
Great Tutorial! Unfortunately, the invisible highlighter didn't work in the tabs. Perhaps this will be mentioned and supplemented in another video
-
Do more videos on different topics
-
Hey great tutorial, thanks for creating it. I’m just wondering why did we need to create an interactive component for tabs? I feel like the way you prototyped it, variants is enough.
-
Thanks, very helpful!
-
what visual design books did you read?
-
Thank you so much for this! I can't figure out how you select multiple elements across variants in order to batch edit them though. For example, when you changed the text in the buttons to "Page 2" and "Page 3" etc. Is there a special plugin for that?
-
Thank you for the lovely tutorial. I followed all steps but the 'Mouse up' and 'mouse down' function is not showing in my prototype function? Am I am doing anything wrong?
