Buttons Design System: How to Create a Button UI Library with variants and Component Properties

Learn how to create an entire Button UI Library from scratch for your Design System Build.

[@keezypm8808]

Thank you Femi ...this is very helpful and also made me understand what boolean property is all about

[@femijohn]

You are welcome 😊

[@SubhajitSarkar91221]

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.

[@femijohn]

Glad it helped! You're very welcome 😊

[@chidimmaokoye8328]

Thank you so much for this. By far the best explained video about component i have come across.

[@femijohn]

You’re welcome. I so much appreciate your kind words 🥺

[@AncientEchoesOfHistory]

Thank you for this - followed the steps, got myself some components!

[@femijohn]

That’s great, thank you so much 🙏

[@joymosebolatan3718]

Thanks so much for this. My first time of creating meaningful button components 🥰🥰

[@philiposarodion8906]

You're good ! Extra clearity for me with this video. Thanks John

[@femijohn]

You’re welcome.

[@samihaholajumoke3426]

I’ve learnt a lot from you sir, Thank you sir. Don’t you need a mentor🥺🥺

[@femijohn]

You're welcome, will you want to be my mentor?

[@samihaholajumoke3426]

I meant mentee o, I want to be your mentee🥺

[@banthoonko9390]

Thank you very much! Super easy to follow but get all of the fundamental we need.

[@femijohn]

You’re welcome. I appreciate your kind words. 🙏

[@tayyabsohail8823]

Really awesome video I can't find such video in KZbin

[@femijohn]

You’re very welcome.

[@StellaRigby]

Your tutorials are the best!! thank you so much

[@femijohn]

You're so welcome!

[@rameca2005]

Thanks for the excellent tutorial and right time to seen this videos and it would help lot.

[@femijohn]

You are welcome!

[@catchylife2560]

Wow, easy to understand and the fastest way to create Buttons DS, thank you for your tut, it's really helpful.

[@femijohn]

You’re very welcome. I appreciate your kind words 😊🙏

[@vivianalbert8742]

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

[@GabrielaNathania]

great tutorial! thanks so much!!

[@femijohn]

You’re welcome 🙏

[@denisthiel6585]

So, so helpful and very well explained. Thanks!

[@femijohn]

You’re welcome, I appreciate you 🙏

[@oduakiestherezekiel]

This is so detailed. Thank you so much

[@adekunlefajimi6176]

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

[@femijohn]

In the about section of the channel my handles are there.

[@osereme]

This was really helpful thank you!

[@femijohn]

Thanks 😂

[@rubenphilip]

This is just excellent, going to bookmark it. Thank you!

[@femijohn]

You’re welcome 🥺🙏

[@misalkarunaratne3043]

This was really helpful. Thank you so much!

[@femijohn]

You’re Welcome 😊

[@eastvilrunners]

Super helpful!

[@femijohn]

Glad it was helpful!

[@myfeatheredfriends254]

I have been looking for a vedio like this and thanks alot. Would you mind doing a vedio where you create cards using variants. It could be having a shopping item price and photo item can be replaced. It would really help people including me

[@femijohn]

Okay, thanks. I’ll do that sometime

[@myfeatheredfriends254]

@@femijohn am still binge watching on your vedios they fresh and very updated after the last figma update

[@femijohn]

@@myfeatheredfriends254 thanks alot 🥹

[@obidikefrank1195]

Very helpful thanks.

[@femijohn]

You're welcome!

[@gokomp3286]

Perfect and clear👍

[@femijohn]

I appreciate your kind words 🙏

[@gokomp3286]

@@femijohn Pls, make video about inputs also, thank you!

[@ornellakintomonho2289]

16:03 Thank you very much for your video. It was really clear and I am happy I came across it after being so confused about components. I have a question tho, how do you select the elements (buttons)inside of the component? When I try it , the whole component gets selected.

[@juliavera7768]

You can hold the control key and select the element

[@bonjourwithabike]

This is great. Thank you

[@femijohn]

You’re welcome, I appreciate.

[@matthewanyebe7636]

hi, thanks for this video... i am very new in design, still learning and might be asking lots of questions to get clear understanding. i just created an icon library. but how do i have them as created in the list u have under the icon type? confused . thanks

[@femijohn]

They all need to be component. Then you’ll have to use one of them in another component such as a button component then add an instance swap property to the button component while selecting your icon. Give the property a name in my case I used “button type” and there you go.

[@designkrunch2837]

how to get this icon pack?

[@stephencarroll312]

by far the best logical explanation , figma is turning very messy and complicated.. but love your explanation..how do we add various sizes ?

[@NnekaOlisa]

Thank youu

[@femijohn]

You’re welcome 🙏

[@RayoNathan]

Femi John keep up the good work, this is the most comprehensive button components library on the internet. Take it from me.

[@femijohn]

Thank you so much for the kind words. You’re very welcome.

[@rakeshwarpadmanaban]

After searching 100s of videos finally find this ..... One of the most Classic Video 🎉 Thanks for the creator

[@femijohn]

You’re very welcome 🥺. I appreciate your kind words 🙏❤️

[@carolinamcgarity2135]

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!

[@femijohn]

You’re going to make me cry 🥹. I really do appreciate your kind words. I am glad I could help in any way. 🥰❤️🚀

[@kaismith553]

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.

[@femijohn]

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.

[@saintapalmer]

You have no idea how immensely helpful this video is to me. Thank you!

[@femijohn]

You’re going to make me cry 🥺. You’re welcome 🤗

[@sky-ey5yn]

You are the best!! Life hack (Figma version) 😁

[@femijohn]

Thank You So Much 😁🚀

[@nidarahman2305]

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

[@thenatbeebrand]

Thanks for this.. Really helpful for what I'm working on

[@femijohn]

You’re welcome, I am glad I could help

[@SerenaKoeber]

Thank you so much for explaining

[@femijohn]

You're welcome

[@Rebecca-xw5zi]

Can I say I love you? I love you! Thank you so much!

[@femijohn]

You’re welcome . ❤️🥹

[@olamideegbetola1683]

Thank you so much, Please do we add various sizes?

[@femijohn]

You’re welcome! Yes you can!

[@nove1398]

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?

[@favourogechi8024]

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🙏

[@17hossam17]

its useful video ....thanks Thefemijohn 😊

[@femijohn]

You're welcome 😊

[@fateharahannum6715]

I've been looking for a tutorial like this for ages. Thanks so much!

[@Thewegbaononuro]

learnt so much

[@muhammadkumail6355]

Thanks Man! This is truely Amazing!

[@femijohn]

Glad you like it!

[@Temmidayo]

How did you create an instance of the button @12:20. When I tried the copy and paste option, it didn't work.

[@martinzetta]

Thank you dude!!!

[@femijohn]

You’re welcome 🥺

[@zitaonyemenam2247]

I’m really grateful for this,thank you so much,it’s really helpful ❤

[@femijohn]

You’re welcome 🙏

[@aiwillsurvaiv]

Super great explanation, thanks a lott!

[@femijohn]

You’re welcome 🙏. I appreciate your kind words

[@eddisonchike2017]

This video is very helpful, do you have any WhatsApp group?

[@ivelina_vk]

Thank you for the valuable video!

[@femijohn]

You're Welcome 😊

[@mrabtel6274]

This is awesome stuff! thank you so much

[@femijohn]

You’re very welcome 🙏

[@tariokereke]

The most comprehensive video I've seen so far on creating buttons for your UI library in Figma. Keep up the good work!

[@femijohn]

Glad it was helpful!

[@alexyang7881]

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?

[@femijohn]

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.

[@aquadragon2785]

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👍🎉

[@femijohn]

Thank you!

[@vlog.dergam1746]

the only video I understand!!Thank you sooo much!!!!

[@femijohn]

You’re very welcome 🤗

[@hafizdzakimcd6943]

Thats amazing, thanks for sharing

[@femijohn]

Thanks for watching!

[@filipbojko353]

What if you wanted to change the color of custom text or icon?

[@mohammedabdulaziz3658]

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?

[@femijohn]

You’ll have to create 2 different sets of variants for large and small buttons. I hope this helps. Thanks for the kind words.

[@johnkoch574]

Thanks bro! this has been very helpful and your explanation was so clear!

[@femijohn]

Thank You 🙏

[@aakashmehra1466]

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!

[@femijohn]

Wow, thank you!

[@upasanagupta792]

Amazing video, very nicely explained without confusion. I am happy I found this one. Thank you

[@femijohn]

Glad it was helpful! 😊

[@jimmypatel2769]

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.

[@femijohn]

I’m glad I could help 🥹. I appreciate your kind words and you’re very welcome. Good luck 😊🤗

[@Ioannnify]

Very helpful Thanks!!

[@femijohn]

You're welcome!

[@azadiakhterkhanom7869]

i see ur video .thanks

[@femijohn]

So nice of you

[@akswami789]

Thank you so much nice job

[@femijohn]

Thank you 😊

[@PratyushRout-j5x]

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!

[@femijohn]

Thank you so much. 😊

[@quadhub001]

Thanks I really appreciate I have been working on big projects but always use already made components

[@femijohn]

Glad I could help

[@stephencarroll312]

how can we add sizes though

[@femijohn]

You might need to have entire button set of a different size

[@ahmedrabiul8576]

Fantastic keep going on man

[@femijohn]

Thank you so much. 🙏

[@henriquebs12]

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!

[@femijohn]

You're welcome!

[@agnidiptahomroy8656]

Very informative video, thanks for helping me out on this button making in the design system 😃😃

[@femijohn]

You're welcome. 😊

[@vijay44able]

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)

[@femijohn]

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

[@vijay44able]

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

[@kuldeepdesigner]

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.

[@femijohn]

You're very welcome!

[@Lordyss]

Thanks for the video. Still couldn't figure out how to get the variants right. Very useful information)

[@femijohn]

Thank you very much

[@Greatjunior]

Nice Bro, how do i get that icons pack?

[@femijohn]

its on the figma community. Iconify or Iconly.

[@Greatjunior]

@@femijohn okay tanks

[@stuysarti]

Super helpful, I always come back to this tutorial no matter what!

[@femijohn]

You’re welcome 🙏🚀

[@aduloju95]

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

[@femijohn]

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.

[@aduloju95]

@@femijohn Thank you for your kind response. I have sent a messgae on twitter, hoping to hear from you ASAP.

[@roman__saavedra]

Thanks for this amazing tutorial, It was so useful for creating my design system

[@femijohn]

You're welcome.

[@theboys_yt]

Thanks bud good one!

[@femijohn]

You’re welcome 🙏

[@aishwaryasubramanian9959]

Excellent Video!

[@femijohn]

Thank you very much!

[@ramt9207]

Great vedio bro…it helped ❤

[@ArtiomNeganov]

Very helpful video. Now I know how to make buttons! :)

[@femijohn]

You're Welcome

[@elgalgotranquilo]

Coool! Thank you for the tutorial, very easy to understand the process!

[@femijohn]

Glad it was helpful!

[@ДианЭркин]

Thank u!

[@femijohn]

You're welcome!

[@priyankbusa3810]

Really Appreciable Content !! You have Explained in Easiest Way Thanks

[@femijohn]

You're welcome😊

[@qdrawli]

An excellent video which was wonderfully explained. Thankyou

[@femijohn]

Glad it was helpful!

[@dinachiofoegbunam]

This is sooooooo good!

[@femijohn]

Thank you 🙏🚀

[@TanvirAhmed-cg8kw]

Thank you. Easy to understand the whole process. Looking for more videos like framing , responsive web ui

[@femijohn]

You’re welcome 🙏. Don’t worry. More videos coming up soon

[@manuelcuevas1378]

thanks so much.

[@femijohn]

You’re welcome 🙏

[@abdulrahmaniliyas5691]

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

[@matthewchristopher2736]

How to add button size variants into it?

[@MohammadSajuIslam-r8z]

Bro! I am so grateful to you just saved my time. Thank You!

[@femijohn]

Glad I could help!

[@IsfakSarder]

Thank you!🙏

[@femijohn]

You’re welcome 🙏

[@samuelokereke2158]

How did you get the icon set?

[@peacechinonye5378]

This is really amazing. Your explanations were quite detailed and it helped me build my button system faster. 👍🏼👍🏼👍🏼

[@femijohn]

Glad it helped!😊

[@andreic048]

This tutorial was very well organized! Good job!

[@khurrammughal9580]

Fantastic

[@femijohn]

Thank You.