Create an Interactive TAB NAVIGATION Prototype ft. Smart Animate (Project Files Available)
ฝัง
- เผยแพร่เมื่อ 30 มิ.ย. 2022
- Get the SOURCE FILE for this project ($1.99): bit.ly/mavi-tab-navigation
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 - แนวปฏิบัติและการใช้ชีวิต
![เจ้าผู้เดียว - ดิด คิตตี้ [OFFICIAL MV]](http://i.ytimg.com/vi/q0NLCYKBOTo/mqdefault.jpg)
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.
This channel has everything EVERY TUTORIAL I need. THANK YOUUUUU!!!
Badass. Great design! Thanks for the tutorial 🙌
Thankyou Mavi!!! This video meant a lot to us!
Thank you sir for this well made tutorial.
Atlast I find the material that I was searching for.. Thanks for the video 😊
Thanks, very helpful!
help me a lot, thank you very much!
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.
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?
Nice! super video
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.
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
thx so 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! :)
How can I do this on an iphone screen
ty
what visual design books did you read?
what if the text goes longer? How can we have the bottom bar adjust to the width of each tab label?
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
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?
i was struggling with as well lol
Hey, i press CTRL + SHIFT and while pressing, i click on the text inside the box on every page. And then, on the right side will apear the text you select and you can change there, and will change in every box.
hope it helps u guys
Great Tutorial! Unfortunately, the invisible highlighter didn't work in the tabs. Perhaps this will be mentioned and supplemented in another video
yes true it doesnt work can you tell me did you find the solution for that?
@@thespark6785 same issue
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?
you can get your own components from "asset" tab beside the layer tab in your left panel without dragging like him.
Hey! Thank you for your videos, they're very helpful. Can you please recommend some books about visual design?
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
Awesome, thank you very much 🙏
Is this interactive on mobile?
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?
I figured it out, it was because i was designing without my mouse.😂
@@sarahigbinosa3004 😂😂
I have the same problem. It is not explained well and very confusing because of always switching some settings fast.
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!
yeah the active state got me confused as well
If you are still looking for an answer: You have to set "reset components state" in the prototype setting :)
When I reset the components state, the buttons work as expected, but the prototyping functionality does not.@@patrykbielski616
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!
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
@@mavidesign Thanks! I'm enjoying your tutorials.
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
Yes but while these tools are great for simple functional prototypes their flexibility in terms of visual design is very limited afaik
08:25 - straight explanation how to do transitions between states of the button
Do more videos on different topics
Lol I did this video is 10 months old 😂
how can i drag the tab button ?
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:)
When dragging press ALT
thanks but a little bit fast
Thank you for your great video, but you don't fully explain what you are doing and you confuse me, especially prototype
😵💫😵💫
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.
9:04
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.
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.
This video could have been 4 minutes long and way less complicated if you made styling decisions before hand.
yeah sometimes not all decisions can be made beforehand but you need to actually see how it works on screen
too fast for a beginner.
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.
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 😉
@@mavidesign awesome guide
this dude doesn't know what's he's doing