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.
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.
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 ❤️
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.
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
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
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.
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.
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 :)
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.
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.
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!! :)
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?
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.
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?
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?
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.
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?
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.
I'll give this a shot, ty!
Yup that makes more sense. I'll pin the comment!
An easier method is to add an icon library such as the material icons or other icon libraries.
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.
That's how I do it too
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 ❤️
That's awesome!
There's a Thanks button now on YT
Congrats man
What are some other advanced Figma topics I should cover?
Yes
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.
@@stanleynwosu5926 Can this be done in figma?
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
@@alimahfudli2848 yes I think it should with the scrolling effect but I don't know how
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
I love that kemper profiling amp in the behind
Made my first button ever on Figma thanks to you! Great content and well explained! best invested 17min!
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.
You could also make the icon a component, so voy can add variantes of the same icon and the swap the instantes pretry easily
thank you so much! I had no idea how to do this properly
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.
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 :)
Thankyou gray for your videos these are so helpful
Thank you very much! I've learned a lot with you
Just what I've been looking for Friday!
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.
Wow, love this session... thank you so much for sharing such cool content with us.
This is really useful brother, thank's for your time and this video
Thanks! I've been breaking my mind how to make variants with different icons for hover state.
In your Variant you can add auto-layout :) It's so cool
I hope you have the updated version of this vdo where you can dynamically change the icon if you wanted.
Hey man, great video - thanks very much!
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?
loved it, thanks
Thanks for sharing this info and teach us
loved that.
concepts finally line up in my brain and...well, who knows? Maybe I'll be able to make sotNice tutorialng now.
NICE TUT
thanks so much man
King, thnx a lot :)
recently i was thinking abou the buttons, and the video about that is been released 😀
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.
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!! :)
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
At 13:50 about what if we change the icon. My suggestion is to use the Font Awesome icon instead of shape...
awesome Stuff gary :)
thank you so much
Which is advisable to use to create a button on figma??
Why use rectangles for shapes instead of frames?
How do you display the prototyping phase at the same with two differs t windows at the same time (while building in figma)?
Late to reply, but open the prototype view link in browser instead of Figma. :)
Hey Gary, love the tutorial but does the hover effect work on mobile?
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?
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.
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?
I like it. Thanks
how to create multiple disable buttons by one click uding figma
Please guide me
There's a plugin called Master that I think can do this in above two clicks, but it's paid after the trial
Does it shimmer on a mobile ?
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?
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.
It is possible to make a component property to select the icon through there, without this hack you showed, which actually is quite cumbersome.
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?
You're supposed to combine the variants, right? I could not find a way to do so.
I should also note that I am on a PC.
i did everything as you but i got stuck at 7:18, because of some error. That happens everytime Im following some tutorial :D
thx
Hey Michael, thanks for tNice tutorials, I want to make a one off donation to you - give the details
This could've been 3 minute
Im a beginner and this is hurting my brain
this is not a good way of creating buttons, you should have instead use component variants.
Hawkeye
waste of time
Corona hasnt been nice to you. You look terrible. Hope you'll get better soon.