I’m trying to create a navigation component with nested interactive link components, I’ve explored several ways to organise the components so that they make sense to other designers.
I can’t seem to make sense of this, methods 1 & 2 have the desired outcome, but both are repetitive and aren’t a good solution for component management.
Method 3 seems to be the best way to handle this, creating one version of the component (not 11) and then duplicating it from the assets panel, however it doesn’t handle the icons at and on hover the icon refers back to the original from the master component (see prototype) - You can see the text has been amended from ‘Overview’ to ‘threats’ which is fine,
Have I missed something in my prototype or is the approach in method 3 not possible/wrong?
Thanks in advance!
Best answer by matt.k
Okay, after fiddling around with it for an entire day, here is what I found out:
The main learning was that it is necessary for you to handle your icons as separate components, not as different variants of one component. This does not apply for the navigation item, only for the icons.
Then you should be able to select the icon in your instance, and swap the instance of this element to the desired icon (in the design panel on the right hand side above the resizing section
While this seems to be working in general, there is some funny business going on which I don’t completely understand. Apparently it is also vital that all icons are built exactly the same for this to work. For me that means: Only one vector, with the identical name, with the identical color style. Especially the “only one vector thing” is annoying for me, I had to make copies of existing icons that were comprised of multiple vectors, and modify them (outline stroke → union selection → flatten → rename to “Vector”), otherwise it would not work.
Good luck 🙂 hope that gives some hints to bring you closer to the desired results
Okay, after fiddling around with it for an entire day, here is what I found out:
The main learning was that it is necessary for you to handle your icons as separate components, not as different variants of one component. This does not apply for the navigation item, only for the icons.
Then you should be able to select the icon in your instance, and swap the instance of this element to the desired icon (in the design panel on the right hand side above the resizing section
While this seems to be working in general, there is some funny business going on which I don’t completely understand. Apparently it is also vital that all icons are built exactly the same for this to work. For me that means: Only one vector, with the identical name, with the identical color style. Especially the “only one vector thing” is annoying for me, I had to make copies of existing icons that were comprised of multiple vectors, and modify them (outline stroke → union selection → flatten → rename to “Vector”), otherwise it would not work.
Good luck 🙂 hope that gives some hints to bring you closer to the desired results
Hi Matt, for an entire day! Haha, thanks so much for your reply, it’s a tricky little problem, asked a few designers in my circle and no-one can seem to solve it.
From what I’ve seen to similar posts a lot of issues seem to be tied around the vector structure itself like you say, but also it could just be a ‘bug’ in Figma, either way it’d be great if Figma did some of the leg-work, seems like a lot of unnecessary work to get the conditions just right - XD seems to handle this fine with little effort.
But you’ve spurred me on to have another crack, thanks for your help again, will post any updates if I have any.
And given that I share the same problem and am still not entirely happy with the solution as it is right now, please do let me know if you have any updates (or anyone else, for that matter 🙂 )
A
Anonymous
0 replies
March 24, 2022
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
We use 3 different kinds of cookies. You can choose which cookies you want to accept. We need basic cookies to make this site work, therefore these are the minimum you can select. Learn more about our cookies.
