Figma Interactive Components For Beginners (2022 Tutorial)

I have a question, is the "mouse leave" really necessary?

You are an awesome teacher!!! This tutorial is very clear. Thank you

Sorry sir, for my case why is it that when I switch to tab 2, tab 2 does not activate immediately but instead deactivates all tabs. then when tab 2 is clicked again, tab 2 becomes active but when clicking tab 3, tab 2 does not become inactive and instead tab 2 & tab 3 are active simultaneously??? I hope you can help me😢

I've been recreating the interactive tab component you have here, but for some reason when I click one of the tabs, it goes to an "Inactive" state on all the tabs. Then, when I click a 2nd time (basically double click) it will give that tab an active state, but it will stay active... I have it setup exactly like yours, I've triple checked. I don't get it.

You're face is in the way of sidebar to verify some of the stuff you are trying to show.

Never stopped to give a comment that too this long before but gotta sayy Your teaching style is top-notch reallyy! Just came across your content . As some one who has just entered the field of UX UI design this is what some of us are looking for to begin with Absolute Treasure.

Is there a way for the content below it to change?

I have been trying to do this and can't seem to figure out why when i click the inactive tab i ahve to click it twice and then it stays active the whole time. any thought?

I’m a beginner and this really cleared my confusion ,thanks to you keep it up

Could you please make a video on interactive buttons like male female gender selection if we select male so female should be unselected I hope you got my point

amazing thanks !!!!!

Hi mate great video!! Quick question if you create this workflow, how could you export everything to framer and get the same result without doing everything again? Thanks

Thank you so much! This works for me as long as I don't override the text in the component. E.g. If I keep it as "Button," it works. But if I change the text to "Click here," some of the styling doesn't work. Any idea how to fix that?

Yo Tim

Me again. When in the ending of this video, you drag and drop your tab bar and buttons into the prototype and it snaps and expands responsively to the content you just added:

is that just a matter of setting up a component with the 8 point system and using the hug for height and and fill for width or how was it?

Tim. My man. You're saving the day once again. Like a White Knight championing the efficiency of UI/UX designers around the world.

❤🎉 You're the best! 🙏🏼✌🏼

Thanks it really helped, But I need some help with the last section, I want the tabs to be interactive in a what when you click on tab 1 it should show a different page, and tap 2 it should show a different page, and so on. Please help

I had to remove interactions from the first tabs, I had to remove those transitions then it started working like in your video. I don't have hover function now

Thank ya much Tim. Playlist is really helping me on the journey and your style is chill with minimal banter and very informative. FOund this in 2023, subscribed and liking

This is very well explained and easier to follow & understand. loved it! Thank you for this 💜

You are so good at teaching. 👍

Very useful.
Great explanation, keep on good work.

More great content! Thank you.

Thanks!

353

Thanks Tim, you are so great at this! You make everything super clear to understand.

reproducing your designs on figma, its really interesting.

you made objects interaction simpler to understand, thank you Tim

Ok dood... but the content didnt change below your tabs - which is the whole point of having tabbed navigation, right? To go to each tabs unique content.

Do you need to have each tab, with its unique content below in every variant or is there another way to link the tabs to the unique tab content?

you advised to take 2 video before this one, on animation and components. I watched and found more more interactive stuff to practice. by the way im again back to the stuff in series. cheers

Great video, but I have a question. If you give on click interaction inside of the component, i need to re use the component and I need to give on click interaction to link another page with same animation. Is it possible?

Keep smiling and keep creating such a quality content

This is very neat! thanks for explaining. I have a question regarding the tabs. Could you switch content (without making the content part of the component) when clicking on each tab and still have the all three button states?

Also when you created button states in the first half of the video. Creating the button states this way means if I have to change anything on the buttons are I have to change it manually on both components? Could there be a main component that can be used to change all the component set?

Sorry if answer to these questions are very obvious. I just started learning this powerful tool and trying to understand the concepts

Thank you, Tim! Great channel, very useful lessons ☺

Tim, this tutorial is super helpful. It was really fun and easy replicating your process on my Figma account

I always used to run away from components but you made It so simple and easy and it will save me ton of time. Thanks man

wow such a great explanation...

Thank you so much this was so clear and straightforward

All of your videos was useful and helping me alots, Please make more technique for figma. Thank you so much 💜💜💜.

Thanks a bunch Tim! A lot of figma tutorials are very dated so unfortunately before I found your vids I had already made that nasty web of frames to create a dropdown menu 😓

Hi Tim,
after creating a card component similar to this,
I nested it its instances into a carousel component for horizontal scrolling
but after nesting it, I am not able to click tab1, tab2 tab3.

Any fix for this ?

we need more of such awesome content thank you so much🙌

You explained it so well, Thank you.

Thanks, Tim, this is such an amazing video. Keep creating more. Love this tutorial💜

GREAT CONTENT TIM THNX

You are teaching like beginner friendly thank youu.

Hey Tim can you make a video on your research process how to you go from a project brief to a moodboard to a wireframe and to the visuals and maybe talk about typography in the future. And I loved the concept on a frankistein wire frame 😍 I started implementing that to my design system. 👌 great content as always.

Nice as always Tim😊

Thanks Tim. I like your content. More and more please ;) Maybe something about responsive websites and grids? :)

👍