Creating a Design System - Checkboxes and Radio Buttons

Learn how to create an awesome checkboxes and radio button component with labels!

Do subscribe, like and hit the notification icon:

.
👉 Follow me on LinkedIn and Twitter for more content.
Subscribe to my newsletter to keep up to date on latest design/tech trends, update, tools and information! 🔥

[tellstod]

By seeing your videos I became your Big Fan "AM Design", It's core and Practicle learning on Figma and Design Systems. Each and every video helps me a lot. Thank you very much.

[Zahra-Opaia-]

I feel like I've got a treasure, by following this channel, Greetings from Egypt.

[tntube]

Wow because of you I'm now confident enough to start building my own system, I can't thank you enough ♥

[adamstuartclark]

Good work, but you also need disabled states for both radio and checkbox inputs, and an 'indeterminate' state specifically for checkboxes too in order to make it fully flexible to be used in a design system.

[plextoon]

I have already watched your design system playlist over and over again. It helped me a lot. Thanks a lot. Please try to make a playlist on "Autolayout Responsive In Figma" and Constraints. Thanks in advance.

[markmarkovich]

Been building this along with you. Great informative stuff. It is often hard to see the small details in your right hand design panel. Any way to make that bigger or zoomed in? Also a list of plugins used in the 'about' section would be helpful. Thanks!

[shibambiswas]

Would be awesome if you could include the shortcuts you are using in the tutorial. YOU ARE THE BEST 🤘

[ferdausalamsyah]

Thanks for tutorial, very useful for new UI UX designer like me

[stephencarroll]

why did u create 3 sizes for check boxes. whats the use case ? is small for moble and large for desktop ?

[EdisonCostaSilva]

Hi, Asaad. Great video and playlist. Congratulations and thank you. And what about colors? What would be if I want to use a color property for Checkboxes and Radiobuttons? How can I do that?

[priyashah]

Is there a tutorial on a select all checkbox where if you select all then all checkboxes get checked but then if you unselect a checkbox the select all gets unchecked?

[saskiagittner]

@AMDesignAndDev I ca not get the scale dialog, also not with the shortcut. Is this a plugin?

[thikimthanhpham]

What name of the shortcut to open the dialog search component ? Thanks a lot.

[Роксана-хо]

Hey, the circle in the radiobutton does not adjust to the outside dimensions (medium, large), can you tell me what the problem is, please? thanks for the video)

[fernwehtwl]

hey Asaad im confused in @2:31, is it mandatory to put a period or an underscore in front if we don't want to export ?
I don't understand why we are not exporting these atoms we are creating. Could you elaborate the reason why here? Thank you:)

Also, i just realized that when you created the radio and the check buttons @2:25 you didn't make them small, medium and large sizes. But you enlarged it @5:03.. is there a reason why we don't just make all the sizes in the beginning?

[harsh_hariya]

For medium, how did you scale the checkboxes

[prachishah-cl]

Bro you got a great fucking mentor quality in you! Keep t going. Succha a helpful and insightful video.

[ozanarslan]

Even if it is the same application for web and mobile, it is necessary to set up a different design system, right? Thank you for videos:)

[stephencarroll]

good video.. i see you use autolayout always . why do you do that ? whats the main purpose of this ?

[stephencarroll]

wayyy to fast to catch up my friend, your topics would go long way if you slow down a bit.. just a feedback my freind