Perfect tutorial! This is exactly what I was looking for: to create button variants like "with" and "without" icons but without duplicating every single button component. Thanks!
Thank you so much!!! You are making SO many lives easier, you have no idea how much this is appreciated. I not only made a beautiful button components but I learned a whole new (much better) way of making components and variants! Thank you!
Your video was outstanding! The way you explained the topic was truly amazing. Your ability to capture and convey complex ideas is truly impressive. You are a champion in your field. Hats off to you!
I really really like this video on youtube. I search so many videos and blogs for buttons when you explain button related. I really like it. Thanks for making an amazing video.
i was about to skip, Thank God i didnt after reading the comment,, Awesome Video!!! everything explained so clearly, in such a smple way , i understood in one go . Thank you so much for making this
Thank you so much you resolved my big issue I was finding a solution for changing the icon color according to button theme and you mentioned that we need to create different variants for color it helped me a lot and you explained very well❤❤good job👍🎉
Thanks a lot mate. I had a very tough time in understanding from other youtub videos. But luckily I found yours, and man, it was a smooth knowledge transition. Keep up the good work.
Thank you very much, the video is helpful but i have an issue with the icon type instance swap, i did everything you did and also my buttons are all in component but i am not having same out like you
QUESTION: After selecting the icons using the target button, I notice I was not seeing the directive for the instance swap property. What could have gone wrong? Please I need your guide
Very Greate Video, I would lIke to ask you, can we set the height and width property using all variations? ex: I want large button in some cases I want a small button? how would we do that with dynamically way?
hi, Thanks for video. Question: i want different icon colours for different button states. But when I swap the icon for another in my library THEN colour does not change. I am completely stuck. thanks for any help.
I’m sorry, you’ll have to create different variations of your icon to have the different colors you’ll need. Since those icons are components, I usually add different variants and give them the different colors I’ll be needing. The I swap the icon variant when needed.
12:12, I have applied the Boolean property to the right icon but the button size remains the same instead of resizing it. what am I doing wrong? Auto-layout applied 14:13 - can't see the Buton-type option 15:02 - can't see the Component UI (Drop down & Toggle options)
Maybe your auto layout is on fixed sized. Or the icon is the same size as the text. But it’s a good thing, because that’s what you want. You want to retain the size even when the icon changes
I am having an issue with button size. my icons are 24 x 24, then added an icon to the button and resize it to smaller. when I swap an icon, it doesn't keep the smaller icon size but kept displaying 24x24. any thoughts?
Hello I am guessing that your base component where you set your instance swap for icons is 24x24. if thats the case any instance used in that position will take that size. Try adjusting the size from your main componenet.
You really don't know how you just helped my life. You deserve some tight hugs😢😢😢😢. Thank you Femi. Just that when I change my icons it's not reflecting in the colour I want, please is there a video for that to explain better. I tried this method but it didn't work. So I created my icons in the different colors and named the frames according to the colour. So when I go to icon types to swap to another it didn't come in the colour of previous icon.😢
Femi John keep up the good work, this is the most comprehensive button components library on the internet. Take it from me.
Thank you so much for the kind words. You’re very welcome.
After searching 100s of videos finally find this ..... One of the most Classic Video 🎉 Thanks for the creator
You’re very welcome 🥺. I appreciate your kind words 🙏❤️
The most comprehensive video I've seen so far on creating buttons for your UI library in Figma. Keep up the good work!
Glad it was helpful!
You have no idea how immensely helpful this video is to me. Thank you!
You’re going to make me cry 🥺. You’re welcome 🤗
Perfect tutorial! This is exactly what I was looking for: to create button variants like "with" and "without" icons but without duplicating every single button component. Thanks!
You're welcome!
Thank you so much!!! You are making SO many lives easier, you have no idea how much this is appreciated. I not only made a beautiful button components but I learned a whole new (much better) way of making components and variants! Thank you!
You’re going to make me cry 🥹.
I really do appreciate your kind words.
I am glad I could help in any way. 🥰❤️🚀
Your video was outstanding! The way you explained the topic was truly amazing. Your ability to capture and convey complex ideas is truly impressive. You are a champion in your field. Hats off to you!
Wow, thank you!
I really really like this video on youtube. I search so many videos and blogs for buttons when you explain button related. I really like it. Thanks for making an amazing video.
You're very welcome!
Where have you been all this time ?? You made my life easier
Thank you so much 😊 🙏🏽
I've been looking for a tutorial like this for ages. Thanks so much!
i was about to skip, Thank God i didnt after reading the comment,, Awesome Video!!! everything explained so clearly, in such a smple way , i understood in one go . Thank you so much for making this
Thank you so much you resolved my big issue I was finding a solution for changing the icon color according to button theme and you mentioned that we need to create different variants for color it helped me a lot and you explained very well❤❤good job👍🎉
Thank you!
by far the best logical explanation , figma is turning very messy and complicated.. but love your explanation..how do we add various sizes ?
Thanks a lot mate. I had a very tough time in understanding from other youtub videos. But luckily I found yours, and man, it was a smooth knowledge transition. Keep up the good work.
Glad it helped! You're very welcome 😊
Super helpful, I always come back to this tutorial no matter what!
You’re welcome 🙏🚀
Thank you very much sir ...This video is very important for me this is very useful to me. I can handle the work in my office I watching your video.
I’m glad I could help 🥹. I appreciate your kind words and you’re very welcome. Good luck 😊🤗
Thank you so much for this. By far the best explained video about component i have come across.
You’re welcome. I so much appreciate your kind words 🥺
An excellent video which was wonderfully explained. Thankyou
Glad it was helpful!
Thank you Femi ...this is very helpful and also made me understand what boolean property is all about
You are welcome 😊
Amazing video, very nicely explained without confusion. I am happy I found this one. Thank you
Glad it was helpful! 😊
Thanks for the video. Still couldn't figure out how to get the variants right. Very useful information)
Thank you very much
100% the best tutorial video for a designer, Excellent work mate👌
You’re welcome, thanks for your kind words 🙏
Thank you. Easy to understand the whole process. Looking for more videos like framing , responsive web ui
You’re welcome 🙏. Don’t worry. More videos coming up soon
Thank you so much. Ive been trying hard to understand this watching many videos, but you have put it straight and clear in the simplest manner.
I’m glad I could help. You’re welcome 🙏
Thank you for this - followed the steps, got myself some components!
That’s great, thank you so much 🙏
Really Appreciable Content !! You have Explained in Easiest Way Thanks
You're welcome😊
Thanks for this amazing tutorial, It was so useful for creating my design system
You're welcome.
Thanks for this.. Really helpful for what I'm working on
You’re welcome, I am glad I could help
This is a great video, really helped me when i was looking for a straight forward explanation. What about medium and large variants of these buttons?
Great lesson. Hope you a nice day
Thank you so much
Thanks so much for this. My first time of creating meaningful button components 🥰🥰
Thanks for the excellent tutorial and right time to seen this videos and it would help lot.
You are welcome!
Very informative video, thanks for helping me out on this button making in the design system 😃😃
You're welcome. 😊
Lovely. Learnt a lot for my internship.
You're welcome😊
I’m really grateful for this,thank you so much,it’s really helpful ❤
You’re welcome 🙏
Thanks I really appreciate I have been working on big projects but always use already made components
Glad I could help
This tutorial was very well organized! Good job!
Your tutorials are the best!! thank you so much
You're so welcome!
the only video I understand!!Thank you sooo much!!!!
You’re very welcome 🤗
You're good ! Extra clearity for me with this video. Thanks John
You’re welcome.
Thanks bro! this has been very helpful and your explanation was so clear!
Thank You 🙏
Coool! Thank you for the tutorial, very easy to understand the process!
Glad it was helpful!
Thank you so much Femi, this is a very helpful tutorial. Thank you so much
You’re very welcome 🥺🙏
This is really amazing. Your explanations were quite detailed and it helped me build my button system faster. 👍🏼👍🏼👍🏼
Glad it helped!😊
Thank you very much! Super easy to follow but get all of the fundamental we need.
You’re welcome. I appreciate your kind words. 🙏
Can I say I love you? I love you! Thank you so much!
You’re welcome . ❤️🥹
Thank you so much, Please do we add various sizes?
You’re welcome! Yes you can!
Really awesome video I can't find such video in RUclips
You’re very welcome.
Thank you very much. Your explanation was fantastic!
I am glad you understood. You’re welcome 🙏
AMAZING tutorial, thank you so much for the guidance 💯💯💯
You're Welcome
Very helpful video. Now I know how to make buttons! :)
You're Welcome
Your video helped me a lot. Thank you so much!
You're welcome!
Thank you very much, the video is helpful but i have an issue with the icon type instance swap, i did everything you did and also my buttons are all in component but i am not having same out like you
Amazing work my man! I learnt so much! I had so many doubts regarding the design system but that it's all cleared and thanks to you!
Thank you so much. 😊
Thanks Man! This is truely Amazing!
Glad you like it!
Congrats man, its difficult to find this type of content in my language
You’re welcome 😊
What if you wanted to change the color of custom text or icon?
You're a legend mate, thank you very much for this.
You’re welcome and I appreciate your kind words. 🙏😊
So, so helpful and very well explained. Thanks!
You’re welcome, I appreciate you 🙏
I’ve learnt a lot from you sir, Thank you sir. Don’t you need a mentor🥺🥺
You're welcome, will you want to be my mentor?
I meant mentee o, I want to be your mentee🥺
more tutorials like this with the new updates, this helped me a lot, thanks for sharing this with us
You’re very welcome. Thanks you too. 🤗🙏
Excellent excellent video! So helpful! Thank you!
Glad it was helpful!
Thanks! how did you select every home icon in component at once before you set them as a boolean property? 10:56
This is so detailed. Thank you so much
Thank you very much! I wish you a lot of health
You’re welcome.
Super great explanation, thanks a lott!
You’re welcome 🙏. I appreciate your kind words
Thanks for this, I followed step by step but on able to get the instant swip and change of text...also how can we reach you via other social media
In the about section of the channel my handles are there.
Thanks a lot for the lecture. It was very helpful.
QUESTION: After selecting the icons using the target button, I notice I was not seeing the directive for the instance swap property. What could have gone wrong? Please I need your guide
Thank you for the valuable video!
You're Welcome 😊
This is awesome stuff! thank you so much
You’re very welcome 🙏
And that's how you do a tutorial! Awesome!
You’re welcome ❤️🚀🙏
Very Greate Video, I would lIke to ask you, can we set the height and width property using all variations? ex: I want large button in some cases I want a small button? how would we do that with dynamically way?
You’ll have to create 2 different sets of variants for large and small buttons. I hope this helps. Thanks for the kind words.
hi, Thanks for video. Question: i want different icon colours for different button states. But when I swap the icon for another in my library THEN colour does not change. I am completely stuck. thanks for any help.
I’m sorry, you’ll have to create different variations of your icon to have the different colors you’ll need. Since those icons are components, I usually add different variants and give them the different colors I’ll be needing. The I swap the icon variant when needed.
How did you create an instance of the button @12:20. When I tried the copy and paste option, it didn't work.
Wow, easy to understand and the fastest way to create Buttons DS, thank you for your tut, it's really helpful.
You’re very welcome. I appreciate your kind words 😊🙏
Thank you so much for explaining
You're welcome
Really helpful, thanks a lot John
You’re very welcome 🙏
This is the tute I was looking for...
I am glad it was helpful.
12:12, I have applied the Boolean property to the right icon but the button size remains the same instead of resizing it. what am I doing wrong? Auto-layout applied
14:13 - can't see the Buton-type option
15:02 - can't see the Component UI (Drop down & Toggle options)
Maybe your auto layout is on fixed sized. Or the icon is the same size as the text.
But it’s a good thing, because that’s what you want. You want to retain the size even when the icon changes
@@femijohn Thanks for your reply.
14:13 - can't see the Buton-type option
15:02 - can't see the Component UI (Drop down & Toggle options)
great tutorial! thanks so much!!
You’re welcome 🙏
Excellent Video!
Thank you very much!
God bless your ministry 🥺🤲🏽
Thank you!
Awesome video, extremely helpful! Thanks for sharing :)
You’re very welcome.
its useful video ....thanks Thefemijohn 😊
You're welcome 😊
Great vedio bro…it helped ❤
You are the best!! Life hack (Figma version) 😁
Thank You So Much 😁🚀
This was really helpful thank you!
Thanks 😂
Can we also create different size button following the same steps ?
Yes. If that works. But I’m not sure it’s best practice
Thats amazing, thanks for sharing
Thanks for watching!
This is just excellent, going to bookmark it. Thank you!
You’re welcome 🥺🙏
Thank you for this awesome video!
Glad you liked it!
please sir ..can you help create the icon library because i don't know how to swap the icons...it's like you did that before the video🙏
Fantastic keep going on man
Thank you so much. 🙏
This was really helpful. Thank you so much!
You’re Welcome 😊
I am having an issue with button size. my icons are 24 x 24, then added an icon to the button and resize it to smaller. when I swap an icon, it doesn't keep the smaller icon size but kept displaying 24x24. any thoughts?
Hello I am guessing that your base component where you set your instance swap for icons is 24x24. if thats the case any instance used in that position will take that size. Try adjusting the size from your main componenet.
You really don't know how you just helped my life. You deserve some tight hugs😢😢😢😢. Thank you Femi. Just that when I change my icons it's not reflecting in the colour I want, please is there a video for that to explain better.
I tried this method but it didn't work.
So I created my icons in the different colors and named the frames according to the colour. So when I go to icon types to swap to another it didn't come in the colour of previous icon.😢
I am glad I could help. I find it difficult to make explanations over text. you can send me a message and we'll fix it.
@@femijohn Thank you for your kind response. I have sent a messgae on twitter, hoping to hear from you ASAP.
How did you get the icon set?
oh i love this mispronunciation and signature after :)
😭😭😭 Please avoid me.
This is sooooooo good!
Thank you 🙏🚀