Figma Components - Checkbox & Radio buttons (Variables, Variants, Component Properties ) | DS Part 8

[@calvinogood]

13:52, you can select all text by clicking on the small 'target' icon at the bottom.

[@TDSunshine]

OMG! I didn’t know this! So cool! Thanks ☀️🤗💛

[@TDSunshine]

OMG! I didn’t know this! So cool! Thanks ☀️🤗💛

[@dsouzaedson]

I would have never reached so far in any other series. This is amazing. Thank you so much for teaching

[@TDSunshine]

Glad it was helpful! ☀️🙏🏻💛

[@hakimgulBangash]

I truly value your work! Keep raising the flag high! 💕💕

[@TDSunshine]

Thank you so much!☀️💛

[@hakimgulBangash]

@@TDSunshine 😍

[@chrisronan]

Thank you so much for this video! Long time figma user here - I must say your techniques are quite well executed. I'm going to check out your channel as I'm trying to figure out how to use variables for complex interactions... such as, multiple radio buttons with nested variants, and interactions. My work around thus far to create variants for a set of two radio buttons requires nine variants in one variable! Call me crazy, but I think the secret sauce may be in the variables to simplify these interactions. Love your work!

[@TDSunshine]

aww thanks! happy I could help! and yes variables can for sure help! Watch this space I have a video coming up about how to connect variables to variants very soon 🤗☀️

[@savitar29]

As ever it is awesome! Perfect structure of the lesson and absolutely clear presentation! Keep it up! Thank you from my heart!

[@TDSunshine]

Thanks! 🙏🏻☀

[@ronbrown5194]

I'm learning so much from watching your videos! The interactions worked for me this time, but I'm still trying to figure out what went wrong with my main buttons based on your previous video. Keep up the great work!

[@TDSunshine]

thanks! Im stumped on why that didn't work 🙈 Sometimes you just need to start over and it suddenly works. Happy to hear this one worked though! ☀️🤗

[@pauljessee8611]

Great video! I'd love to see some conditionals connected to checkmarks! That would be super helpful.

[@TDSunshine]

Great idea thanks! will add it to my list ☀️🙏🏻

[@HolographicKode]

Great tutorial. One small critique.. afaik radio button does not toggle.. clicking on selected keeps it selected, unlike the checkbox button which toggles state. At least that's what my intuition tells me. Radio button group usually comes with a default selection, from which user changes to another selection.

[@TDSunshine]

thanks! So with radio buttons, I would usually recommend setting up this interaction on a "group level" meaning that you group a few radios and labels together and the user can only select 1 radio at a time (and maybe even set a default selection as you mentioned). I hope that makes sense! 🙏🏻☀️

[@laxmanpatil81]

This is what I am looking for, thanks. Thank you from my heart! awesome work

[@TDSunshine]

You're welcome! 🙏🏻☀️💛

[@Armandot6]

What about when you have more than 1 "radio" button, how do you go about toggling the selection?

[@TDSunshine]

There are a few approaches on how to handle this actually! I’ll add it to my list of video ideas so stay tuned 💡but to try and summarise the easiest way around it - let’s say there are 4 answer options, you can make a component set with 5 variants. One with none selected and then 4 more where a different one is selected in each. Then add interactions on the component level so when they tap on one answer it changes to that variant. That way you can reuse this “answer component” and change the text. That allows the user to only be able to select one of the options at a time. There is also a way to do this with variable prototyping though but it’s too long to explain by text 🙈! I hope that helps! ☀️🙏🏼

[@sfxs8235]

Best explain about check box and radio box❤️✌🏻

[@TDSunshine]

Thanks! 🙏🏻☀️

[@kenneth_philip_dakas]

This is super great! I just love the way you do your tutorials. very detailed and simple. So, I am a beginner and a big fan. I noticed while you applied interactions you did not include the warning checkbox and also the warning radio box. You also did the same in the 240 Buttons video where you left out the disabled buttons without applying interactions to them. Can you please explain why is that?

[@TDSunshine]

Thanks! I’m glad you are finding my videos helpful ☀️🙏🏼💛 I didn’t add interactions on those because those aren’t really ones a user would ever “invoke”. I will probably use them myself to signify in a design that a button is disabled or if I want to show how it would look if there is a warning. But there is no action the user would take during a prototype that would make a button turn disabled for example. I hope that makes sense! 💛🙏🏼☀️

[@kenneth_philip_dakas]

@@TDSunshine Yeah, thank you. I get it.

[@gulnisamirizade2994]

amazing tutorial again! Thanks!❣

[@TDSunshine]

You're welcome 😊☀️

[@souhardamukherjee3131]

First off I LOVE your videos! Best one out there by far! 2nd I have a question. The figma UI has changed since you made this video. I was following your instructions specifically adding a boolean property for the label in checkbox but when I am doing it, I am getting a error message (Not used within component) Why? I followed everything you did, why did it work for you & not me? 🥺

[@TDSunshine]

Thanks! hmmmm maybe you aren't connecting the property to the text box? if you create the property from the component set level then you need to later assign it to an element in the component itself. If you create it from the text box than it's sort of "auto-assigned" I hope that makes sense. ☀️🙏🏻💛

[@tibautall8658]

Great work!! i have learned a lot, Thank you! Do you have any tutorials on how to to make designs responsive?

[@TDSunshine]

thanks! I have this one - *Responsive design with variables and autolayout* - kzbin.info/www/bejne/d5zNYYesm7qfo8U I hope that helps! 🤗☀️

[@bbayek5573]

Great video again! Thank you! Can you make one where you explain how to apply typography library to a file with other UI elements deifned with variables? :)

[@TDSunshine]

Thanks! I have this video on creating a typography system - Figma Design System - Typography System (Using Styles) | Part 2 | Figma Tutorial Step-by-Step kzbin.info/www/bejne/haPTlKucfMSkj5Y Is this what you are after or something else? 🤗☀️

[@1980nikolov]

Great! Thanks!

[@TDSunshine]

You're welcome! ☀️🙏🏻

[@kriswayne7938]

Hey, can u plz post the links or names of ui or component kits for iOS and Android? 🙏🙏

[@TDSunshine]

Sure! I have a video about the iOS one -> *Apple iOS 17 Figma library* - kzbin.info/www/bejne/o6eYeqesa6l3b7c
 And this is the official Material Design page on Figma community for Android libraries - www.figma.com/@materialdesign

[@kriswayne7938]

@@TDSunshine thank u for this 🙏 Do we have something like this for websites and web apps?

[@TDSunshine]

For web, it's a bit more tricky. Web is a bit of a Wild West in the design system sense as there isn't really one system to follow 🙃Lots of companies share their design systems publicly on the Figma community so worth looking for them if you have a website in mind that you want to follow ☀ @@kriswayne7938

[@kriswayne7938]

@@TDSunshine oh ok thanks 💜

[@lilianacarvalho3283]

If you could create a responsive grid system using variables/modes in Figma, it would be very helpful. 🙏🙏

[@TDSunshine]

I have a bit of that in this video 🤗☀️ - *Responsive design with variables and autolayout* - kzbin.info/www/bejne/d5zNYYesm7qfo8U

[@mouhamadoucoulibaly6246]

Cool 😊

[@TDSunshine]

🤗☀️

[@Underhills]

It's a shame I don't get to work with variables as they are all pre-made and administrated in the external designsystem. That leaves only stuff like conditional logic for prototyping to explore. I've had a look at the latter but it seems very quirky. Figma is after all an overengineered program. It's in their brand guideline to be that it seems.

[@TDSunshine]

I'ts easy to get carried away with all the cool features but sometimes the simple way is the best ☀️🙏🏻

[@rahulkakad6800]

Your way is too hard to understand

[@TDSunshine]

Sorry to hear that! I have a Figma crash course for beginners here if you want to check it out - *Figma beginner crash course 2024* - kzbin.info/www/bejne/haWyiXiBgLiWnZY ☀️🙏🏻💛