STOP doing DROPDOWNS like this - Figma variables 2023

Подписаться 4,4 тыс.

Просмотров 157 тыс.

50% 1

👉Figma Professional psxid.figma.com/sqolu12rnye1-...
👉Try Figjam here psxid.figma.com/r84po22vy008-...
Hey friends, in this video I share with you 3 simple steps to create dropdown menus faster for your prototypes using variables. You don’t need anymore to create multiple variants to create a dropdown menu if you set right the variables in the beginning. You will gain a lot of time doing this.
You may need to have Figma Pro license to have access to the new figma variables feature.
You may follow the link to access the file in this video:
👉 Link to file: www.figma.com/community/file/...
Let me know in the comments what other topics you need to be covered!
#figma #dropdown #figmatutorial
Thanks for watching this video. If this video add value to you please make sure you subscribe the channel, like and comment the video so that I can keep up with content like this to help you become a better designer. 🙌
👉Subscribe Envato for unlimited downloads resources: 1.envato.market/zaNvOM
👉Try Adobe for free adobe.prf.hn/click/camref:110...
👉Host your website with Hostinger www.hostg.xyz/aff_c?offer_id=...
👉Tubebuddy - The ultimate RU-vid creators tool bit.ly/tubebuddyRicardo
Connect with me on social media
👉 Instagram / ricardocostadesign
👉 Facebook / ricardocostadesigner
👉 Linkedin / ricardocostadesign
👉 Twitter: / ricardocostaeu
👉 TikTok: / ricardocostadesign

Опубликовано:

17 авг 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 245

@RicardoCostaDesign 7 месяцев назад

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.

@hasibgns 8 месяцев назад

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

@keikejones5536 7 месяцев назад

Thank you for the comment and saving my time

@doyoob 7 месяцев назад

Thanks brother 👍 for the warning

@bena5543 7 месяцев назад

Totally agree.

@rahulrs4597 6 месяцев назад

You can apply for figma's education plan and get to try these features for free in a single team file

@Optable 6 месяцев назад

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? 🫡

@raulaguilar 8 месяцев назад

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.

@jaden_caruso 7 месяцев назад

Thanks. I've been search this solution for 2 hours xD

@patrikmedia 3 месяца назад

yeah this kind of bothered me when watching the video lol glad I'm not the only one noticing it

@sohan1645 7 дней назад

Nice.

@a.ha.pixels Месяц назад

Excellent job man, very helpful, and thanks for sharing the file as well!

@juliadelicato 6 месяцев назад

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

@RicardoCostaDesign 6 месяцев назад

Very appreciated for that comment! Glad it helped 🙌

@belowdelancey1025 6 месяцев назад

Super helpful, thanks for this!

@RicardoCostaDesign 6 месяцев назад

Thank you!

@sgetcoins4415 8 месяцев назад

Amazing job. Thanks for sharing

@RicardoCostaDesign 7 месяцев назад

Thank you!

@akbarbadsha25 9 месяцев назад

Thanks a lot, Ricardo. I have made this. You make it very easy steps. So valuable content for this community. So much appreciated 🥰😇

@RicardoCostaDesign 9 месяцев назад

Thanks for your feedback 🙌

@samweinberger271 7 месяцев назад

thanks for the awesome tutorial

@megancooksey 3 месяца назад

I’ve been looking for tutorials like these! Thank you SO much!

@RicardoCostaDesign 2 месяца назад

Thanks a lot for commenting!

@user-yc7wf7em3q 8 месяцев назад

really clever and clearly explained - thank you!

@RicardoCostaDesign 8 месяцев назад

Thank you :)

@GifAppel 6 месяцев назад

Thanks! great tutorial

@RicardoCostaDesign 2 месяца назад

Thanks for commenting!

@funwave7748 6 месяцев назад

Great tutorial. Thanks buddy

@RicardoCostaDesign 6 месяцев назад

Thank you!

@paulashcroft6225 7 месяцев назад

this is great! thanks :)

@RicardoCostaDesign 7 месяцев назад

Thank you!

@olenakitsak37 8 месяцев назад

Thank you very much!

@RicardoCostaDesign 8 месяцев назад

Thanks for watching :)

@fat3228 8 месяцев назад

Very appreciated, easy and calmly explained. Thank you for contributing and making me understand variabels and more advanced prototyping.

@RicardoCostaDesign 8 месяцев назад

Thanks, glad it was valuable for you :)

@Galacxia Месяц назад

This guy is a fricking rocket scientist. Just saved me days and days of work. I am, however, angry that the developer I hired to do the UI/UX for the app I'm developing DIDN'T do a single drop down combo box this way and I now have to go back and fix at least 15 combo boxes.

@danb9796 5 месяцев назад

I've been looking for this solution using variables for a while now. Thanks!

@RicardoCostaDesign 2 месяца назад

Thanks for commenting!

@prashantrastogi7265 9 месяцев назад

Awesome tutorials dude

@RicardoCostaDesign 9 месяцев назад

Thank you! 🙌

@baopham4207 6 месяцев назад

Really helpful. Thank you so much !!!

@RicardoCostaDesign 2 месяца назад

Thanks for commenting!

@liztsai534 3 месяца назад

OMG this tutorial is super helpful! Thank you Ricardo!

@RicardoCostaDesign 2 месяца назад

Thanks for commenting!

@yannmaury8353 3 месяца назад

More simple and consistent with the variables, thanks a lot you help me so much Ricardo !

@RicardoCostaDesign 2 месяца назад

Thanks for commenting! I've just noticed I didn't mentioned in the audio, so I correct in the description and pinned a comment.

@user-rx2ex3fp7x 3 месяца назад

Thank you for this! This makes creating dropdowns so much simpler, thank you for the clear explanation!!

@RicardoCostaDesign 2 месяца назад

Thanks for commenting!

@beckiehawk9315 3 месяца назад

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!

@RicardoCostaDesign 2 месяца назад

Thanks a lot for commenting!

@vmartme 2 месяца назад

This is very helpful. Thank you so much!

@RicardoCostaDesign 2 месяца назад

Thanks for commenting!

@pavantodupunuri2562 6 месяцев назад

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! :)

@RicardoCostaDesign 6 месяцев назад

Thank you so much for the comment 🙌

@kumaranimaster 8 месяцев назад

Lovely one

@RicardoCostaDesign 8 месяцев назад

Thank you!

@reginabell3814 6 месяцев назад

ooooo got all the way to 12 minutes perfectly before it prompted me to upgrade!

@RicardoCostaDesign 2 месяца назад

Thanks for commenting! I've just noticed I didn't mentioned in the audio, so I correct in the description and pinned a comment.

@user-1836-jdk 7 месяцев назад

This was a saviour. I needed time-saving prototyping hacks and this will go a long way ❤

@RicardoCostaDesign 7 месяцев назад

Thanks a lot! 🙌

@user-vr5fs3yi2x 8 месяцев назад

Man, the very first step is to buy Figma Pro subscription... Lol, the video's worth watching

@benlow24 8 месяцев назад

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?

@WithUsersInMind 8 месяцев назад

This is some how more complex than expected.

@raefluffy5392 5 месяцев назад

Omg I just tried and it actually works! Thank you for sharing, very helpful > w

@RicardoCostaDesign 2 месяца назад

Thanks for commenting!

@pabliche85 6 месяцев назад

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?

@sibyllynxdragneel3792 Месяц назад

Este video me ayudo en el trabajo, gracias!!!

@RicardoCostaDesign Месяц назад

Muchas gracias!

@haraasgay 7 месяцев назад

it's cool!

@RicardoCostaDesign 7 месяцев назад

Thank you!

@heartnsoul3357 6 месяцев назад

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

@KratiGupta-sf2go 2 месяца назад

I am facing the same issue in prototyping a selected option. Can you please help me to figure it out.

@marcoc7388 9 месяцев назад

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.

@RicardoCostaDesign 9 месяцев назад

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 :)

@notdefined9898 8 месяцев назад

if you have 10 different dropdowns there is no way to do it with this method

@uxdworld 8 месяцев назад

Great leaening 👏

@RicardoCostaDesign 8 месяцев назад

Thank you!

@sanballar6933 9 месяцев назад

good one

@RicardoCostaDesign 9 месяцев назад

Thank you 🙏🙌

@lari_thome 8 месяцев назад

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

@RicardoCostaDesign 8 месяцев назад

Thanks a lot! Yes, good tip :)

@mrshawnspencer 8 месяцев назад

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

@cour10e22 8 месяцев назад

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!

@martinika75 9 месяцев назад

Parabéns Ricardo! Muito sucesso!

@RicardoCostaDesign 9 месяцев назад

Obrigado Marta! 🙌

@bogdandjordjevic9947 3 месяца назад

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

@RicardoCostaDesign 2 месяца назад

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 :)

@aleksandrazubarava4438 3 месяца назад

Its an awesome tutorial, amazingly straightforward with no mess! I just wish I had pro version:)

@linuscarmex3965 3 месяца назад

Yes me too :) Only noticed it when i started the prototyping part

@RicardoCostaDesign 2 месяца назад

Thanks for commenting! I've just noticed I didn't mentioned in the audio, so I correct in the description and pinned a comment.

@alignstudios8170 8 месяцев назад

This is great by the way - is there a way to add multi levels or a sub-menu to this?

@asaadhabibkhan8420 4 месяца назад

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.

@RicardoCostaDesign 2 месяца назад

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.

@brittei 2 месяца назад

To keep the arrow right aligned, type "auto" in for horizontal gap between items

@RicardoCostaDesign 2 месяца назад

Thanks for commenting!

@nurays1349 5 месяцев назад

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.

@MoabeVettore 8 месяцев назад

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

@Squagem 8 месяцев назад

You can fix this by changing the stacking context of the parent container to "first on top". But this is still super tedious

@RazeFromWish 6 месяцев назад

Muito bom obrigado pela aula Ricardo :P

@RicardoCostaDesign 2 месяца назад

Muito obrigado pelo comentário!

@osman3404 8 месяцев назад

a newbie question, is there a Figam dropdown component to use instead of creating one from scratch? Great video by the way

@CosimoWise Месяц назад

that's a great solution, but what about if you want to add a bit of style with motion?

@baddownload 9 месяцев назад

Great vid. Time to unlearn Figma behaviours yet again

@RicardoCostaDesign 9 месяцев назад

Thanks for the feedback! Yeah, things are constantly evolving

@sopikhutchua Месяц назад

Thank you for sharing, but I am interested if I can use it for a mobile app?

@tomashudolin7197 3 месяца назад

Yes, should be great, to tell us that this is possible in paid version of Figma only. Maybe at the begining of this video.

@RicardoCostaDesign 2 месяца назад

Thanks for commenting! I've just noticed I didn't mentioned in the audio, so I correct in the description and pinned a comment.

@MarkkuWeasel 5 месяцев назад

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.

@sw1647 5 месяцев назад

Hi how would you do that?

@maikkruger7241 5 месяцев назад

I would also love to know how to do that

@pamelalandgravesandoval8661 4 месяца назад

Hi, I am having this problem in my prototype, how can I put the inputs in overlay?

@andresluna3688 7 месяцев назад

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?

@rjabrm 8 месяцев назад

after you build it, can you edit in properties in a differint pages?

@LinhNguyen-lf2iv 6 месяцев назад

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?

@julianaramirez7669 Месяц назад

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?

@itssergeantjay 8 месяцев назад

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?

@Sameer.k96 7 месяцев назад

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,

@user-rd4ro6wu6q 9 месяцев назад

I would've liked it if you had the dropdown item that is selected to be highlighted.

@RicardoCostaDesign 9 месяцев назад

Don't know if I follow you. While hovering the item inside dropdown? or while collapsed mode?

@scaragrafostudio1316 9 месяцев назад

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

@ernestson8871 7 месяцев назад

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"?

@BrookeMotis 6 месяцев назад

Amazing. Looking for this exact video for months now. I build a lot of prototypes with forms that have drop downs. As you can imagine it's chaos with them always moving and creating the logic. This is a lifesaver.

@RicardoCostaDesign 6 месяцев назад

Yes, absolutely! Thanks for the comment ☺️

@facundocastelo7281 4 месяца назад

Thanks a lot, excelent explanation. Sadly this can't be done in a free account

@RicardoCostaDesign 2 месяца назад

Thanks for commenting! I've just noticed I didn't mentioned in the audio, so I correct in the description and pinned a comment.

@innocentnweke3194 4 месяца назад

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

@RicardoCostaDesign 2 месяца назад

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.

@Isabelaholi 8 месяцев назад

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! 🎉☺️👏🏻

@RicardoCostaDesign 8 месяцев назад

Thanks for the comment Isabela, and glad it was helpful!

@wandkrishna1030 6 месяцев назад

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?

@haidarawada4513 2 месяца назад

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 .

@RicardoCostaDesign 2 месяца назад

Thanks for the comment. Did you see if it's placed correctly inside the frame on the layers panel?

@ShashankGoswami83 7 месяцев назад

Thanks a lot **Ricardo** for sharing so insightful tutorial. This is a life saver. I have been watching so many videos to create an interactive Forms with multiple fields. Your way of presenting it has helped me creating a long form with many fields which looks pretty cool and works seamlessly. You rock sir! Thank you.

@RicardoCostaDesign 7 месяцев назад

Happy to know that! Thank you very much for your comment :)

@serhiytorba 3 месяца назад

It's fine, but what to do with the selected state in the list for the second opening if the selection was made?

@JoaoVictor-rg3fo 7 месяцев назад

Tava bem animado com o tutorial até chegar na parte do pago..... Bem, ao menos absorvi algumas coisas e modifiquei para dar certo sem precisar pagar. Valeu mesmo assim

@RicardoCostaDesign 7 месяцев назад

Obrigado! Sim eu mencionei na descrição do vídeo mas deveria ter colocado em áudio logo no início. Mas ainda bem que gostou :)

@PirateGirl2024 4 месяца назад

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

@RicardoCostaDesign 2 месяца назад

Thanks for commenting! I've just noticed I didn't mentioned in the audio, so I correct in the description and pinned a comment.

@harshitdhasmana587 29 дней назад

Can someone please explain what shortcut did he said at 9:53 timestamp for putting the fruitlist component back inside the expanded component ...

@jarmadax 6 месяцев назад

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?

@jarmadax 6 месяцев назад

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... =(

@tobiaslundgren1232 2 месяца назад

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

@user-gr4bj4jg9e 3 месяца назад

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 :(

@RicardoCostaDesign 2 месяца назад

Thanks for commenting! I didn't get the questions...

@boris6842 6 месяцев назад

Hi, it's possible to do that, but where can we add all the options in the form of a tag?

@Raegu1 2 месяца назад

how do you do scrollable drop down following this implementation?

@MyAldunate 2 месяца назад

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"

@sarahamdy9602 5 месяцев назад

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?

@bogdan.k.s 4 месяца назад

12:06 , Why i can't select "Change to" after i set variable?

@CarloFriscia 7 месяцев назад

I really don't understand how these variables should simplify our job. It's quite time-consuming to execute a series of... unnecessary extra steps! Could someone shed some light on this for me?

@umunnakwefavour5670 6 месяцев назад

Hi I have a little, issue my drop down comes out small after a website menu design

@alisanan9090 8 месяцев назад

Video: Stop doing DROPDOWNS like this. Me: How to do DROPDOWNS like this?

@meawzilaz 3 месяца назад

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 2 месяца назад

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.

@ArtifexonResearch 8 месяцев назад

I would have used auto space between so the drop down arrow sticks to the right.

@lethargicloner3828 6 месяцев назад

Should have said in the beginning of the video you can only do this with a paid package of figma. I got to near the end of the vid and it said I needed to pay for the upgrade package to use variables.

@RicardoCostaDesign 2 месяца назад

Thanks for commenting! I've just noticed I didn't mentioned in the audio, so I correct in the description and pinned a comment.

@user-ff8sy8tk8g 8 месяцев назад

What to do at 9:55 to bring it inside the expand?

@mdershadmia5482 20 дней назад

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

@scaragrafostudio1316 9 месяцев назад

I liked the video, I followed the steps, and now I haven't been able to use the same Dropdown component, but with different string variables. In other words, I want to have a dropdown for fruits, another one for cities, countries, etc. When I create another instance of the component and replace the information, it changes the information for the first instance but the second instance doesn't change.

@RicardoCostaDesign 9 месяцев назад

Thanks for your comment. Did you set the new variables for the cities and countries and duplicate the variables set and linked to that new variables? Make sure if you duplicate components to clear all styles and links to add the new ones.

@scaragrafostudio1316 9 месяцев назад

@@RicardoCostaDesign Yes thanks, I did it this way.... I thought you could use a single component to have different information and thus have as few components as possible, but it is an acceptable and quite good alternative. I did make one change though and that is the dropdown input container to have it as a component so when you make visual changes it applies to all the dropdowns and not have to edit one by one.

@notdefined9898 8 месяцев назад

@@scaragrafostudio1316 Hi! I faced the same issue. How you solved it?

@scaragrafostudio1316 8 месяцев назад

@@notdefined9898 I solved it as RicardoCostaDesign mentioned, you take the entire component and duplicate it, then change the name, and you can now modify the variables. It's not the most optimal option, I hope they can improve this in the future.

@ShashankGoswami83 7 месяцев назад

@@scaragrafostudio1316 This solution has helped me a lot. I have 7 different fileds to show, though this is bit complicated to relate all the variables together. It will take sometime to do it correctly at first, but solves a big propblem. Figma if you are listening, please make it more easier so we don't have to create multiple components. A sinlge field with variables shall handle this. Thanks!