No video :(

Figma Interactive Components For Beginners (2022 Tutorial)

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

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

50% 1

From basic interactive buttons to more advanced nested interactive components-learn it all in this video!
📕 Show Notes 📕
➡️ Smart Animate in Figma: • Figma Smart Animate fo...
➡️ Component Properties in Figma: • Figma Component Proper...
➡️ Auto Layouts in Figma: • Master Figma Auto Layo...
➡️ Subscribe To The Channel: / timgabedesign
Timecodes
00:00 Intro
00:14 Important Precursor
01:39 Interactive Buttons
03:52 Interactive Tab Items
06:05 Nested Interactive Tab Components
#figma #figmatutorial
➡️ QUESTION - Have a question about UI, UX or Product Design? Designing in Figma? Or Anything Else? Post in the comments section of this video-I’m happy to answer!

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

15 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@muhammadsairkhan7205 Год назад

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 😃

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

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.

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

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! 🙏🏼✌🏼

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

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

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

thank you so much for the kind words 🙏

@user-xx7pv1ep1r 11 месяцев назад

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

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

that's amazing to hear!! thank you 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!!

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

Tnx, it was actually one of the best tutorials for figma

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

wow, that's big. thanks man!

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

You are teaching like beginner friendly thank youu.

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

really happy you like it 🤩🙏

@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 🤩💜

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

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

@MuhammadAsif-nb8oc Год назад

Keep smiling and keep creating such a quality content

@TimGabe Год назад

thank you so much, Muhammad. I will do my best 🥳

@PlayLive-gx5si 8 месяцев назад

give me learn o lot from this Thank you

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

that's great to hear. thanks for commenting!

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

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

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

that's amazing to hear 😃

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

@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! 🤩

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

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

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

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

good feedback!! heard it before, and nowadays i don't even use a cam for tutorials! 🙏

@lorrainekanana3094 Год назад

You explained it so well, Thank you.

@TimGabe Год назад

thank you for the nice comment, Lorraine 🤩🥳

@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! 💜

@kassiopeya8740 Год назад

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

@TimGabe Год назад

so glad you liked it!! 🥳

@seunodt8464 Год назад

You are so good at teaching. 👍

@TimGabe Год назад

really appreciate that, Seun! thank you!! 😃

@DrazenMarjanovic Год назад

Very useful. Great explanation, keep on good work.

@TimGabe Год назад

thanks Dražen! 🤩

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

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?

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

GREAT CONTENT TIM THNX

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

thank you so much, Ikram!! really appreciate the support 🥳

@riskyriesco 3 месяца назад

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

@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 👌😃

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

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

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

really glad you liked it, Christopher!! 😃 and what a coincidence that I have content about these topics coming up these next few weeks 🤩

@Phill_F Год назад

More great content! Thank you.

@TimGabe Год назад

happy you like it, my friend!!

@MuhammadAsif-nb8oc Год назад

reproducing your designs on figma, its really interesting.

@TimGabe Год назад

happy you're pumped to work with my designs, my friend! 😊

@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

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

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

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

thanks for the suggestion, Naya! 😃

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

@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

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

Nice as always Tim😊

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

thank you for the continuous support, Ikenna! really appreciate, as always 🥳

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

@@TimGabe you are welcome Tim, always rooting for you 🔥

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

@@ikennagibson3933 you're the best!! thank you so much 🙏🤩

@doughnut5286 Год назад

wow such a great explanation...

@TimGabe Год назад

really glad you liked it ☺️🙌

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

Thank you very much You saved me hh

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

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 🤦‍♀️

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

@svetlanashebika8127 Год назад

Thanks!

@TimGabe Год назад

thank you, Svetlana! 🤩

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

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

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

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

you'll have to nest components (or use variables, i think)!

@Shaykin1 Год назад

amazing thanks !!!!!

@TimGabe Год назад

happy you liked it, Michael!!

@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

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

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

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

hard to say without seeing it live, my friend! sorry, hope you sorted it out!

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

I'm waiting sir 🙂

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

really hope you’ll like it, Prasad ☺️🙏

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

@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

@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

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

Hello. Thank you for this but how can I make this interactive components clickable and it will send me to another frame?

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

you'll have to connect it to a different frame; however, hard to explain from a youtube comment! sorry!

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

@@TimGabe no problem! Hope you will make a youtube shorts on how to do it thank you!

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

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

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

and how could I achieve the same as the navigation bar but with different components?

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

could probably be achieved in more ways!

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

@@TimGabe so far there is no way :(

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

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😢

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

it's a bit tough without seeing the actual project, sorry friend 🙏

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

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

super hard to say without seeing it... sorry andrew!

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

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

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

@@andrewsmith1618sir you just solved a problem that I was not able to get out of for months 💀 Thanks

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

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

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

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

without seeing the project it's hard to say -- sorry, friend!

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

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

@@inuyasha561 I have the same issue currently have you create the file ?

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

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

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

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

@jcc5018 3 месяца назад

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.

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

7:55 OMG, prototyping is CONFUSING

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

ahh, that sucks! i hade more videos on this topic in my playlist

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

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

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

check the comments, i think this might be answered! (and sorry for the confusion)

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

7:55 I am confused 🥴🥴

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

😢