Creating the Most DYNAMIC Buttons in Figma

[@GuzzTCK]

An easier way to switch the button's icon is to: > Create icons components for every icon you're going to use; > Place an instance of that icon component inside the button component; > On the instance of the button component, select the icon instance on the layer panel and use the "swipe instance" to choose between any icon component you've created.

[@DesignCourse]

I'll give this a shot, ty!

[@DesignCourse]

Yup that makes more sense. I'll pin the comment!

[@thedjnute]

An easier method is to add an icon library such as the material icons or other icon libraries.

[@arturtuchowski9085]

Yes, this option with an icon component instance is the best one. I've been using it for a long time. Another option for creating buttons is: - create button component and name it for example 'button_master' - duplicate your master component, right click on the duplicated copy, select Create Component and change name to 'button' - you should have 'button_master' component instance inside 'button' component - you can start adding variants to your 'button' component Pros for this method is that you have ONE master button component to rule all button components. It works great with large component libraries because you are changing in one place, and changes are applied to all component copies. Cons is that you have components inception :) and it can be confusing at the beginning.

[@jodorgu8640]

That's how I do it too

[@vatsalaykhobragade]

Gary actually I am late to tell you this but I got an internship 3 months ago at a company. Thanks for teaching me UI/UX design. I've started watching your videos in 2019. Can't thank you enough ❤️

[@DesignCourse]

That's awesome!

[@aleksd286]

There's a Thanks button now on YT

[@khuramshahzad9089]

Congrats man

[@Midi25]

Over the past 2 months, I returned to this lesson three times until I remembered the logic of what was happening)) Figma helps to wake up logical thinking, I love Figma

[@ivanralic]

Guys, you can easily change icon by CTRL + ALT + Dragging it form Assets menu over the existing icon. I've just tried making example from this tutorial and it works with hover as expected. So no need for making 10 different layers for show and hide. Just put one icon in a component and then change them when needed.

[@adolfocastelan116]

You could also make the icon a component, so voy can add variantes of the same icon and the swap the instantes pretry easily

[@taskindroho]

I love that kemper profiling amp in the behind

[@OurNatureTv]

Made my first button ever on Figma thanks to you! Great content and well explained! best invested 17min!

[@hannahfoxdesign]

This is so great thank you for the tutorial :) Just wanted to share a solution to an issue I faced doing this, incase anyone else is in the same boat... ...I was doing everything right but my interactions weren't working in the preview. After digging in some forums an amazing person discovered that you sometimes need to close your presenting tab and then toggle off and on the 'Enable interactive components' option in prototype settings. I hope this helps someone :)

[@JakeSchlegel]

Great video! One thing to note is that if you used an icon from an icon set you already have saved in your assets instead of iconify, you can very easily switch out that icons on your button by double clicking it and using the toggle menu on the right side of the screen.

[@DesignCourse]

What are some other advanced Figma topics I should cover?

[@Aditya-dk7vh]

Yes

[@stanleynwosu5926]

Please Gary show a tutorial on scrolling transition animation using figma. I mean when scrolling downwards with a photo on top with a title the title blends and adjusts itself on top and stays alone without the photo.

[@alimahfudli2848]

@@stanleynwosu5926 Can this be done in figma?

[@neo4now]

tip: You can change icons very easy in varients by making icon a component before adding to (in this case Button. I put all my icons in the same frame (called i.e "Icons") and figma will group them so when I click on the icon in the button on the rightside menu I will be able to switch the icon with the other icons. P.S every Icon in "Icons" frame you want to be able to switch between has to be a component as well for it to work

[@stanleynwosu5926]

@@alimahfudli2848 yes I think it should with the scrolling effect but I don't know how

[@nikolinazivkovic8992]

thank you so much! I had no idea how to do this properly

[@dgloria]

Just what I've been looking for Friday!

[@marcosbatallab.9939]

Awesome Tutorial, works like a charm. I also added the feature to show or hide an Icon, based on the same, shown technique. Works also like a charm. Cant thank you enough.

[@SanthiagoCavalcante]

Thank you very much! I've learned a lot with you

[@mahammujahid5920]

Thankyou gray for your videos these are so helpful

[@BreathingInPixels]

Wow, love this session... thank you so much for sharing such cool content with us.

[@devdude7607]

I hope you have the updated version of this vdo where you can dynamically change the icon if you wanted.

[@deepouterspace]

Thanks! I've been breaking my mind how to make variants with different icons for hover state.

[@savlatsultanov3373]

This is really useful brother, thank's for your time and this video

[@JessUIdesign]

In your Variant you can add auto-layout :) It's so cool

[@aperson6490]

Hey man, great video - thanks very much!

[@0rezahasan0]

loved it, thanks

[@yasirarafat4188]

loved that.

[@tomashruska2171]

NICE TUT

[@zoloonergui1079]

concepts finally line up in my brain and...well, who knows? Maybe I'll be able to make sotNice tutorialng now.

[@hre23123]

Hi! Thanks for the video! Is it possible that in the new figma version you don't have the switch to toggle on and off from a property to another?

[@annyedz8423]

thanks so much man

[@luisalbertmorlasanchez3020]

Thanks for sharing this info and teach us

[@hasanhuseyintoraman]

King, thnx a lot :)

[@_moxy9905]

recently i was thinking abou the buttons, and the video about that is been released 😀

[@manugarg3620]

At 13:50 about what if we change the icon. My suggestion is to use the Font Awesome icon instead of shape...

[@mikemichester9062]

Which is advisable to use to create a button on figma??

[@JoelleRijst]

This only works with a fixed with and if the button text is not inside of a auto-layout frame and has it set to hug contents / different text in buttons than the master.

[@OlhaKhomko]

thank you so much

[@kaushalkumar6666]

awesome Stuff gary :)

[@googlyeyes2758]

4:18 Question! What happens if I neglect to add the rectangle? I was thinking instead I could apply the auto-layout property to the text element and then add a fill to the auto-layout frame. However, I'm not sure if this is the best approach if you want to make your high-fidelity prototype responsive. Btw, I'm such a fan of your channel, cheers!! :)

[@talinwind]

For changing icon you could also add a property per icon could you ? to control the icon from the property instead of from the layers

[@neamitika]

thx

[@volodymyrholovii]

I like it. Thanks

[@designeranthony]

Why use rectangles for shapes instead of frames?

[@rajikkali2381]

There's a plugin called Master that I think can do this in above two clicks, but it's paid after the trial

[@doAnn88]

How do you display the prototyping phase at the same with two differs t windows at the same time (while building in figma)?

[@nighttimerelaxation2657]

Late to reply, but open the prototype view link in browser instead of Figma. :)

[@AmodeusR]

It is possible to make a component property to select the icon through there, without this hack you showed, which actually is quite cumbersome.

[@yahwehwarrior]

Let's say you are using 3 buttons on 1 page, each have a different context. How do you add a different click event to each of those buttons with the hover state still in tact?

[@mehakmuneer8503]

how to create multiple disable buttons by one click uding figma Please guide me

[@sebluketravis2438]

Does it shimmer on a mobile ?

[@kshizzzu]

Hey Gary, love the tutorial but does the hover effect work on mobile?

[@1imanni1]

I'm an Adobe XD user for a number of years now. I was wondering if now was the time to maike the switch over to Figma or should I just stick with Adobe XD?

[@Vela600]

I can answer that question, well, my suggestion is that in order for you to grow or to be able to jump from where you are to wherever you´d like to be, you might want to Master Both Softwares, because many major companies are looking for talent who dominates Figma, and yes, I´m exactly where you are right now, I´m a Pro using XD, I create Design Systems for collaboration and co-creation, It´s amazing, but Very often XD Files starts to weight a lot, and prototype links arn´t as accesible to work with when people arround the globe (mostly devs) with bad internet... , I´m starting on Figma too, trust me, It won´t hurt you to master this Amazing software.

[@claudiakson1217]

When I click my elements, like you, in the button, I don't have the auto layout alternative to the right. What I mean is that I only see the auto layout alternative with the + when I mark the whole frame not the button or the text in the button. What am I doing wrong?

[@joseflinha]

Thanks for the video, you have a great reach for the users and it's a shame not to teach them even more properly. Your followers will not even make a button simply. - Missing master component - Inappropriate use of icons - Each button has a different hover (even if it is visually "similar") Basic mistakes of designers :( That's sad.

[@tomashruska2171]

i did everything as you but i got stuck at 7:18, because of some error. That happens everytime Im following some tutorial :D

[@cmacfergus]

I'm new to Figma. I was following your video tonight, but when I added the button to my UI frame, the variants would show together (i.e., two buttons) and not as one animated button. What am I missing?

[@cmacfergus]

You're supposed to combine the variants, right? I could not find a way to do so.

[@cmacfergus]

I should also note that I am on a PC.

[@smknegeri1depoksleman542]

Hey Michael, thanks for tNice tutorials, I want to make a one off donation to you - give the details

[@vnixz]

This could've been 3 minute

[@surajraika9245]

Hawkeye

[@wassimallouche2094]

Im a beginner and this is hurting my brain

[@yumpiri]

this is not a good way of creating buttons, you should have instead use component variants.

[@listenhere2006]

waste of time

[@Jangeroo]

Corona hasnt been nice to you. You look terrible. Hope you'll get better soon.