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
@TimGabe Жыл бұрын
ahhh, love it! when I can make it click for people, that’s the best 🤩 thanks for letting me know, Muhammad!
@MuhammadAsif-nb8oc Жыл бұрын
you made objects interaction simpler to understand, thank you Tim
@TimGabe Жыл бұрын
so cool to hear, Muhammad. thanks for supporting!!
@graphicsbybeezo8109 Жыл бұрын
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
@TimGabe Жыл бұрын
that's so so cool to hear. really appreciate candid comments like this 😃
@syedaurooj8589 ай бұрын
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.
@TimGabe9 ай бұрын
that's amazing to hear. really makes me happy to read a comment like this! thank you! 😃
@Runeansfelt Жыл бұрын
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! 🙏🏼✌🏼
@VeronicaRrui9 ай бұрын
You are an awesome teacher!!! This tutorial is very clear. Thank you
@TimGabe8 ай бұрын
thank you so much for the kind words 🙏
@user-xx7pv1ep1r11 ай бұрын
I’m a beginner and this really cleared my confusion ,thanks to you keep it up
@TimGabe10 ай бұрын
that's amazing to hear!! thank you for commenting!
@learnwithaasim Жыл бұрын
Thanks, Tim, this is such an amazing video. Keep creating more. Love this tutorial💜
@TimGabe Жыл бұрын
thank you Asim! happy you got value out of it 🤩💜
@shamimmatia6 ай бұрын
Tnx, it was actually one of the best tutorials for figma
@TimGabe6 ай бұрын
wow, that's big. thanks man!
@PlayLive-gx5si8 ай бұрын
give me learn o lot from this Thank you
@TimGabe8 ай бұрын
that's great to hear. thanks for commenting!
@mikecajina2784 Жыл бұрын
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 😓
@TimGabe Жыл бұрын
yes… Figma is moving so fast, so I’m sure mine will have to be updated soon as well 😅 thanks for the support!!
@nicepicbro34252 жыл бұрын
You are teaching like beginner friendly thank youu.
@TimGabe2 жыл бұрын
really happy you like it 🤩🙏
@muskantarar8331 Жыл бұрын
we need more of such awesome content thank you so much🙌
@TimGabe Жыл бұрын
that’s a very nice comment! thanks a lot Muskan 🙏☺️
@andreakuhnertova2422 Жыл бұрын
Thanks Tim, you are so great at this! You make everything super clear to understand.
@TimGabe Жыл бұрын
that makes me very happy to hear, Andrea!! thank you 😃
@MuhammadAsif-nb8oc Жыл бұрын
Keep smiling and keep creating such a quality content
@TimGabe Жыл бұрын
thank you so much, Muhammad. I will do my best 🥳
@p.s.1524 Жыл бұрын
This is very well explained and easier to follow & understand. loved it! Thank you for this 💜
@TimGabe Жыл бұрын
that's great to hear!! thank you 😃
@bellawood5821 Жыл бұрын
Thank you so much this was so clear and straightforward
@TimGabe Жыл бұрын
thank you for the comment Bella, I'm really glad you liked the video! 🤩
@williamd79978 ай бұрын
@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.
@TimGabe8 ай бұрын
that's amazing to hear 😃
@lorrainekanana3094 Жыл бұрын
You explained it so well, Thank you.
@TimGabe Жыл бұрын
thank you for the nice comment, Lorraine 🤩🥳
@yotaymusic4572 Жыл бұрын
Tim, this tutorial is super helpful. It was really fun and easy replicating your process on my Figma account
@TimGabe Жыл бұрын
Donald!! thank you so much, my friend 🥳 so happy you found it helpful!
@liz62458 ай бұрын
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
@TimGabe8 ай бұрын
good feedback!! heard it before, and nowadays i don't even use a cam for tutorials! 🙏
@seunodt8464 Жыл бұрын
You are so good at teaching. 👍
@TimGabe Жыл бұрын
really appreciate that, Seun! thank you!! 😃
@kassiopeya8740 Жыл бұрын
Thank you, Tim! Great channel, very useful lessons ☺
@TimGabe Жыл бұрын
so glad you liked it!! 🥳
@bongvichet168 Жыл бұрын
All of your videos was useful and helping me alots, Please make more technique for figma. Thank you so much 💜💜💜.
@TimGabe Жыл бұрын
thank you so much, Bong! what a nice comment 🤩🙏 will do my best to continue serving you valuabe stuff! 💜
@DrazenMarjanovic Жыл бұрын
Very useful. Great explanation, keep on good work.
@TimGabe Жыл бұрын
thanks Dražen! 🤩
@MuhammadAsif-nb8oc Жыл бұрын
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 Жыл бұрын
thank you for always supporting, Muhammad 😃🙏 happy you find the content useful!
@rhonericsanjuan7632 ай бұрын
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?
@ikramzenasni46642 жыл бұрын
GREAT CONTENT TIM THNX
@TimGabe2 жыл бұрын
thank you so much, Ikram!! really appreciate the support 🥳
@Zainz834 Жыл бұрын
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
@TimGabe Жыл бұрын
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 👌😃
@SzabatDesign2 жыл бұрын
Thanks Tim. I like your content. More and more please ;) Maybe something about responsive websites and grids? :)
@TimGabe2 жыл бұрын
really glad you liked it, Christopher!! 😃 and what a coincidence that I have content about these topics coming up these next few weeks 🤩
@loisfajuyigbe43732 ай бұрын
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 🤦♀️
@deeptisharma2297Ай бұрын
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?
@riskyriesco3 ай бұрын
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 :)
@ikennagibson39332 жыл бұрын
Nice as always Tim😊
@TimGabe2 жыл бұрын
thank you for the continuous support, Ikenna! really appreciate, as always 🥳
@ikennagibson39332 жыл бұрын
@@TimGabe you are welcome Tim, always rooting for you 🔥
@TimGabe2 жыл бұрын
@@ikennagibson3933 you're the best!! thank you so much 🙏🤩
@MuhammadAsif-nb8oc Жыл бұрын
reproducing your designs on figma, its really interesting.
@TimGabe Жыл бұрын
happy you're pumped to work with my designs, my friend! 😊
@Phill_F Жыл бұрын
More great content! Thank you.
@TimGabe Жыл бұрын
happy you like it, my friend!!
@guycodyking Жыл бұрын
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?
@TimGabe Жыл бұрын
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. 😃
@kuchNayaSekhen14311 ай бұрын
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
@TimGabe11 ай бұрын
thanks for the suggestion, Naya! 😃
@KBforJesusChrist Жыл бұрын
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
@feelcollins4358 Жыл бұрын
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.
@KBforJesusChrist Жыл бұрын
@@feelcollins4358 thank you very match
@dinalabidi48395 ай бұрын
Thank you very much You saved me hh
@spg223 Жыл бұрын
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?
@zuruuppop Жыл бұрын
Add text variant, so u can rename it without a problems
@lemicmelo7713 Жыл бұрын
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
@TimGabe Жыл бұрын
unfortunately components don't translate over via Framer exports...
@trevordupp873410 ай бұрын
Is there a way for the content below it to change?
@TimGabe9 ай бұрын
you'll have to nest components (or use variables, i think)!
@svetlanashebika8127 Жыл бұрын
Thanks!
@TimGabe Жыл бұрын
thank you, Svetlana! 🤩
@doughnut5286 Жыл бұрын
wow such a great explanation...
@TimGabe Жыл бұрын
really glad you liked it ☺️🙌
@ahumblerequest5222 Жыл бұрын
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
@Runeansfelt Жыл бұрын
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?
@zuruuppop Жыл бұрын
yess auto layout (fix and fill)
@Shaykin1 Жыл бұрын
amazing thanks !!!!!
@TimGabe Жыл бұрын
happy you liked it, Michael!!
@dei8bit8 ай бұрын
I have a question, is the "mouse leave" really necessary?
@dei8bit8 ай бұрын
and how could I achieve the same as the navigation bar but with different components?
@TimGabe8 ай бұрын
could probably be achieved in more ways!
@x_y_z_y_x8 ай бұрын
@@TimGabe so far there is no way :(
@jaleelswalkman Жыл бұрын
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 Жыл бұрын
I’ve actually never tried two click interactions like that! what are you trying to achieve?
@jaleelswalkman Жыл бұрын
@@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
@karemobied624511 ай бұрын
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
@TimGabe10 ай бұрын
hard to say without seeing it live, my friend! sorry, hope you sorted it out!
@inuyasha56110 ай бұрын
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?
@TimGabe10 ай бұрын
without seeing the project it's hard to say -- sorry, friend!
@inuyasha56110 ай бұрын
@@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.
@Lucas-xj2dn9 ай бұрын
@@inuyasha561 I have the same issue currently have you create the file ?
@annloumil9 ай бұрын
@@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.
@annloumil9 ай бұрын
@@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.
@mohitthapa7092 Жыл бұрын
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 ?
@TimGabe Жыл бұрын
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 🧐
@mohitthapa7092 Жыл бұрын
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
@prasadsachintha93022 жыл бұрын
I'm waiting sir 🙂
@TimGabe2 жыл бұрын
really hope you’ll like it, Prasad ☺️🙏
@phoy299 ай бұрын
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😢
@TimGabe9 ай бұрын
it's a bit tough without seeing the actual project, sorry friend 🙏
@ahzaazraei93238 ай бұрын
Hello. Thank you for this but how can I make this interactive components clickable and it will send me to another frame?
@TimGabe8 ай бұрын
you'll have to connect it to a different frame; however, hard to explain from a youtube comment! sorry!
@ahzaazraei93238 ай бұрын
@@TimGabe no problem! Hope you will make a youtube shorts on how to do it thank you!
@andrewsmith16189 ай бұрын
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.
@TimGabe9 ай бұрын
super hard to say without seeing it... sorry andrew!
@andrewsmith16189 ай бұрын
@@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.
@shahzebkhalid64949 ай бұрын
@@andrewsmith1618sir you just solved a problem that I was not able to get out of for months 💀 Thanks
@bxzel09157 ай бұрын
@@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.
@jcc50183 ай бұрын
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.
@kleinschewski8 ай бұрын
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?!
@TimGabe8 ай бұрын
check the comments, i think this might be answered! (and sorry for the confusion)
@soldier40828 ай бұрын
7:55 OMG, prototyping is CONFUSING
@TimGabe8 ай бұрын
ahh, that sucks! i hade more videos on this topic in my playlist
@soldier40828 ай бұрын
7:55 I am confused 🥴🥴
@TimGabe8 ай бұрын
😢
@user-cy1eo5nl1o9 ай бұрын
You're face is in the way of sidebar to verify some of the stuff you are trying to show.