No video :(

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

Подписаться 45 тыс.

Просмотров 74 тыс.

50% 1

Get the SOURCE FILE for this project ($1.99): bit.ly/mavi-ta...
Visit my STORE: bit.ly/mavi-de...
Explore Mavi Design COURSES : bit.ly/mavi-de...
Get FIGMA for FREE: bit.ly/get-sta...
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-p...
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

Опубликовано:

30 июн 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 64

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

@nonfictionaid 7 месяцев назад

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

@shaheeraajmal701 2 месяца назад

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

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

@lumiwavee 4 месяца назад

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

@axolson Год назад

Badass. Great design! Thanks for the tutorial 🙌

@user-tu3ny9bb7y 8 месяцев назад

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

@MelkorCozma Год назад

Thank you sir for this well made tutorial.

@ScutuRC 4 месяца назад

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

@erickwhite2568 9 месяцев назад

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.

@stark8153 11 месяцев назад

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.

@joaoamaral6960 7 месяцев назад

help me a lot, thank you very much!

@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

@zeuskyst 9 месяцев назад

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.

@sohanvjartakhani Год назад

Do more videos on different topics

@mavidesign Год назад

Lol I did this video is 10 months old 😂

@jocelynmagtubo6505 Год назад

Thanks, very helpful!

@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

@similoluwaadeyeye2702 8 месяцев назад

what visual design books did you read?

@bogdankhamelyuk3857 Год назад

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

@ricard289 2 года назад

Nice! super video

@bossboss4508 7 месяцев назад

thx so much

@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 11 месяцев назад

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

@muradhuseynov9387 10 месяцев назад

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

@felipearanha564 5 месяцев назад

@kehindechidiebere Год назад

How can I do this on an iphone screen

@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

@joaoamaral6960 7 месяцев назад

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

@mainathuitaj Год назад

Is this interactive on mobile?

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

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

@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

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

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

@w0lfHD 6 месяцев назад

thanks but a little bit fast

@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

@pravachanpatra4012 6 месяцев назад

9:04

@user-bo3gw8iu3g Год назад

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

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

@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 8 месяцев назад

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

@mavidesign 8 месяцев назад

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

@coolcat2005dj 8 месяцев назад

too fast for a beginner.

@matthewdrabek7048 5 месяцев назад

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 😉