You can select all Primary Buttons, click in the prototype section "Interactions" +, and then choose from On click to While hovering. Then in the dropdown choose "Change to" and in the options State switch from Default to Hover state
these videos are great. the most comprehensive and easy to follow on RU-vid. It DOES however show the shortcomings of Figma in as much as there is TOO MUCH ENGINEERING for the designer.
Thanks! I think the thing with Figma is you can do as little or as much as you want so if you do decide to go all out (like me 😝) the set up can be a long process sometimes :/ Figma are constantly updating though which is amazing for us designers to know that our complaints are heard and fixed ! ☀️
Wouldn’t you create the interactions on the first set of buttons before you created all of the variations so that the interactions were duplicated as you went along?
@@TDSunshine ok just making sure my knowledge wasn’t incorrect. The way you presented it makes sense when you are unclear as to the direction I am going. Fair point. Keep up the great tutorials you just recently got me as a follower!
You dont need to create 240 different variants, just create 2 components 1- base button components (small, medium, large) that one gonna control (left icon, label, right icon) 2- instance base component and make it a new component for states and nested base buttons (that way you can control size, icons,labels) Now you have 3 size base buttons, 5 state buttons (nested base button) For colors and round use variable modes. So for prototyping you can just deal with 5 components (only state buttons) not 240
Plz make a video on which elements are we supposed to make on our own and which ones should we just get from kits for our case studies. And do provide the most used kits
Has anyone else had any issues getting past the hover state? I've watched this video several times now and followed all the steps, but I can't get my buttons to switch to the active state.
I’m determined to help you solve this! Haha so you have default connected to hover with a “on hover” interaction. And then do you have a connection between hover and focused which is “on click” ? Double check that all your interactions are correct maybe a “on drag” snuck its way in?
@@TDSunshine My hover and focused are connected with a "while pressing" interaction. The focused is then connected to the selected with an "on click" interaction.
Another great video! I had some trouble with my interactions, though. The only one that works for me is the switch to hover state, even though I followed your steps exactly. I'd appreciate any help you can offer to figure out what I'm doing wrong. Also, have you made a video on how to create drag and drops?
Thanks! make sure your click interaction comes from the hover variant and not the default one. Also, check the prototype panel in Figma there may be a warning there that might help! Drag and drops are a bit tricky but that's a great idea for a video! will add to my list 🕶️ I hope that helps! ☀️🤗
You're welcome! I think I will probably make a few more components for this component library and then move on to something else. Any special requests? ☀️
@@TDSunshineyes there is a special request.. Can you please make a video of designing a complete website from scratch including design system to the end.. It will be beneficial for beginners. And thank you for such an amazing content.
@waqasgill3411 beat me to it. You have a computer science background ( I looked on LinkedIn because I was so impressed with your teaching style), so you know that many people learning programming get caught in the tutorial hell, video after video without actually being able to build anything. In the last few years there has been a rise in challenger banks in the UK, Monzo, Starling, Chase, my suggestion would be to launch a new challenger bank. A client comes to TDSunshine and says we are launching a new bank, tells you who its for, the features etc and its your job to design it. Treat it like a real project, this is what I think is lacking on the internet. Sorry for writing an essay for you @@TDSunshine
Is it possible to select a checkmark and have the state of a button change from disabled to active? And visa-versa. Uncheck the checkbox and have the button go from active to disabled?
You can definitely make that happen if you use variables! There are a few ways but essentially, you select which variant of the button is shown using a variable, and then you set that variable to something new every time you “toggle” the checkmark. For example create a string variable “disabled” and use it to select the variant of the button instance. Then set an interaction on the checkmark - on click, set variable to “active”. That will change it to the active variant of the button. I hope that makes sense 🙈 might add it to my list as a good tutorial video! ☀️ I have a few videos where I show how to connect variables to variants if you want to check them out - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-fB-4ikrt3mk.htmlsi=yfGYKnYV8Zu49cgd ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-A1EYkbJIdIQ.htmlsi=0H3a3qvqcbU1x2_0
