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

[@nonfictionaid]

This channel has everything EVERY TUTORIAL I need. THANK YOUUUUU!!!

[@moodcheck3242]

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

[@shaheeraajmal701]

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

[@awamalik2557]

I have made this, but how can I add it to my webpage? It's on multiple frames separately. If I put the first frame into the website, it just goes to another frame instead of staying there and updating the data below.

[@lumiwavee]

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

[@user-tu3ny9bb7y]

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

[@chrisdaniel1998]

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?

[@axolson]

Badass. Great design! Thanks for the tutorial 🙌

[@jamesfrank943]

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

[@mavidesign]

You'd have to adjust the line length manually. Starting at 14:01, you can see me creating various positions for the bottom bar. You'd have to first create your menu with the tab names you need and then adjust the bottom bar according to that. Given the bottom bar has absolute position within an autolayout, I can't really think of any automatic way to do this. Hope that helps! Mavi

[@bogdankhamelyuk3857]

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

[@stark8153]

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.

[@MelkorCozma]

Thank you sir for this well made tutorial.

[@torstenruckwald7313]

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

[@thespark6785]

yes true it doesnt work can you tell me did you find the solution for that?

[@moodcheck3242]

@@thespark6785 same issue

[@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!

[@moodcheck3242]

yeah the active state got me confused as well

[@patrykbielski616]

If you are still looking for an answer: You have to set "reset components state" in the prototype setting :)

[@muradhuseynov9387]

When I reset the components state, the buttons work as expected, but the prototyping functionality does not.@@patrykbielski616

[@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.

[@similoluwaadeyeye2702]

what visual design books did you read?

[@joshaerikamascardo8941]

8:55 I'm only using a tablet. I can't hold and drag the tab button to the frame page. The whole button moves unlike yours that seems like it has been duplicated. Any other alternative?

[@leonegan2704]

you can get your own components from "asset" tab beside the layer tab in your left panel without dragging like him.

[@graceoluwatola]

This response is so helpful. Thanks. ​@@leonegan2704 I am using a laptop but I was wondering if getting from asset tab will affect my prototype effect

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

[@sarahigbinosa3004]

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?

[@sarahigbinosa3004]

I figured it out, it was because i was designing without my mouse.😂

[@MohitSharma-mw4tc]

​@@sarahigbinosa3004 😂😂

[@Novaliz78]

I have the same problem. It is not explained well and very confusing because of always switching some settings fast.

[@sohanvjartakhani]

Do more videos on different topics

[@mavidesign]

Lol I did this video is 10 months old 😂

[@jaronkunkel]

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?

[@moodcheck3242]

i was struggling with as well lol

[@jocelynmagtubo6505]

Thanks, very helpful!

[@dodietvirdianto990]

thank you

[@nasrinjahan315]

Can you please tell me the name of the book and author that you mentioned regarding light? I'm interested in reading the book. Thank you!

[@mavidesign]

Can’t remember but it might actually have been Interaction Design Foundation:) (online design education) Also sharing this for reference en.m.wikipedia.org/wiki/Top-left_lighting

[@nasrinjahan315]

@@mavidesign Thanks! I'm enjoying your tutorials.

[@kehindechidiebere]

How can I do this on an iphone screen

[@bossboss4508]

thx so much

[@maryna4338]

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

[@mavidesign]

Thank you, glad it helped!!! I'm going to leave out so many good books but anyway 😄⬇️ Universal Principles of Design by Lidwell, Holden & Butler Design Is a Job by Mike Monteiro Design of everyday things by Don Norman How to be a graphic designer, without losing your soul by Adrian Shaughnessy Anything Timothy Samara has written Intuitive design by Everett MCKay Don't make me think by Steve Krug 79 short essays on design by michael bierut It also helps to read some basic psychology and how the mind / brain works, behavioral economics, even basic neuroscience if you're ambitious :) and also make sure to check out the open-source literature provided by interaction-design.org: www.interaction-design.org/literature Remember to pay attention to things that repeat across literature - those are the most crucial things to remember Mavi

[@maryna4338]

Awesome, thank you very much 🙏

[@ricard289]

Nice! super video

[@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

[@mavidesign]

Yes but while these tools are great for simple functional prototypes their flexibility in terms of visual design is very limited afaik

[@cahit7270]

how can i drag the tab button ?

[@mavidesign]

What do you mean exactly by dragging? When you are using it or when designing? When designing, simply change the layer order. When using this component, that's not possible with this specific design:)

[@fityanaula1162]

When dragging press ALT

[@mainathuitaj]

Is this interactive on mobile?

[@WolfSoundsHQ]

Too much emphasis on CSS

[@felipearanha564]

ty

[@w0lfHD]

thanks but a little bit fast

[@pravachanpatra4012]

9:04

[@FfA-y5w]

Thank you for your great video, but you don't fully explain what you are doing and you confuse me, especially prototype 😵‍💫😵‍💫

[@erickwhite2568]

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.

[@NhuWendyDang196]

?

[@taylorfredrickson7750]

You will never design a tab like this in the real world. Look at all the best UX's or design systems, from IBM's Carbon to Google's Material... It's simple. Sorry to be negative but this style gives upcoming designers false impressions of what design is and what is needed by users. I fell into this when I first started and it significantly set me back. My advice to new designers: don't think too much about how to make a beautiful tab or button; don't reinvent the wheel. Engineers will just complain, say that can't do it, and do a simpler version anyways. Just make a clean, functional button and move on.

[@kcfelzener7478]

This video could have been 4 minutes long and way less complicated if you made styling decisions before hand.

[@mavidesign]

yeah sometimes not all decisions can be made beforehand but you need to actually see how it works on screen

[@kaushikmitra6402]

not satisfied. First 10 min you discussed about the color of the button which is not objective of the video. I thought you will use variable here but you used the old process. not upto the mark.

[@coolcat2005dj]

too fast for a beginner.

[@matthewdrabek7048]

this dude doesn't know what's he's doing

[@soyzeeke13]

No way! You forget the active state and you remembered in the minute 13... such a waste of time. Sorry dude, but you need to review your process before start recording.

[@mavidesign]

Yeah, it'd probably be wiser to not do the mouse-leave interaction and instead go straight for the active one, I'll give you that, if that's what you mean. But I believe that sharing the whole creative process transparently and even with directions that end up being unused provides a better learning experience. Calling it a waste of time is a bit of a stretch imo 😉

[@Qikskill]

​@@mavidesign awesome guide