Thanks for watching. I've mentioned in the description that you need Figma Pro to be able to use this feature. Sorry for missing that in the audio at the beginning. If you have an education account, you may use this.
I just wanted to leave a comment saying thank you. I needed to learn how to use Figma in a few days in order to do a project for my grad school program, and this video helped me out a lot!
FINALLYYYYYY! Thank you so much for this video, I have been trying forever to understand how to apply the variables in the project that I'm current working on and didn't find any tutorial that could help me so far. I understand now that I have to create a nest of components to transfer the color variables in order to have the hover effect in every item of my lists. Your content was exactly what I needed! Thanks thanks thanks
It worked! Wow! The only thing that did not work was in Step 3. Selecting Interaction and selecting Variable gave me a message that I would need to pay a pro to do this for me. Therefore, I will not be able to change the top button to say the name of the selected button. This is OK, bc I can link the selection to the proper frame, so its fine. So glad to get this far with this task! thank you!!
This is cool for really specific edge cases of a drop-down component for really in depth usability testing but starts to chew a lot of time when offering a global drop down component that has lots of variations of options to select. How do you manage doing this vs communicating the intent or selecting 1 option when designing for a product?
It was an amazing tutorial! I learned a lot, I just could not continue when I tried to copy and paste inside the list it didn't do it like you did so at the end it didn't work for me. I must be doing something wrong just not sure what. I am just starting in UI Design so I have a lot to learn. Thank you so much for the tutorial!
I have a pc so I don´t have cmd and I can´t get the list to auto align itself as you do with cmd+C at 9:55. I´ve tried ctrl+C, Alt+C and all different varriations but I can´t get it to work
You shouldv'e mentioned that i need to subscribe for Figma Professional. Because professionals will know it without watching this tutoring, infact they'll teach others like you are doing. But newbies like me will search for this tutorial and then boom they need to purchase 😂 i followed all the step then stopped and now I'm crying in the corner thinking how broke i am
just a quick tip: sign up for the education plan, give 'em a paragraph about your 'seminar instruction,' class, or outright total bs; it don't matter, they instantly approve without even reading any of it. The only thing you do have to do is attach a screenshot of your schedule. I'm sure you've uploaded your example schedule to Goggle images from 'inserted university here' anyways though! Don't we all? 🫡
As user @cour10e22 mentioned, Theres a mistake at 12:00 - you are adding the click handling to the text, not the button. This means user has to click the text to select dropdown values, which is not how dropdowns should work. BUT: If you try to add the click handler to the button, for some reason Figma wont allow setting "Change go" to "Collapsed" (which seems like a bug). Does anyone know the reason for this behaviour?
I had to solve the issue by adding a rectangle that covers the entire area to the buttons (to the same level as text) with 0% fill visibility. And then adding the click handler to that. Figma seems to still require weird hacks when it comes to interactions... =(
Thanks for the video Ricardo! Is there a way to give an affordance of what is selected when an option is selected? So if apple is selected , can we have a tick or something one that in the apple button on the drop down?
So simple yet so elegant. Pretty straight forward with absolutely no mess like crating a million frames. I am glad I stumbled upon your video. Thank you so much!! Oh, I subscribed too! :)
This is a great way to circumvent the problem of not being able to use variants inside nested instances. Very smart! I wonder if it would be possible to create a fully responsive component where you can (on instances) replace the strings for whatever the user types. This is great if you want to create a specific prototype, but not very useful on a design system.
This video is awesome. I've been looking for a good tutorial on dropdowns for months. You presented the tutorial in a step by step, easy to understand method. Thank you so much!
Yes, of course. Here's the revised version of the text: "Thank you, Ricardo, for this tutorial. It's extremely useful. However, from a UX perspective, I'd like to suggest adding something to the dropdown prototype. While the tutorial was focused on creating a dropdown, it would be worth mentioning for junior designers that if we have one item selected (e.g. Apples), it's okay to change the dropdown label to reflect that. But what if we have more than one item selected? In that case, the label should indicate the total number of selected items, such as 'Apples +1,' 'Apples +2,' and so on. It may be challenging to implement this in the prototype design. Also, it would be helpful to have checkmarks or checkboxes to indicate which items are selected. For long dropdown lists, including a 'Clear Selection' or 'Reset' option at the top of the dropdown would make it easy for users to clear the list. Overall, it's a valuable tutorial!"
Thanks for commenting! Yes, this was just a simple example but Dropdowns can be more complex, can have tags to indicate more than one selection, trees when open, and the actions you mentions. But for this tutorial I've made it simpler. Problably in the future I can make one with that :)
Pretty cool use of variables! Using this method though, when opening the select menu in a layout, it will push down everything below it, yes? Might be better too design as a "open overlay" instead of as a variant. More troublesome is how do I unselect anything? I do not want to be locked in to a selection. But there is no way to remove my selection or "reset" the field.
Thanks for the well explained video. For me it doesn't work at 9:07 to put the fruit list into the dropdown expandable. How do i select both components at the same time and then copy paste? it doesn't work :(
The problem with dropdowns inside a autolayout container is that move all elements down, or if I put that at a fixed position it show the options below other elements
This is a very good watch. Thank you so much for putting this out here. You are really a life saver. I have question though: How is it that the component you created i.e the button with the hover variant affects the drop down menu. Like, it looks as if they are not connected yet they affect each other. At first, I thought it was because it used the color from the 'color' variable, but its not so because I changed the fill of the hover variant to a random color and it reflected in the prototype. I am a bit confused there
Thanks for commenting! I think I got the question. So, you start by creating the two buttons states at the beginning, then when you create the dropdown variant you are using the button instances so it will bring the states you done in the beginning. As long as you keep use the base button instance, they will keep the same style.
Hi Ricardo I have a excel sheet with 3 columns with different number values. I have checked the variables but if I should go through all that i would really have problems. I have 9 small boxes and textboes inside every one of the 9 boxes that need to change value if 1 or 2 of the boxes changes values. I find no calculation inside Figma. I have now made Excel sheet with 3 columns and a fixed value instead on each of the lines in Ecel so each line that covers 3 columns has to be updated IF I change only 1 box of the 9 boxes wth textvalue. But I feel this is to hard to fix. As I also see that that values is not even realtime changed from Excel after synched with OpenDoc. Can you somehow help me?
Thanks for the very very helpful information, My Question is, I'm using free version, how can I use variables prototype, is there any other way to do the process as simply as you done in the video,
Ricardo, thank you very much! Great idea with variables, I've made a component that can be multiplied by designers for their specific needs while advanced prototyping. Amazing possibilities!
Great video! Consider loading the expander as an overlay, so that in a case where you have a form with many inputs all around, that you don't have to fight with z-index where the button lists would go beneath other elements.
Fantastic work, bro! 👍 When I click on "apple" (13:04), it substitutes for the "select fruit," but the list of fruits still remains visible. Can you point out where I overlooked making the fruit list disappear?
Thank you so much for this Tutorial. It was very helpfull. I have a question the dropdown is transparent how Can I solve this issue . It is not functioning well because it is overlapping with the components it drops over .
Is there a way of making one component for the dropdown that will work in any scenario? In our app we have loads of dropdown lists, I don't want to have to create a component for every single one. This is nice for a one off dropdown but doesn't work as a reusable component.
great video, would have really helped to alert in the start of the video that its a Figma Pro feature because who really reads all the description before watching. would have saved some people a lot of time
Thank you Ricardo. I have a question about multiple dropdown menus: I used your approach to make multiple dropdown menus but quickly found out I can pull down every single menu items. Is there any way to limit the number of dropped-down menu to just one? Tried boolean variables but still couldn't solve this issue.
Thanks so much for this! A couple questions. Why do you have to apply the "change variable" + "change state to" to the text element? I realized this was the only way to do it when I tried to apply these interactions to the nested "list item" component and I couldn't figure out why on earth it would allow me to change the variable, but wouldn't let me select the collapsed state of the dropdown. So, as in your video, I had to go a step further and apply to the text element within the list item component in order to make this work. There must be some logic to it since it simply would not work when I tried to do it the other way, but it felt like a bug to me. Also, is there currently a way to do something like "change the text string in the dropdown to whatever the text string is that I'm clicking on" instead of having to define each and every variable? Thank you again!
Great tutorial, Ricardo. Any suggestions on how to deal with a design system where the fields are already created as components outside of the working file? In my case, the text layer in the component is set as a text property, and when trying to assign a variable, the icon to assign any local variables is not shown in the tool pane. Does it make sense?
Thanks, mate, this tutorial helped me a lot. One thing I've noticed is that when inserting the component into a form on a page with other inputs, the dropdown will push the bottom content since it's not an overlay, and if you try and add the dropdown as absolute into the instances, it won't push the bottom content. Still, it will go behind, and there is no way to control the z-index. Any suggestion.
i got stuck when i get to the a minute 12:07 AND I ADD click to change it wont let me select COLLAPSE, always keep it ad expanded, i tried everything and redo it many times and get the same problem
9:28 this doesn't work. If i move it in the slightest by dragging it automatically goes outside the component. if i cut it paste it again inside the component, it puts it misaligned. I can use the left and arrow keys but not the down key to move it. Anybody knows why?
@@RicardoCostaDesign Thank you for your reply. This tutorial actually helped me a lot in understanding variables and instances on components. i am now applying the basics in a lot of other forms, not just dropdowns :p
@@RicardoCostaDesign - Wonderful. I'm just adjusting the auto-layout properties, so the up/down arrow always stays in place (and doesn't give the end user whiplash). Obrigado.
I cant find an answer for my problem anywhere on the internet, maybe you can help me? I need to use multiple dropdown menus, one under the other, but they cant move when i expand the list, and i need then to close when clinckng outside
Hi Ricardo, you did great job. It makes really easier to design dropdown menu. On the other hand, there are more than one dropdown menus in my same frame and I noticed that when I select one of them from the dropdown menu, every dropdown menu change to the same item, but I need them as different selective items. How can I solve this problem? Could you help me in this situation please? I really appreciate.
Is it possible to make the dropdown a separate frame? I have a separate frame with all the country names. From my home page I want click the dropdown icon, which navigates me to the countries page, select a country and go back to the home page where the new selected country is displayed.
Thanks Ricardo, it works, however when I have multiple inputs aligned vertically with autolayout, the dropdown is shown under the inputs below, even when all the inputs are in order, any idea on how to solve that issue?
I followed all the steps but when i preview the button changes from collapsed to expanded but without showing me the list of fruit to choose from. What did I do wrong?
Nice idea. I tried creating a side bar with 6 buttons. There is a dropdown on the second and fifth buttons. The dropdown is floating above the main buttons. Couldn't figure out what was the challenge. Can you do a video of that kind?
Can we use text property with text variable? I'm struggling with it since I create an input field component, and I add text property. I can't apply the text variable there. Do you have any suggestion? By the way, This video is very helpful for me. Thank you!
@@RicardoCostaDesign I believe it refers to an example. You choose "apple", and after this, you want to select another fruit. However, by default, "apple" remains highlighted. This is because it's actually the fruit that you currently have selected at that moment.
I made the same error. You need to keep it inside the same Auto Layout frame. Pay attention at ua-cam.com/video/DuJL8t4myms/v-deo.htmlsi=wn7i9cP7EgvoV2_d&t=575
I have a small problem right in the last part of the dropdown when I have to put the variable set option I get this message "need advanced prototyping features? To use advanced prototyping features, move this file from your drafts to a paid team"
It was good, but too difficult for a person who is new, we can do this by much easier method for small number of items by just creating a component and make as much variants as much options you have and add hover options to those variants. for 5 to 10 options I use this method and it works very fine. I will prefer your method when I am making dropdown for more than 10 options. otherwise it is lengthy.
Thanks for commenting! Yes, this is just another way to do dropdowns. When working in design systems where you could have a lot of variables, this would be a go to. In simple cases your insights may work better.
The issue I'm encountering is that when there are 4 identical dropdowns in a row, selecting an option in one dropdown changes the value of all the others. Any ideas?
This is the best video ever, i was creating 100 frames only for the dropdowns because i couldn’t find a video like this, now i used this and it worked amazing in my prototype without using that many frames, Thank you! new follower, please make more videos like this, really helpful! 🎉☺️👏🏻
I cant set fruit list into the select Fruit,, i select fruit list and expended component but when i should copy ,, i dont understand i have to copy frutis list before select select expended component, anyone should help me
Thanks so much, really like your tutorials. I'm struggling on dropdown menu for different products. Each product has their own variable but when I choose option on drop down menu for one product, other products' dropdown option also change. Do you know how to fix this?
Thanks for watching. I've mentioned in the description that you need Figma Pro to be able to use this feature. Sorry for missing that in the audio at the beginning. If you have an education account, you may use this.
I just wanted to leave a comment saying thank you. I needed to learn how to use Figma in a few days in order to do a project for my grad school program, and this video helped me out a lot!
You can set the text layer to “fill” so the icon doesn’t change its position. Or select gap “auto” instead a fixed pixel size.
Thanks. I've been search this solution for 2 hours xD
yeah this kind of bothered me when watching the video lol glad I'm not the only one noticing it
Nice.
FINALLYYYYYY! Thank you so much for this video, I have been trying forever to understand how to apply the variables in the project that I'm current working on and didn't find any tutorial that could help me so far. I understand now that I have to create a nest of components to transfer the color variables in order to have the hover effect in every item of my lists. Your content was exactly what I needed! Thanks thanks thanks
Very appreciated for that comment! Glad it helped 🙌
I've been looking for this solution using variables for a while now. Thanks!
Thanks for commenting!
It worked! Wow! The only thing that did not work was in Step 3. Selecting Interaction and selecting Variable gave me a message that I would need to pay a pro to do this for me. Therefore, I will not be able to change the top button to say the name of the selected button. This is OK, bc I can link the selection to the proper frame, so its fine. So glad to get this far with this task! thank you!!
I am facing the same issue in prototyping a selected option. Can you please help me to figure it out.
Man, the very first step is to buy Figma Pro subscription... Lol, the video's worth watching
This is cool for really specific edge cases of a drop-down component for really in depth usability testing but starts to chew a lot of time when offering a global drop down component that has lots of variations of options to select. How do you manage doing this vs communicating the intent or selecting 1 option when designing for a product?
It was an amazing tutorial! I learned a lot, I just could not continue when I tried to copy and paste inside the list it didn't do it like you did so at the end it didn't work for me. I must be doing something wrong just not sure what. I am just starting in UI Design so I have a lot to learn. Thank you so much for the tutorial!
I have a pc so I don´t have cmd and I can´t get the list to auto align itself as you do with cmd+C at 9:55. I´ve tried ctrl+C, Alt+C and all different varriations but I can´t get it to work
You shouldv'e mentioned that i need to subscribe for Figma Professional. Because professionals will know it without watching this tutoring, infact they'll teach others like you are doing. But newbies like me will search for this tutorial and then boom they need to purchase 😂 i followed all the step then stopped and now I'm crying in the corner thinking how broke i am
Thank you for the comment and saving my time
Thanks brother 👍 for the warning
Totally agree.
You can apply for figma's education plan and get to try these features for free in a single team file
just a quick tip: sign up for the education plan, give 'em a paragraph about your 'seminar instruction,' class, or outright total bs; it don't matter, they instantly approve without even reading any of it. The only thing you do have to do is attach a screenshot of your schedule. I'm sure you've uploaded your example schedule to Goggle images from 'inserted university here' anyways though! Don't we all? 🫡
Its an awesome tutorial, amazingly straightforward with no mess! I just wish I had pro version:)
Yes me too :)
Only noticed it when i started the prototyping part
Thanks for commenting! I've just noticed I didn't mentioned in the audio, so I correct in the description and pinned a comment.
As user @cour10e22 mentioned, Theres a mistake at 12:00 - you are adding the click handling to the text, not the button. This means user has to click the text to select dropdown values, which is not how dropdowns should work. BUT: If you try to add the click handler to the button, for some reason Figma wont allow setting "Change go" to "Collapsed" (which seems like a bug). Does anyone know the reason for this behaviour?
I had to solve the issue by adding a rectangle that covers the entire area to the buttons (to the same level as text) with 0% fill visibility.
And then adding the click handler to that. Figma seems to still require weird hacks when it comes to interactions... =(
Thanks for the video Ricardo! Is there a way to give an affordance of what is selected when an option is selected?
So if apple is selected , can we have a tick or something one that in the apple button on the drop down?
So simple yet so elegant. Pretty straight forward with absolutely no mess like crating a million frames. I am glad I stumbled upon your video. Thank you so much!!
Oh, I subscribed too! :)
Thank you so much for the comment 🙌
How can you connect after finish this, a fruit you select with a specific frame? to show a new screen or frame when you select each fruit?
This is amazing! I spent so much time looking for a video like this, so exciting.
So cool!
Can someone please explain what shortcut did he said at 9:53 timestamp for putting the fruitlist component back inside the expanded component ...
Omg I just tried and it actually works! Thank you for sharing, very helpful > w
Thanks for commenting!
This is a great way to circumvent the problem of not being able to use variants inside nested instances. Very smart! I wonder if it would be possible to create a fully responsive component where you can (on instances) replace the strings for whatever the user types. This is great if you want to create a specific prototype, but not very useful on a design system.
Hey @marcoc7388 great point! I haven't tested. I will explore that challenge and if I could know how to do it, I will share with you :)
if you have 10 different dropdowns there is no way to do it with this method
Excellent job man, very helpful, and thanks for sharing the file as well!
This video is awesome. I've been looking for a good tutorial on dropdowns for months. You presented the tutorial in a step by step, easy to understand method. Thank you so much!
Thanks a lot for commenting!
Thanks a lot, Ricardo. I have made this. You make it very easy steps. So valuable content for this community. So much appreciated
🥰😇
Thanks for your feedback 🙌
thanks... it looks simple function
but quite tough for a beginner. but the steps you show are detailed and easy to follow
Yes, of course. Here's the revised version of the text:
"Thank you, Ricardo, for this tutorial. It's extremely useful. However, from a UX perspective, I'd like to suggest adding something to the dropdown prototype. While the tutorial was focused on creating a dropdown, it would be worth mentioning for junior designers that if we have one item selected (e.g. Apples), it's okay to change the dropdown label to reflect that. But what if we have more than one item selected? In that case, the label should indicate the total number of selected items, such as 'Apples +1,' 'Apples +2,' and so on. It may be challenging to implement this in the prototype design. Also, it would be helpful to have checkmarks or checkboxes to indicate which items are selected. For long dropdown lists, including a 'Clear Selection' or 'Reset' option at the top of the dropdown would make it easy for users to clear the list. Overall, it's a valuable tutorial!"
Thanks for commenting! Yes, this was just a simple example but Dropdowns can be more complex, can have tags to indicate more than one selection, trees when open, and the actions you mentions. But for this tutorial I've made it simpler. Problably in the future I can make one with that :)
Pretty cool use of variables!
Using this method though, when opening the select menu in a layout, it will push down everything below it, yes? Might be better too design as a "open overlay" instead of as a variant.
More troublesome is how do I unselect anything? I do not want to be locked in to a selection. But there is no way to remove my selection or "reset" the field.
Thanks for the well explained video. For me it doesn't work at 9:07 to put the fruit list into the dropdown expandable. How do i select both components at the same time and then copy paste? it doesn't work :(
Thanks for commenting! I didn't get the questions...
12:06 , Why i can't select "Change to" after i set variable?
The problem with dropdowns inside a autolayout container is that move all elements down, or if I put that at a fixed position it show the options below other elements
You can fix this by changing the stacking context of the parent container to "first on top".
But this is still super tedious
This is a very good watch. Thank you so much for putting this out here. You are really a life saver. I have question though: How is it that the component you created i.e the button with the hover variant affects the drop down menu. Like, it looks as if they are not connected yet they affect each other. At first, I thought it was because it used the color from the 'color' variable, but its not so because I changed the fill of the hover variant to a random color and it reflected in the prototype. I am a bit confused there
Thanks for commenting! I think I got the question. So, you start by creating the two buttons states at the beginning, then when you create the dropdown variant you are using the button instances so it will bring the states you done in the beginning. As long as you keep use the base button instance, they will keep the same style.
really clever and clearly explained - thank you!
Thank you :)
Hi Ricardo
I have a excel sheet with 3 columns with different number values.
I have checked the variables but if I should go through all that i would really have problems.
I have 9 small boxes and textboes inside every one of the 9 boxes that need to change value if 1 or 2 of the boxes changes values.
I find no calculation inside Figma.
I have now made Excel sheet with 3 columns and a fixed value instead on each of the lines in Ecel so each line that covers 3 columns has to be updated IF I change only 1 box of the 9 boxes wth textvalue.
But I feel this is to hard to fix. As I also see that that values is not even realtime changed from Excel after synched with OpenDoc.
Can you somehow help me?
Thank you for this! This makes creating dropdowns so much simpler, thank you for the clear explanation!!
Thanks for commenting!
More simple and consistent with the variables, thanks a lot you help me so much Ricardo !
Thanks for commenting! I've just noticed I didn't mentioned in the audio, so I correct in the description and pinned a comment.
Thank you for this very helpful video. I have one question, can you also add "close when clicking outside" when the dropdown is visible? Thanks!
Thanks! great tutorial
Thanks for commenting!
I’ve been looking for tutorials like these! Thank you SO much!
Thanks a lot for commenting!
Thanks for the very very helpful information, My Question is, I'm using free version, how can I use variables prototype, is there any other way to do the process as simply as you done in the video,
ooooo got all the way to 12 minutes perfectly before it prompted me to upgrade!
Thanks for commenting! I've just noticed I didn't mentioned in the audio, so I correct in the description and pinned a comment.
Ricardo, thank you very much!
Great idea with variables, I've made a component that can be multiplied by designers for their specific needs while advanced prototyping. Amazing possibilities!
Absolutely! Thanks for that feedback! Glad you like it
Great video! Consider loading the expander as an overlay, so that in a case where you have a form with many inputs all around, that you don't have to fight with z-index where the button lists would go beneath other elements.
Hi how would you do that?
I would also love to know how to do that
Hi, I am having this problem in my prototype, how can I put the inputs in overlay?
Fantastic work, bro! 👍 When I click on "apple" (13:04), it substitutes for the "select fruit," but the list of fruits still remains visible. Can you point out where I overlooked making the fruit list disappear?
Thank you so much for this Tutorial. It was very helpfull. I have a question the dropdown is transparent how Can I solve this issue . It is not functioning well because it is overlapping with the components it drops over .
Thanks for the comment. Did you see if it's placed correctly inside the frame on the layers panel?
Really helpful. Thank you so much !!!
Thanks for commenting!
Is there a way of making one component for the dropdown that will work in any scenario? In our app we have loads of dropdown lists, I don't want to have to create a component for every single one. This is nice for a one off dropdown but doesn't work as a reusable component.
great video, would have really helped to alert in the start of the video that its a Figma Pro feature because who really reads all the description before watching. would have saved some people a lot of time
Thanks for commenting! I've just noticed I didn't mentioned in the audio, so I correct in the description and pinned a comment.
Thank you Ricardo. I have a question about multiple dropdown menus: I used your approach to make multiple dropdown menus but quickly found out I can pull down every single menu items. Is there any way to limit the number of dropped-down menu to just one? Tried boolean variables but still couldn't solve this issue.
Very appreciated, easy and calmly explained. Thank you for contributing and making me understand variabels and more advanced prototyping.
Thanks, glad it was valuable for you :)
Thanks so much for this! A couple questions. Why do you have to apply the "change variable" + "change state to" to the text element? I realized this was the only way to do it when I tried to apply these interactions to the nested "list item" component and I couldn't figure out why on earth it would allow me to change the variable, but wouldn't let me select the collapsed state of the dropdown. So, as in your video, I had to go a step further and apply to the text element within the list item component in order to make this work. There must be some logic to it since it simply would not work when I tried to do it the other way, but it felt like a bug to me.
Also, is there currently a way to do something like "change the text string in the dropdown to whatever the text string is that I'm clicking on" instead of having to define each and every variable? Thank you again!
Great tutorial, Ricardo. Any suggestions on how to deal with a design system where the fields are already created as components outside of the working file?
In my case, the text layer in the component is set as a text property, and when trying to assign a variable, the icon to assign any local variables is not shown in the tool pane. Does it make sense?
Thanks, mate, this tutorial helped me a lot. One thing I've noticed is that when inserting the component into a form on a page with other inputs, the dropdown will push the bottom content since it's not an overlay, and if you try and add the dropdown as absolute into the instances, it won't push the bottom content. Still, it will go behind, and there is no way to control the z-index. Any suggestion.
Thank you for sharing, but I am interested if I can use it for a mobile app?
i got stuck when i get to the a minute 12:07 AND I ADD click to change it wont let me select COLLAPSE, always keep it ad expanded, i tried everything and redo it many times and get the same problem
having the same exact problem. can't change the property to collapse.
Have you selected only the text, not the whole "button"?
OMG this tutorial is super helpful! Thank you Ricardo!
Thanks for commenting!
9:28 this doesn't work. If i move it in the slightest by dragging it automatically goes outside the component. if i cut it paste it again inside the component, it puts it misaligned. I can use the left and arrow keys but not the down key to move it. Anybody knows why?
Argh, nevermind, you have to click on the icon BELOW otherwise it wont work. I was clicking the icon that said "size to fit"
Happy that you found it. And thanks for the comment :)
@@RicardoCostaDesign Thank you for your reply. This tutorial actually helped me a lot in understanding variables and instances on components. i am now applying the basics in a lot of other forms, not just dropdowns :p
Super helpful, thanks for this!
Thank you!
that's a great solution, but what about if you want to add a bit of style with motion?
Nice tutorial. But how does this work with a Design System? Variables should be created when you're in a different document? Does this can be applied?
awesome thank you! what a lifesaver! I found that if you right click the variable you can duplicate it, saves a bit of typing time
Thanks a lot! Yes, good tip :)
@@RicardoCostaDesign - Wonderful. I'm just adjusting the auto-layout properties, so the up/down arrow always stays in place (and doesn't give the end user whiplash). Obrigado.
How keeP selected option defferent? on click only change variables , not states
It's fine, but what to do with the selected state in the list for the second opening if the selection was made?
I cant find an answer for my problem anywhere on the internet, maybe you can help me? I need to use multiple dropdown menus, one under the other, but they cant move when i expand the list, and i need then to close when clinckng outside
Hi Ricardo, you did great job. It makes really easier to design dropdown menu. On the other hand, there are more than one dropdown menus in my same frame and I noticed that when I select one of them from the dropdown menu, every dropdown menu change to the same item, but I need them as different selective items. How can I solve this problem? Could you help me in this situation please? I really appreciate.
Is it possible to make the dropdown a separate frame? I have a separate frame with all the country names. From my home page I want click the dropdown icon, which navigates me to the countries page, select a country and go back to the home page where the new selected country is displayed.
Thanks Ricardo, it works, however when I have multiple inputs aligned vertically with autolayout, the dropdown is shown under the inputs below, even when all the inputs are in order, any idea on how to solve that issue?
What if I have 20 different dropdowns for my complete product, if i try to create new one how complicated it will be in local variable section.
I followed all the steps but when i preview the button changes from collapsed to expanded but without showing me the list of fruit to choose from. What did I do wrong?
how do you do scrollable drop down following this implementation?
Nice idea. I tried creating a side bar with 6 buttons. There is a dropdown on the second and fifth buttons. The dropdown is floating above the main buttons. Couldn't figure out what was the challenge. Can you do a video of that kind?
How do you prevent the dropdown from opening behind components underneath it, like in a form?
Make sure you have the dropdown right positioned in the layers panel inside the frame. Sometimes it goes out.
Can we use text property with text variable? I'm struggling with it since I create an input field component, and I add text property. I can't apply the text variable there. Do you have any suggestion?
By the way, This video is very helpful for me. Thank you!
Thanks for commenting! Yes, you should be able to add text property the same way you create this variable. I can try to create a video on that.
I would've liked it if you had the dropdown item that is selected to be highlighted.
Don't know if I follow you. While hovering the item inside dropdown? or while collapsed mode?
@@RicardoCostaDesign I believe it refers to an example. You choose "apple", and after this, you want to select another fruit. However, by default, "apple" remains highlighted. This is because it's actually the fruit that you currently have selected at that moment.
this is great! thanks :)
Thank you!
At 15:34, "Change to" doesn't work. Won't allow me to swap instance to "collapsed"
I made the same error. You need to keep it inside the same Auto Layout frame. Pay attention at ua-cam.com/video/DuJL8t4myms/v-deo.htmlsi=wn7i9cP7EgvoV2_d&t=575
Me too, how you face it?
@@JuanPexaPark I've kept it in the same auto layout frame. could you explain it more? thank you
I had the same error and then used the keypad arrows as instructed. If it leaves the auto layout frame at any point, it breaks @@aiwillsurvaiv
you would need to do the step over if thats the case and not simply include in the auto layout
Hi I have a little, issue my drop down comes out small after a website menu design
I have a small problem right in the last part of the dropdown when I have to put the variable set option I get this message "need advanced prototyping features? To use advanced prototyping features, move this file from your drafts to a paid team"
This is some how more complex than expected.
Question: How do you fix the arrow position so it's not bouncing left to right when selecting? I want it always on the right in the same place.
Thanks for commenting! I've applied Auto layout (Shitt+A) when creating the button
It didn´t quite work out for me, for some reason the options don´t change colors when I hover over them
Thanks for commenting. Are you duplicating the instances after creating the button to keep the style?
It was good, but too difficult for a person who is new, we can do this by much easier method for small number of items by just creating a component and make as much variants as much options you have and add hover options to those variants. for 5 to 10 options I use this method and it works very fine. I will prefer your method when I am making dropdown for more than 10 options. otherwise it is lengthy.
Thanks for commenting! Yes, this is just another way to do dropdowns. When working in design systems where you could have a lot of variables, this would be a go to. In simple cases your insights may work better.
The issue I'm encountering is that when there are 4 identical dropdowns in a row, selecting an option in one dropdown changes the value of all the others. Any ideas?
i need top up to get set variable feature in interaction prototype
Yes
thanks for the awesome tutorial
after you build it, can you edit in properties in a differint pages?
Amazing job. Thanks for sharing
Thank you!
What to do at 9:55 to bring it inside the expand?
This is the best video ever, i was creating 100 frames only for the dropdowns because i couldn’t find a video like this, now i used this and it worked amazing in my prototype without using that many frames, Thank you! new follower, please make more videos like this, really helpful! 🎉☺️👏🏻
Thanks for the comment Isabela, and glad it was helpful!
Hi, it's possible to do that, but where can we add all the options in the form of a tag?
My figma doesn't show any absolute position what should I do?
Great tutorial ❤🫡
Thank you!
If I wanted to use this approach for a design system component, how would you alter the approach to handle options that are "not fruit"?
I cant set fruit list into the select Fruit,, i select fruit list and expended component but when i should copy ,, i dont understand i have to copy frutis list before select select expended component, anyone should help me
Please which is the option key? I am finding it to duplicate
Awesome tutorials dude
Thank you! 🙌
How to convert it in vscode ?
Thanks so much, really like your tutorials. I'm struggling on dropdown menu for different products. Each product has their own variable but when I choose option on drop down menu for one product, other products' dropdown option also change. Do you know how to fix this?
could you please make another new updated video with the new Figma?
ummm ok but i want the chevron to stay in the same spot and not adjust to the word's length...how can i achieve that?
Thanks a lot, excelent explanation. Sadly this can't be done in a free account
Thanks for commenting! I've just noticed I didn't mentioned in the audio, so I correct in the description and pinned a comment.
i can't set variable in prototype 11:50