I’ve created a dropdown.
It works fine.
I added it to a frame with auto layout and then created a component from it.
When I prototype it, the drop down works, but the background doesn’t.
If I detach the component instance, the background works.
Any idea why?
Top one is the drop down, middle one is component, bottom one is with instance detached.
I think the problem is with your layering and Clip content, Double check those, I can’t say for sure until I see the file itself
I’ve checked all the clipped frames.
Can’t post any attachments as a new user which is ridiculous.
See if you can access this file.
Figma issue
Thank you
Don’t use rectangles here, Give Fill to the upper layer itself and see if that works
Another thing I noticed, I think your component properties have conflict in their naming
I created a file of one of my old designs
There are new ways to do this better due to new added feature of Figma, But still gives you an idea of how things should be
Play the Frame (Play me) to see result:
Thanks, but what you have done is not the same. You have just done a drop down. My drop down works, it’s when I nest the drop down inside another component that it stops working.
I can’t edit your design to see if nesting it works or not.
I have requested access to your file, I’ll fix it for you and you can see the process to duplicate it anywhere you want.
of course if you wish my help
I saw your eager to learn, So I recreated you design with the latest methods for you
As you can see we have nested instance in the frame and it works perfectly, Also items have hover.
It’s in my draft, I cant give you access to it, Check it out and if you want it, give me access to your file and I copy it for you.
Play the prototype to see the result:
Thanks for your help! I can see what you’ve done and it’s pretty much the same way I did it, but mine still doesn’t work. I even created a brand new ultra simple version with a red rectangle in that file I shared and it still doesn’t expand.
If you look at the red rectangle, that’s just a frame converted to a component.
In the second variant I stretched the frame. it works fine as a drop down but as soon as I nest it in another component, it no longer expands as a drop down, yet items inside the drop down still appear.
What do I need to click to get it to work as yours seems to be the same but actually works?
I even tried nesting my working dropdown selector inside your component and it still didn’t work.
Your Welcome
It was not the same, The main problem with your design is layering, On complex prototypes tiny details are matter.
I analyzed your design by copying it and looked over (its in a section called: Sohrab Copy design)
Your mistakes:
PS: after implementing right auto layout, it must set on Fixed in order to be consistent.
Also Mouse leave action gives you the ability to close DRP automatically.
I have fixed the copied of one of your components called MR to see how it now works.
I hope you continue the journey of becoming a designer, and these tips be a help to you.
Best Luck
Thank you, for your help.
if I remove the rectangle it still doesn’t work without autogroup.
I know this is good practice but for some reason I didn’t do it in this case.
It works if I just add auto-layout. I don’t really understand this. If the dropdown component works fine on it’s own, I don’t understand why it needs to be an autolayout to work when nested.
Not sure what you mean by this? Are you saying I am selecting different nodes for each item when dragging the arrows between components? This is probably because I have messed about with it so much now trying to get it to work.
I’m not using ‘mouse leave’ as this is for mobile design.
I also confused this spacing with auto-layout, I thought it was what happened when it got converted to component.
Your Welcome
1- All I said was not only about making it work, It was about doing it right and clean to have a smooth prototype (on large messy files you understand my point)
2- Yes it sure is
3- Well, It’s Figma logic and we need to learn to work with those Logics
4- Yes, perhaps you worked on it so much it got confusing, I have experienced this a lot, But it gets better everyday
About the difference of spacing and auto-layout, Simple way to say it is:
they act the same initially, but on spacing is just for ordering things in place, once, It’s not permanent and useful for long term usage,
Auto layout on the other hand is a permanent solution to order stuff which acts instead of just show.
Anyway, thanks to your help, I think I am sorted now. I just need to use auto-layout to make it work.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
