Create an Interactive TAB NAVIGATION Prototype ft. Smart Animate (Project Files Available)

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

[moodcheck]

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.

[graceoluwatola]

Your tutorials are so explanatory. Thanks

[nonfictionaid]

This channel has everything EVERY TUTORIAL I need. THANK

[shaheeraajmal]

Atlast I find the material that I was searching for.. Thanks for the video 😊

[lumiwavee]

Thankyou Mavi!!! This video meant a lot to us!

[axolson]

Badass. Great design! Thanks for the tutorial 🙌

[tunybby]

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

[torstenruckwald]

Great Tutorial! Unfortunately, the invisible highlighter didn't work in the tabs. Perhaps this will be mentioned and supplemented in another video

[chrisdaniel]

Is it possible to do this but with different length buttons, making sure the bottom line changes dynamically to fit the width of each button?

[MelkorCozma]

Thank you sir for this well made tutorial.

[zeuskyst]

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.

[ScutuRC]

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! :)

[bogdankhamelyuk]

08:25 - straight explanation how to do transitions between states of the button

[stark]

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.

[erickwhite]

Meh, Video is not for new users. Very very fast, doesn't really explain the steps for newcomers very well, especially when it comes to prototyping. Ran into multiple issues but was so fast without clear guidance I gave up and looked for another beginner friendly video.

[similoluwaadeyeye]

what visual design books did you read?

[jamesfrank]

what if the text goes longer? How can we have the bottom bar adjust to the width of each tab label?

[vickyvijayraj]

Great tutorial but instead of Figma these prototypes can be easily done in tools like axure because you don’t have to duplicate the frames right

[maryna]

Hey! Thank you for your videos, they're very helpful. Can you please recommend some books about visual design?

[leitociocia]

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!