OMG THANK YOU. To anyone looking for a tutorial on how to make drop downs in Figma: THIS IS THE WAY! I can't believe how much time I wasted on other tutorials. Your approach is super helpful because you explain not just what you are doing but why. I ended up making components out of the drop-downs which also has saved me a bunch of time. I will definitely subscribe! Thanks again!
Just finished your 10-video series and I am walking away with a comfort level that I did not have in Figma before. This series was well-organized and thoughtful. Thank You! I look forward to checking out more of your videos in the future.
Great video!! I was looking for someone else (apart from me) doing dropdowns with open overlay as a good practice instead of doing them with a component set with change to interaction. There’s a problem when you prototype a form or a screen with multiple interactive elements and the dropdown shows up over the other interactive elements because with change to you can still interact with the elements below the dropdown options in the screen, so you can interact with elements you don’t want in the screen, that’s not a problem with open overlay because you can only interact with the element you select: the current dropdown options. thanks!!
Great tip! I have also found sometimes instances don't resize well and can cause issues if you use them that way so I prefer overlays for that reason too ☀️🙏🏻💛
First time i comment the one video i ve watched because your teaching style is amazing. thank you so much for sharing tips and tricks like that. i hope ur channel will get more sub. so underrated
Thank you for your very well explained video ! I hope we can have a part two to see how we can integrate a function "if option one is selected, then option 1 becomes disabled" or something like that ! (I'll try to search a solution to this)
Can u please post a video about adding more option. After prototyping. Sometime we want to add more option to the drop down. In That case what can be done. Sorry if this sound a silly one. Iam a noob 🙈 By the way I love all ur videos absolutely brilliant. I love the way you teach.. with you videos I created my design system for my project. Thank u so much ❤
Great tutorial. I usually go with making the interaction between both default and hovered states to pressed happen because on mobile you won't have hover state, right? What do you think?
Only thing that is missing, is that selceted option being highlighted when opening the dropdown again. otherwise - thank you !! I didn't know you can change string values without having to turn it into mods.
I am working on something that is very similar to this except I want the text box to actually stay visible if user navigates their mouse in the text box but instead it disappears bcuz technically, their mouse is no longer hovering over the original trigger. Goal: mouse enters trigger or mouse hovering over trigger -> opens overlay. Mouse leaves or no longer hovering -> closed overlay UNLESS user is hovering over overlay. Any solutions? How can I do this with variables in Figma? Note: this is actually for a hovering over a menu item and not a tooltip.
hmmm great question! I tried answering this in writing but it's too complex hahah I have a few ideas how you can make this happen but I would say the easiest way would probably be to use components so when you hover it changes to a open menu variant and then it might be easier to make it respond to the mouse as you want. ☀️🙏🏻💛
this is very easy to understand thank you for the tutorial but, my selection option have colors, sure the text is changing but how can i also change the color when the option is selected?
OMG THANK YOU. To anyone looking for a tutorial on how to make drop downs in Figma: THIS IS THE WAY! I can't believe how much time I wasted on other tutorials. Your approach is super helpful because you explain not just what you are doing but why. I ended up making components out of the drop-downs which also has saved me a bunch of time. I will definitely subscribe! Thanks again!
aww thank you! Im glad it was helpful! ☀️🙏🏻💛
Just finished your 10-video series and I am walking away with a comfort level that I did not have in Figma before. This series was well-organized and thoughtful. Thank You! I look forward to checking out more of your videos in the future.
I always wanted to create a drop-down using variables, and you taught us how to do it in a very simple and effective way. Thank you so much!
You're welcome! ☀️🙏🏻💛
Great video!! I was looking for someone else (apart from me) doing dropdowns with open overlay as a good practice instead of doing them with a component set with change to interaction. There’s a problem when you prototype a form or a screen with multiple interactive elements and the dropdown shows up over the other interactive elements because with change to you can still interact with the elements below the dropdown options in the screen, so you can interact with elements you don’t want in the screen, that’s not a problem with open overlay because you can only interact with the element you select: the current dropdown options. thanks!!
Great tip! I have also found sometimes instances don't resize well and can cause issues if you use them that way so I prefer overlays for that reason too ☀️🙏🏻💛
First time i comment the one video i ve watched because your teaching style is amazing. thank you so much for sharing tips and tricks like that. i hope ur channel will get more sub. so underrated
Thank you so much ☀️🙏🏻💛
Super helpful. Thank you
Best video ever!! tyvm! Thank you for not talking tons at the beginning of the video!
haha you're welcome! ☀️🙏🏻💛
It really helped me . Thanks for sharing this
Glad it helped ☀️🙏🏻💛
This tutorial was sooo helpful, thank you!!
You're welcome! ☀️🙏🏻💛
It really helped me :) thanksssss keep on the right track
You're welcome! ☀️🙏🏻💛
Awesome, thanks for sharing 👍😊
You're welcome! ☀️🙏🏻💛
Thank you, dear friend, you explained it very beautifully and fluently. Good luck. 💜💜
Thank you! ☀️🙏🏻💛
Really great way....and nice explained....Thanx
You're welcome! ☀️🙏🏻💛
oooo-vaaa-leeeeyyyyyy 🤣
Thank you so much! Really great and simple tut!! Subscribing.
Thanks! you're welcome! ☀️🙏🏻💛
Thank you for your very well explained video ! I hope we can have a part two to see how we can integrate a function "if option one is selected, then option 1 becomes disabled" or something like that ! (I'll try to search a solution to this)
You're welcome! You can get some really complex functionalities going with multiple conditionals! ☀️🙏🏻💛
Thank you so much, i like your way it's easy and simple.
Thank you
You're welcome! ☀️🙏🏻💛
This is incredibly helpful
I'm glad! ☀️🙏🏻💛
Can u please post a video about adding more option. After prototyping. Sometime we want to add more option to the drop down. In That case what can be done.
Sorry if this sound a silly one. Iam a noob 🙈
By the way I love all ur videos absolutely brilliant. I love the way you teach.. with you videos I created my design system for my project. Thank u so much ❤
Thanks! great ideas I will add it to my list ☀️🙏🏻💛
Thank you soooooooooooooooooooooooooooo much, your each video really help me a lot
You're welcome! Great idea will add to my list! ☀️🙏🏻💛
Super good, as usual
Thanks! ☀️🙏🏻💛
Great tutorial. I usually go with making the interaction between both default and hovered states to pressed happen because on mobile you won't have hover state, right? What do you think?
Great tip! Yes, Mobile won't have hover so skipping to pressed is a good idea ☀️🙏🏻💛
Nice!
☀️🙏🏻💛
Just like you, your work is lovely too.😘
Thank you! ☀️🙏🏻💛
Only thing that is missing, is that selceted option being highlighted when opening the dropdown again. otherwise - thank you !! I didn't know you can change string values without having to turn it into mods.
hmm great idea! you can probably find a way to do this using prototyping. ☀️🙏🏻💛
Awaiting the next one😅😅
Coming soon... ☀️🙏🏻💛
I am working on something that is very similar to this except I want the text box to actually stay visible if user navigates their mouse in the text box but instead it disappears bcuz technically, their mouse is no longer hovering over the original trigger.
Goal: mouse enters trigger or mouse hovering over trigger -> opens overlay.
Mouse leaves or no longer hovering -> closed overlay UNLESS user is hovering over overlay.
Any solutions?
How can I do this with variables in Figma?
Note: this is actually for a hovering over a menu item and not a tooltip.
hmmm great question! I tried answering this in writing but it's too complex hahah I have a few ideas how you can make this happen but I would say the easiest way would probably be to use components so when you hover it changes to a open menu variant and then it might be easier to make it respond to the mouse as you want. ☀️🙏🏻💛
snif...missing brazilian portuguese in audio AI options 😢
this is very easy to understand thank you for the tutorial but, my selection option have colors, sure the text is changing but how can i also change the color when the option is selected?
You can connect the text fill colour to a colour variable and prototype it to change or create another variant to change to. ☀️🙏🏻💛
@TDSunshine I don't fully get it, but i'll try, and if you can make short tutorial about it I appreciate it, thanks a lot ✨
Nice :)
Thanks 😁☀️🙏🏻💛
Nice nice nice
☀️🙏🏻💛
NICE
☀️🙏🏻💛
Gobsmacked & Flabbergasted! 🙃
haha thanks! ☀️🙏🏻💛
I’m missing some features in Figma for some reason. Does anyone know why? I have the paid version, by the way.
Which features are you missing?
@TDSunshine. Please be my Tech Babe. I so much love your videos. Can you make a video on prototyping and understanding the various interactions ?
I have a whole playlist about prototyping and more to come! th-cam.com/play/PLx-zZQ15gdAqqQrJupHjAe9iC1cTkCcjB.html&si=U4m2hKxHJMykmKjt ☀️🙏🏻💛