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
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.
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 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 😓
Is there a tutorial where from nested interactive component you can change the page as well, like i press tab 2 and goes to page tab 2. im looking for a tutorial in youtube but i cannot seem to find. please help :(
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
If I make a component and then add variant and make an interaction, is the same as doing a component set and adding a interation? which way is better? Thanks a bunch for the lesson :)
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
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
hey Zain! first question: not quite sure I follow. could you describe more? for the second question: you could create a base button component and then duplicate it and create a new component based on that component. that way you could make changes to the base that would apply to the other components 👌😃
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?
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
@TimGabe Thanks for this video. Unlike other videos I found on interactive components, you started out in a beginner friendly way with a very basic example and progressed out from there. And thanks to @annloumil for solving the problem of switching to active tab variants.
Great video! I'd suggest you to put your webcam somewhere where it doesn't cover the Figma layers. As a newbie, seeing layers is quite useful to understand better the concepts
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
I had the same issue but I got persistent with it and finally found the solution and it was quite simple once you realize it. In the original Tab interaction for the prototype, remove the link connecting "Hover" to "Active" state so you basically only have "Inactive" connected to "Hover" state (Don't delete the Active state because you can use it later). Then on the multiple Tabs interaction, follow all the steps in the video and set the Tab 1,2,3 to "Active" state property on each respective row.
What if I want to set a count for my tabs? Like my base count of tabes woulb be five tabs. I will follow the steps you mentioned above. And then I want to set a count. I want to change the number 5 to lets say 3 tabs. How does that work as a component?
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?
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?
@@TimGabe in component level, i gave tap interaction to next variant, and than i reuse this component in app and give the tap interaction to different page, i hope i done it in wrong way
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
Thanks, Tim, That Was Amazing But I'm Facing A Problem The Tap Works But When I Put It To be As In 6:05 And Test It, It Let Them All Be Inactive What Would the Problem Be Thanks Again
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?
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 ?
hey Mohit! it’s hard to say without seeing the design, but as long as the individual cards do have clickable tabs when isolated, they should also be clickable when used in an external component 🧐
Okay, I apologise for not explaining properly, So I have created a component set of 3 cards say A, B and C, each having instances of tab 1,2,3 similar to what you have shown in the tutorial Now I have taken instances of A,B and C and made 3 carousel which includes all three of these. In first carousel A is of original size, while B and C are 70% of their original size Now I have created 3 sets of these so as to get that animation of small card coming infront and getting zoomed in while we perform drag action I am able to get the animation but iam not able to click those tab1,2,3 of cards A,B and C
I have an issue I created one compoent and created variants of it, used it in other frames and modified a few things like colour and font style. Now each time I use the hover effect, it goes back to the initial colour and text styles 🤦♀️
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.
@@TimGabe thanks for the response. I figured it out. In the newer version of Figma there is a checkbox to "Reset State" - that has to be checked for it to work.
@@andrewsmith1618 this is the answer that I was looking for, thank you sir for telling us. It now works as expected! Figma should enable "Reset component state" by default though.
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?
@@TimGabe no worries I actually figured it out, so the hover state can't be active in the initial button before it becomes a part of the tabbed set of buttons, I'll create a file and share.
@@inuyasha561 I've found that this corrects the initial problem (of having to click twice to go to active state, and then they all stay on active), however it means that there is no longer a hover function.
@@Lucas-xj2dn @inuyasha561 I figured it out, in case you still need to know. You have to set "reset components state" in the prototype setting for each of the multiple tab interactions.
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😢
alright, so although this is a good video to describe the process... the process sucks. I'm not sure if figma has updated since you made this video as i only started using it, but they need to make this process simpler. IE make tabs act like radio buttons. Put tabs within a parent group and if one is selected, all others are deselected. If you need a new tab, people shouldnt have to make a ton of other variations, and connect the dots, They should just place another tab in the parent group.
Anyone else having problems with this? i am not a complete noob, but somehow this doesn't really work here. 1. need to click twice (most of the time) to change from one tab to another. 2. after clicking all the tabs one, everyone is active and is not changing to the inactive state?!
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
ahhh, love it! when I can make it click for people, that’s the best 🤩 thanks for letting me know, Muhammad!
you made objects interaction simpler to understand, thank you Tim
so cool to hear, Muhammad. thanks for supporting!!
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
that's so so cool to hear. really appreciate candid comments like this 😃
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.
that's amazing to hear. really makes me happy to read a comment like this! thank you! 😃
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! 🙏🏼✌🏼
You are an awesome teacher!!! This tutorial is very clear. Thank you
thank you so much for the kind words 🙏
Thanks, Tim, this is such an amazing video. Keep creating more. Love this tutorial💜
thank you Asim! happy you got value out of it 🤩💜
I’m a beginner and this really cleared my confusion ,thanks to you keep it up
that's amazing to hear!! thank you for commenting!
Tnx, it was actually one of the best tutorials for figma
wow, that's big. thanks man!
Hey Tim, I been following your crash course and it's been wonderful. I'm wondering if there's a figma file for this lesson that I can follow with?
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 😓
yes… Figma is moving so fast, so I’m sure mine will have to be updated soon as well 😅 thanks for the support!!
You are teaching like beginner friendly thank youu.
really happy you like it 🤩🙏
Thank you so much this was so clear and straightforward
thank you for the comment Bella, I'm really glad you liked the video! 🤩
Thanks Tim, you are so great at this! You make everything super clear to understand.
that makes me very happy to hear, Andrea!! thank you 😃
You explained it so well, Thank you.
thank you for the nice comment, Lorraine 🤩🥳
we need more of such awesome content thank you so much🙌
that’s a very nice comment! thanks a lot Muskan 🙏☺️
Keep smiling and keep creating such a quality content
thank you so much, Muhammad. I will do my best 🥳
Is there a tutorial where from nested interactive component you can change the page as well, like i press tab 2 and goes to page tab 2. im looking for a tutorial in youtube but i cannot seem to find. please help :(
GREAT CONTENT TIM THNX
thank you so much, Ikram!! really appreciate the support 🥳
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
If I make a component and then add variant and make an interaction, is the same as doing a component set and adding a interation? which way is better? Thanks a bunch for the lesson :)
This is very well explained and easier to follow & understand. loved it! Thank you for this 💜
that's great to hear!! thank you 😃
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
unfortunately components don't translate over via Framer exports...
You are so good at teaching. 👍
really appreciate that, Seun! thank you!! 😃
give me learn o lot from this Thank you
that's great to hear. thanks for commenting!
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
hey Zain!
first question:
not quite sure I follow. could you describe more?
for the second question:
you could create a base button component and then duplicate it and create a new component based on that component. that way you could make changes to the base that would apply to the other components 👌😃
Tim, this tutorial is super helpful. It was really fun and easy replicating your process on my Figma account
Donald!! thank you so much, my friend 🥳 so happy you found it helpful!
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?
Add text variant, so u can rename it without a problems
Thank you, Tim! Great channel, very useful lessons ☺
so glad you liked it!! 🥳
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
thank you for always supporting, Muhammad 😃🙏 happy you find the content useful!
Very useful.
Great explanation, keep on good work.
thanks Dražen! 🤩
Thanks!
thank you, Svetlana! 🤩
@TimGabe Thanks for this video. Unlike other videos I found on interactive components, you started out in a beginner friendly way with a very basic example and progressed out from there. And thanks to @annloumil for solving the problem of switching to active tab variants.
that's amazing to hear 😃
All of your videos was useful and helping me alots, Please make more technique for figma. Thank you so much 💜💜💜.
thank you so much, Bong! what a nice comment 🤩🙏 will do my best to continue serving you valuabe stuff! 💜
Great video! I'd suggest you to put your webcam somewhere where it doesn't cover the Figma layers. As a newbie, seeing layers is quite useful to understand better the concepts
good feedback!! heard it before, and nowadays i don't even use a cam for tutorials! 🙏
More great content! Thank you.
happy you like it, my friend!!
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
I had the same issue but I got persistent with it and finally found the solution and it was quite simple once you realize it. In the original Tab interaction for the prototype, remove the link connecting "Hover" to "Active" state so you basically only have "Inactive" connected to "Hover" state (Don't delete the Active state because you can use it later). Then on the multiple Tabs interaction, follow all the steps in the video and set the Tab 1,2,3 to "Active" state property on each respective row.
@@feelcollins4358 thank you very match
reproducing your designs on figma, its really interesting.
happy you're pumped to work with my designs, my friend! 😊
Nice as always Tim😊
thank you for the continuous support, Ikenna! really appreciate, as always 🥳
@@TimGabe you are welcome Tim, always rooting for you 🔥
@@ikennagibson3933 you're the best!! thank you so much 🙏🤩
What if I want to set a count for my tabs? Like my base count of tabes woulb be five tabs. I will follow the steps you mentioned above. And then I want to set a count. I want to change the number 5 to lets say 3 tabs. How does that work as a component?
Thanks Tim. I like your content. More and more please ;) Maybe something about responsive websites and grids? :)
really glad you liked it, Christopher!! 😃 and what a coincidence that I have content about these topics coming up these next few weeks 🤩
amazing thanks !!!!!
happy you liked it, Michael!!
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?
hey Cody!
yes, just as you suggest the easiest way would probably be to have each of the tab variants include the content you want. 😃
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?
I’ve actually never tried two click interactions like that! what are you trying to achieve?
@@TimGabe in component level, i gave tap interaction to next variant, and than i reuse this component in app and give the tap interaction to different page, i hope i done it in wrong way
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
thanks for the suggestion, Naya! 😃
Is there a way for the content below it to change?
you'll have to nest components (or use variables, i think)!
Thanks, Tim, That Was Amazing
But I'm Facing A Problem
The Tap Works But When I Put It To be As In 6:05 And Test It, It Let Them All Be Inactive
What Would the Problem Be
Thanks Again
hard to say without seeing it live, my friend! sorry, hope you sorted it out!
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?
yess auto layout (fix and fill)
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 ?
hey Mohit! it’s hard to say without seeing the design, but as long as the individual cards do have clickable tabs when isolated, they should also be clickable when used in an external component 🧐
Okay, I apologise for not explaining properly,
So I have created a component set of 3 cards say A, B and C, each having instances of tab 1,2,3 similar to what you have shown in the tutorial
Now I have taken instances of A,B and C and made 3 carousel which includes all three of these.
In first carousel A is of original size, while B and C are 70% of their original size
Now I have created 3 sets of these
so as to get that animation of small card coming infront and getting zoomed in while we perform drag action
I am able to get the animation but iam not able to click those tab1,2,3 of cards A,B and C
I'm waiting sir 🙂
really hope you’ll like it, Prasad ☺️🙏
I have an issue
I created one compoent and created variants of it, used it in other frames and modified a few things like colour and font style. Now each time I use the hover effect, it goes back to the initial colour and text styles 🤦♀️
Hello. Thank you for this but how can I make this interactive components clickable and it will send me to another frame?
you'll have to connect it to a different frame; however, hard to explain from a youtube comment! sorry!
@@TimGabe no problem! Hope you will make a youtube shorts on how to do it thank you!
Thank you very much You saved me hh
I have a question, is the "mouse leave" really necessary?
and how could I achieve the same as the navigation bar but with different components?
could probably be achieved in more ways!
@@TimGabe so far there is no way :(
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.
super hard to say without seeing it... sorry andrew!
@@TimGabe thanks for the response. I figured it out. In the newer version of Figma there is a checkbox to "Reset State" - that has to be checked for it to work.
@@andrewsmith1618sir you just solved a problem that I was not able to get out of for months 💀 Thanks
@@andrewsmith1618 this is the answer that I was looking for, thank you sir for telling us. It now works as expected! Figma should enable "Reset component state" by default though.
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?
without seeing the project it's hard to say -- sorry, friend!
@@TimGabe no worries I actually figured it out, so the hover state can't be active in the initial button before it becomes a part of the tabbed set of buttons, I'll create a file and share.
@@inuyasha561 I have the same issue currently have you create the file ?
@@inuyasha561 I've found that this corrects the initial problem (of having to click twice to go to active state, and then they all stay on active), however it means that there is no longer a hover function.
@@Lucas-xj2dn @inuyasha561 I figured it out, in case you still need to know. You have to set "reset components state" in the prototype setting for each of the multiple tab interactions.
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😢
it's a bit tough without seeing the actual project, sorry friend 🙏
7:55 OMG, prototyping is CONFUSING
ahh, that sucks! i hade more videos on this topic in my playlist
alright, so although this is a good video to describe the process... the process sucks. I'm not sure if figma has updated since you made this video as i only started using it, but they need to make this process simpler. IE make tabs act like radio buttons. Put tabs within a parent group and if one is selected, all others are deselected. If you need a new tab, people shouldnt have to make a ton of other variations, and connect the dots, They should just place another tab in the parent group.
👍
🤩🥳
7:55 I am confused 🥴🥴
😢
Anyone else having problems with this?
i am not a complete noob, but somehow this doesn't really work here. 1. need to click twice (most of the time) to change from one tab to another. 2. after clicking all the tabs one, everyone is active and is not changing to the inactive state?!
check the comments, i think this might be answered!
(and sorry for the confusion)
353
the magic number!!
You're face is in the way of sidebar to verify some of the stuff you are trying to show.
nowadays i don’t include the cam in tutorials! ☺️
Sorry 7:30
confused
sorry to hear that my friend!
wow such a great explanation...
really glad you liked it ☺️🙌