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.
@DesignCourse3 жыл бұрын
I'll give this a shot, ty!
@DesignCourse3 жыл бұрын
Yup that makes more sense. I'll pin the comment!
@thedjnute3 жыл бұрын
An easier method is to add an icon library such as the material icons or other icon libraries.
@arturtuchowski90853 жыл бұрын
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.
@jodorgu86403 жыл бұрын
That's how I do it too
@vatsalaykhobragade3 жыл бұрын
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 ❤️
@DesignCourse3 жыл бұрын
That's awesome!
@aleksd2863 жыл бұрын
There's a Thanks button now on YT
@khuramshahzad90892 жыл бұрын
Congrats man
@DesignCourse3 жыл бұрын
What are some other advanced Figma topics I should cover?
@Aditya-dk7vh3 жыл бұрын
Yes
@stanleynwosu59263 жыл бұрын
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.
@alimahfudli28483 жыл бұрын
@@stanleynwosu5926 Can this be done in figma?
@neo4now3 жыл бұрын
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
@stanleynwosu59263 жыл бұрын
@@alimahfudli2848 yes I think it should with the scrolling effect but I don't know how
@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
@OurNatureTv Жыл бұрын
Made my first button ever on Figma thanks to you! Great content and well explained! best invested 17min!
@JakeSchlegel2 жыл бұрын
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.
@ivanralic3 жыл бұрын
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.
@adolfocastelan1162 жыл бұрын
You could also make the icon a component, so voy can add variantes of the same icon and the swap the instantes pretry easily
@mahammujahid5920 Жыл бұрын
Thankyou gray for your videos these are so helpful
@dgloria3 жыл бұрын
Just what I've been looking for Friday!
@taskindroho2 жыл бұрын
I love that kemper profiling amp in the behind
@BreathingInPixels3 жыл бұрын
Wow, love this session... thank you so much for sharing such cool content with us.
@SanthiagoCavalcante Жыл бұрын
Thank you very much! I've learned a lot with you
@hannahfoxdesign2 жыл бұрын
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 :)
@marcosbatallab.99392 жыл бұрын
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.
@nikolinazivkovic89922 жыл бұрын
thank you so much! I had no idea how to do this properly
@Clckckckck3 жыл бұрын
This is really useful brother, thank's for your time and this video
@JessUIdesign3 жыл бұрын
In your Variant you can add auto-layout :) It's so cool
@aperson64902 жыл бұрын
Hey man, great video - thanks very much!
@0rezahasan0 Жыл бұрын
loved it, thanks
@luisalbertmorlasanchez30203 жыл бұрын
Thanks for sharing this info and teach us
@devdude760710 ай бұрын
I hope you have the updated version of this vdo where you can dynamically change the icon if you wanted.
@yasirarafat41882 жыл бұрын
loved that.
@tomashruska_252 жыл бұрын
NICE TUT
@annyedz84232 жыл бұрын
thanks so much man
@deepouterspace2 жыл бұрын
Thanks! I've been breaking my mind how to make variants with different icons for hover state.
@hre231234 ай бұрын
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?
@hasanhuseyintoraman Жыл бұрын
King, thnx a lot :)
@googlyeyes27582 жыл бұрын
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!! :)
@_moxy99053 жыл бұрын
recently i was thinking abou the buttons, and the video about that is been released 😀
@JoelleRijst3 жыл бұрын
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.
@zoloonergui10792 жыл бұрын
concepts finally line up in my brain and...well, who knows? Maybe I'll be able to make sotNice tutorialng now.
@manugarg36202 жыл бұрын
At 13:50 about what if we change the icon. My suggestion is to use the Font Awesome icon instead of shape...
@OlhaKhomko2 жыл бұрын
thank you so much
@talinwind3 жыл бұрын
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
@kaushalkumar66663 жыл бұрын
awesome Stuff gary :)
@doAnn882 жыл бұрын
How do you display the prototyping phase at the same with two differs t windows at the same time (while building in figma)?
@nighttimerelaxation26572 жыл бұрын
Late to reply, but open the prototype view link in browser instead of Figma. :)
@volodymyrholovii3 жыл бұрын
I like it. Thanks
@kshizzzu3 жыл бұрын
Hey Gary, love the tutorial but does the hover effect work on mobile?
@designeranthony2 жыл бұрын
Why use rectangles for shapes instead of frames?
@claudiakson12173 жыл бұрын
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?
@mikemichester90622 жыл бұрын
Which is advisable to use to create a button on figma??
@sebluketravis2438 Жыл бұрын
Does it shimmer on a mobile ?
@neamitika2 жыл бұрын
thx
@yahwehwarrior3 жыл бұрын
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?
@cmacfergus3 жыл бұрын
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?
@cmacfergus3 жыл бұрын
You're supposed to combine the variants, right? I could not find a way to do so.
@cmacfergus3 жыл бұрын
I should also note that I am on a PC.
@mehakmuneer85032 жыл бұрын
how to create multiple disable buttons by one click uding figma Please guide me
@rajikkali2 жыл бұрын
There's a plugin called Master that I think can do this in above two clicks, but it's paid after the trial
@tomashruska_252 жыл бұрын
i did everything as you but i got stuck at 7:18, because of some error. That happens everytime Im following some tutorial :D
@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.
@1imanni12 жыл бұрын
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?
@Vela6002 жыл бұрын
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.
@joseflinha2 жыл бұрын
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.
@smknegeri1depoksleman5422 жыл бұрын
Hey Michael, thanks for tNice tutorials, I want to make a one off donation to you - give the details
@vnixz2 жыл бұрын
This could've been 3 minute
@wassimallouche2094 Жыл бұрын
Im a beginner and this is hurting my brain
@surajraika92452 жыл бұрын
Hawkeye
@yumpiri2 жыл бұрын
this is not a good way of creating buttons, you should have instead use component variants.
@listenhere20062 жыл бұрын
waste of time
@Jangeroo3 жыл бұрын
Corona hasnt been nice to you. You look terrible. Hope you'll get better soon.