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:
kzread.info/dron/DDbr6k_AbXfGVMIjJLCZ1g.html .
Have a project? Send me a message on sales@thesmallsquare.com or contact me on LinkedIn.
www.linkedin.com/in/asaadmahmood/ .
.
👉 Follow me on LinkedIn and Twitter for more content.
www.linkedin.com/in/asaadmahmood/
AsaadMahmood5 .
Sign up for Figma: psxid.figma.com/821dltt72sqv .
Subscribe to my newsletter to keep up to date on latest design/tech trends, update, tools and information! 🔥
the-optimal-designer.beehiiv.com/

Пікірлер: 51

  • @tellstod3350
    @tellstod33502 жыл бұрын

    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.

  • @AMDesignAndDev

    @AMDesignAndDev

    2 жыл бұрын

    I’m extremely glad that you find these videos useful. Thanks a lot for your comments!

  • @Zahra-Opaia-0
    @Zahra-Opaia-0 Жыл бұрын

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

  • @t3ntube357
    @t3ntube3572 жыл бұрын

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

  • @jonathanfernandes6172
    @jonathanfernandes6172 Жыл бұрын

    Thank you!!! Amazing content!

  • @DoctorUX
    @DoctorUX2 жыл бұрын

    you are a saint

  • @EdisonCostaSilva
    @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?

  • @plextoon
    @plextoon2 жыл бұрын

    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.

  • @AMDesignAndDev

    @AMDesignAndDev

    2 жыл бұрын

    Awesome, good to know :)

  • @user-xe7vh8mh1i
    @user-xe7vh8mh1i5 ай бұрын

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

  • @ferdausalamsyah1600
    @ferdausalamsyah16002 жыл бұрын

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

  • @AMDesignAndDev

    @AMDesignAndDev

    2 жыл бұрын

    Thank you for your kind words :)

  • @stephencarroll312
    @stephencarroll312 Жыл бұрын

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

  • @adamstuartclark
    @adamstuartclark11 ай бұрын

    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.

  • @AMDesignAndDev

    @AMDesignAndDev

    11 ай бұрын

    Yup, those are definitely important!

  • @markmarkovich8628
    @markmarkovich8628 Жыл бұрын

    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!

  • @AMDesignAndDev

    @AMDesignAndDev

    Жыл бұрын

    Hey, I've started recording my screen at a smaller resolution now, so future videos should hopefully be more zoomed in.

  • @shibambiswas415
    @shibambiswas4152 жыл бұрын

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

  • @AMDesignAndDev

    @AMDesignAndDev

    2 жыл бұрын

    I started doing that in my recent videos :)

  • @shibambiswas415

    @shibambiswas415

    2 жыл бұрын

    @@AMDesignAndDev Lots of LOVE... I Just Love You Man😭

  • @AMDesignAndDev

    @AMDesignAndDev

    2 жыл бұрын

    @@shibambiswas415 :D Thank you bro!

  • @priyashah2812
    @priyashah2812 Жыл бұрын

    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?

  • @harsh_hariya
    @harsh_hariya2 жыл бұрын

    For medium, how did you scale the checkboxes

  • @shibambiswas415

    @shibambiswas415

    2 жыл бұрын

    Find all the shortcuts here: Mac: Ctrl Shift + ? Windows: Ctrl + Shift + ?

  • @thikimthanhpham3273
    @thikimthanhpham3273 Жыл бұрын

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

  • @AMDesignAndDev

    @AMDesignAndDev

    Жыл бұрын

    CMD/CTRL P

  • @user-qj8if8gj6t
    @user-qj8if8gj6t2 жыл бұрын

    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)

  • @AMDesignAndDev

    @AMDesignAndDev

    2 жыл бұрын

    I can have a look if you share the figma file.

  • @saskiagittner8127
    @saskiagittner812710 ай бұрын

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

  • @AMDesignAndDev

    @AMDesignAndDev

    10 ай бұрын

    Now its a baked in functionality, you can just press "K" and you'll get the scaling options on the right.

  • @saskiagittner8127

    @saskiagittner8127

    10 ай бұрын

    @@AMDesignAndDev ah ok I found that - thanks for the tutorials and the response

  • @fernwehtwl
    @fernwehtwl11 ай бұрын

    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?

  • @AMDesignAndDev

    @AMDesignAndDev

    11 ай бұрын

    Yes, or you can deselect the component when you're publishing the library. I am not exporting the atoms because we can just have the single checkbox in the main component as well when we publish it, we don't need to publish a separate duplicate atom component for the checkbox, it serves not purpose.

  • @fernwehtwl

    @fernwehtwl

    11 ай бұрын

    @@AMDesignAndDev thanks for answering this! This is a pretty complex topic for me:(

  • @ozanarslan5175
    @ozanarslan5175 Жыл бұрын

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

  • @AMDesignAndDev

    @AMDesignAndDev

    Жыл бұрын

    Not a complete one, maybe some components would need to be designed separately, but others like buttons, inputs, or larger ones like cards etc, can be kept consistent.

  • @ozanarslan5175

    @ozanarslan5175

    Жыл бұрын

    @@AMDesignAndDev Thanks for your answer, but on the mobile side the buttons can be longer and take up the whole page. For this, do we need to fill containers for our current buttons?

  • @AMDesignAndDev

    @AMDesignAndDev

    Жыл бұрын

    @@ozanarslan5175 Yes, you would use fill container, even on desktop there can be instances where the button is spanning full width.

  • @ozanarslan5175

    @ozanarslan5175

    Жыл бұрын

    @@AMDesignAndDev Thank you, have a great day :)

  • @stephencarroll312
    @stephencarroll312 Жыл бұрын

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

  • @AMDesignAndDev

    @AMDesignAndDev

    Жыл бұрын

    Scalable layouts, plus spacing and padding etc are fixed. Additionally, much easier to move sections around.

  • @stephencarroll312

    @stephencarroll312

    Жыл бұрын

    @@AMDesignAndDev please do a course on building a webpage with full autolayout thats responsive thanks a lot

  • @AMDesignAndDev

    @AMDesignAndDev

    Жыл бұрын

    I launched a full course on Figma, and it uses autolayout to build full websites: asaad-mahmood-s-school.teachable.com/ You can use the voucher "amsubscriber" to get a 50% off.

  • @stephencarroll312

    @stephencarroll312

    Жыл бұрын

    @@AMDesignAndDev very expensive brother

  • @AMDesignAndDev

    @AMDesignAndDev

    Жыл бұрын

    @@stephencarroll312 If you can't pay the amount, but still really want to take the course, let me know what you'd be willing to pay, I'll see if I can make concession so the course can help you too.

  • @osamakhanniazi9181
    @osamakhanniazi91812 жыл бұрын

    Hi

  • @stephencarroll312
    @stephencarroll312 Жыл бұрын

    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

  • @AMDesignAndDev

    @AMDesignAndDev

    Жыл бұрын

    Thanks a lot

  • @NoumanAhmad-jz8qk
    @NoumanAhmad-jz8qk6 ай бұрын

    Sir , you moved too fast very difficult for beginners . kindly indicate which button you press and which shortcut you used.