Skip to main content

Hello,


I am trying to connect variants via nodes which I have done plenty of times before, but for some reason this time its not working.


I want to create a “favorite” button.


Step 1: I used 2 assets from material design:

Screenshot 2024-07-12 at 2.07.55 PM


Step 2:

I created a component and variant of the empty “heart”:


Step 3: I copied and replaced the “filled” heart with variant 2:


Step 4: When I try to connect nodes, I can connect variant 1 to variant 2, but it won’t let me connect variant 2 to variant 1:




I’ve tried detaching instances and I’ve used assets this way before without issue so not sure what’s going on.


Thanks for the help!

Hey @Michael_Taylor, thanks for reaching out and sorry for the trouble!


I just tried to recreate this issue, and I was able to connect my variants as expected. From what I can see in your screen recording, you’re trying to connect variant 2 to variant 1 from inside the actual icon’s layer. The interaction noodle should snap to the bottom border of the icon’s layer not the bottom tip of the heart.


I also noticed that your interaction noodle stayed blue after connecting variant 1 to variant 2. Since you mentioned copy and replacing the second variant with the filled heart, I’d use fresh instances of both variants to ensure that both of your variants are accounted for as a component set. With both variants correctly part of a component set, the change interaction should be Instant and the interaction noodles should change from blue to purple.




Hi @dvaliao,


Thanks for getting back to me. Still not sure what you mean here:

“you’re trying to connect variant 2 to variant 1 from inside the actual icon’s layer.”

or here:

“I’d use fresh instances of both variants to ensure that both of your variants are accounted for as a component set.”


The screenshot below shows correct connections of:

1 - filled heart to red filled heart

2 -empty heart to red empty heart


But when I want to create a variant from “empty heart” to “filled red heart” it wont let me. Is this just not possible or do I need to detach instances?

It appears outside the variant layer as well.




I have a video to show my steps as well but its too large to upload


Thanks!


Hey @Michael_Taylor, sorry for the confusion!


For the “you’re trying to connect variant 2 to variant 1 from inside the actual icon’s layer.”, I’m referring to this as you showed in your 1st screen recording:



If your variants were in the same component set, the interaction noodle should auto-snap to the bottom border, not anywhere else on the heart icon’s layer.


For “I’d use fresh instances of both variants to ensure that both of your variants are accounted for as a component set.”, I recommend taking new instances of the variants that you want to use together and make a new component set from those. Because from what I can see of your layers panel, it looks like your filled hearts are separate instances from the other components you’re trying to connect.




Here’s how your layers panel should look:


Got it. Thanks! @dvaliao


You’re welcome, @Michael_Taylor!


Please let me know if you run into any further issues. 🙂


Reply