Figma Prototyping - Button Component Interactions | Part 6 | Figma Tutorial Step-by-Step
Vložit
- čas přidán 5. 08. 2024
- 🚨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 - Jak na to + styl
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
Good tip! thanks! ☀️🙏🏻
Bro, I REALLY do thank you!!
Time saved, Thanks
Wow! this tip was amazing! I had 960 buttons on mine.
Super thanks to both of you
Thanks! Your content is amazing, you are so organized and I felt your passion for what you are doing, I watched the video mesmerized.
thanks! 🙏🏻💛☀️
Very cool I really like this series s2
Thanks! ☀️🙏🏻
these videos are great. the most comprehensive and easy to follow on CZcams. 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 ! ☀️
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
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 🤗☀️💛
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?
Yeah you could definitely do that! It all depends on how far ahead you planned and which way around you are working 🙃☀️
@@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!
Happy to help! ☀️ Thanks and Thank you for subscribing! 🙏🏻💛
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
Great ideas! That's why I love Figma, there are so many ways to approach the same thing! ☀️🙏🏻
@grafikaya I have tried this approach but always messed it up while changing the size after changing the state of the button.
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?
Thanks! There have been lots of updates in prototyping recently so maybe something that wasn't possible before is possible now ☀️🥳
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! ☀️🤗
@@TDSunshine I checked and the interaction is definitely coming from the hover variant to the focused. I don't see any prototype warnings either.
Same here. Any chance that you've found the solution, remember it and want to share? 😁
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.
@@ronbrown5194 and right now what happens when you press on the hover button? It doesn’t change to focused at all?
@@TDSunshine That's correct. It won't change to focused.
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 -
czcams.com/video/fB-4ikrt3mk/video.htmlsi=yfGYKnYV8Zu49cgd
czcams.com/video/A1EYkbJIdIQ/video.htmlsi=0H3a3qvqcbU1x2_0
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
How many videos are in this series. Thank you for your time creating these videos
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
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
Great idea! will add to my list!
Thank you. I hope it doesn't come out too late 😅
Watch
🙏🏻
please watch
@@TDSunshine
Hi how are you
☀️
Good morning how are you?
👍🏼☀️
You are completed very short stuff this time. 😂. I will expecting more content next time or atleast 2 videos weekly. Thanks
Short but packed with content 🙃 I will keep uploading at my own schedule. Thanks 🤗☀️
Waiting for carousel ads
⏳ I have a few more videos in the works before I can get to it ☀️
ok! Make as soon as possible!@@TDSunshine