Figma Prototyping - Button Component Interactions | Part 6

Figma Prototyping - Button Component Interactions | Part 6 | Figma Tutorial Step-by-Step

Рет қаралды 6,473

Күн бұрын

🚨Follow along with this Figma file - www.figma.com/community/file/...
☆ Try Figma's Professional Plan - bit.ly/TDProFigma
☆ Try Figma For Free - psxid.figma.com/xnd9l
💛 Thanks for watching, Tair 💛
🍿 WHAT TO WATCH NEXT :
1. Variables 101 - • Figma Variables for be...
2. Variables best practice - • Figma VARIABLES BEST P...
3. Figma Components - • Figma Components | Mas...
👋🏼 IF YOU ARE NEW HERE :
Hey, it's Tair! 😃
Thanks for tuning in and watching my video! If you enjoyed it and learned something new, don't forget to hit that subscribe button and the like button as well 👍🏼. I'd love to hear your ideas and suggestions for my next video, so feel free to comment below. Your support means a lot and helps me keep the channel going and growing!
👾 MY GEAR :
Blue Yeti Microphone amzn.to/3qACorF
Tripod ring light amzn.to/43G7flv
Neon sign amzn.to/3NcwxAs
Fairy lights amzn.to/443l518
🌼 CHAPTERS :
00:00 Welcome to the episode
00:53 While Hovering
03:25 While Pressing
04:51 On Click
06:06 Loop the interactions
07:46 Using the buttons
10:04 Coming Up Next
🤗 Disclosure: This video and description may contain affiliate links, meaning I'll receive a small commission if you click on one of the product links. I'm also an Amazon Associates affiliate and will earn a commission on qualifying purchases. 💛 This is at no additional cost to you.
#figmatutorial #figmadesign #figma_tutorial #figmatutorial #figmatips #figma #figmaupdate #config #config2023 #figma2023 #designtokens #tokens #variables #variablemodes #figmaprototype #prototype

Пікірлер: 57

@aleksandarvrhovac9690 10 ай бұрын

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

@TDSunshine 10 ай бұрын

Good tip! thanks! ☀️🙏🏻

@td7367 7 ай бұрын

Bro, I REALLY do thank you!!

@jamsonmsuzi9645 7 ай бұрын

Time saved, Thanks

@dlongodesign7026 6 ай бұрын

Wow! this tip was amazing! I had 960 buttons on mine.

@fafutuka 5 ай бұрын

Super thanks to both of you

@isseihyoudou5522 4 ай бұрын

Thanks! Your content is amazing, you are so organized and I felt your passion for what you are doing, I watched the video mesmerized.

@TDSunshine 4 ай бұрын

thanks! 🙏🏻💛☀️

@1deplatt 11 ай бұрын

these videos are great. the most comprehensive and easy to follow on KZfaq. It DOES however show the shortcomings of Figma in as much as there is TOO MUCH ENGINEERING for the designer.

@TDSunshine 11 ай бұрын

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 ! ☀️

@filipeamilton2879 11 ай бұрын

Very cool I really like this series s2

@TDSunshine 11 ай бұрын

Thanks! ☀️🙏🏻

@0bifrancisca765 10 ай бұрын

Hi thanks alot, i got confused at a point in the buttons video, that because I am new to design system but I am taking one step at as time thanks alot

@TDSunshine 10 ай бұрын

Your'e welcome! Figma has so much to offer so it can be very overwhelming at the start! take your time and just keep practicing 🤗☀️💛

@grafikaya Ай бұрын

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

@TDSunshine Ай бұрын

Great ideas! That's why I love Figma, there are so many ways to approach the same thing! ☀️🙏🏻

@atharnadeem6947 Ай бұрын

@grafikaya I have tried this approach but always messed it up while changing the size after changing the state of the button.

@thearaav6670 10 ай бұрын

Thanks your tutorial was very useful. Before I used to see the conflict (Click) in the prototype so I removed click interaction. I wonder Why?

@TDSunshine 10 ай бұрын

Thanks! There have been lots of updates in prototyping recently so maybe something that wasn't possible before is possible now ☀️🥳

@rob.creative 10 ай бұрын

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 10 ай бұрын

Yeah you could definitely do that! It all depends on how far ahead you planned and which way around you are working 🙃☀️

@rob.creative 10 ай бұрын

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

@TDSunshine 10 ай бұрын

Happy to help! ☀️ Thanks and Thank you for subscribing! 🙏🏻💛

@ronbrown5194 6 ай бұрын

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?

@TDSunshine 6 ай бұрын

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! ☀️🤗

@ronbrown5194 6 ай бұрын

@@TDSunshine I checked and the interaction is definitely coming from the hover variant to the focused. I don't see any prototype warnings either.

@margaritasyngrou4367 Ай бұрын

Same here. Any chance that you've found the solution, remember it and want to share? 😁

@streamx2 11 ай бұрын

How many videos are in this series. Thank you for your time creating these videos

@TDSunshine 11 ай бұрын

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? ☀️

@waqasgill3411 11 ай бұрын

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

@streamx2 11 ай бұрын

@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

@pauljessee8611 6 ай бұрын

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?

@TDSunshine 6 ай бұрын

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 - kzfaq.info/get/bejne/nKhdZ8yc19qXnZ8.htmlsi=yfGYKnYV8Zu49cgd kzfaq.info/get/bejne/d5d1jM6Tr6_IeYU.htmlsi=0H3a3qvqcbU1x2_0

@pauljessee8611 6 ай бұрын

Thanks so much! I believe I got it. I'll give it a whirl and see how it goes. If not, a video would always be appreciated!@@TDSunshine

@kriswayne7938 11 ай бұрын

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

@TDSunshine 11 ай бұрын

Great idea! will add to my list!

@kriswayne7938 11 ай бұрын

Thank you. I hope it doesn't come out too late 😅

@ronbrown5194 6 ай бұрын

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.

@TDSunshine 6 ай бұрын

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?

@ronbrown5194 6 ай бұрын

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

@TDSunshine 6 ай бұрын

@@ronbrown5194 and right now what happens when you press on the hover button? It doesn’t change to focused at all?

@ronbrown5194 5 ай бұрын

@@TDSunshine That's correct. It won't change to focused.