Skip to main content

Not sure what’s going on. I’ve already set up Instance Sap with icons in buttons and they work just fine. But now I am trying to make an avatar component with preset variants for different types of people, and an extra one that will be an Instance Swap.


I set up a Component, “Custom Avatar Placeholder”, with an Image inside of it, to select for the Value of Instance Swap.

Next to Properties in the right panel, I click the “+”.

I Give the Component Porperty a Name of “Custom Photo”.

I select the “Custom Avatar Placeholder” Component for the Value of the oOmponent Property.

I click “Create property”.


Now, under Properties, I see the “Custom Photo” property, but there is an alert icon across from that, and hovering over it shows “Not used within component”.


Not sure what I’ve missed. Any Ideas?


Thanks!

Figma Learn - Help Center

Same exact issue.


@tank666 At least for me, it works with boolean as your example shows, but not instant swap or text.

I don’t see any problems with applying the instance swap and text properties. Everything is exactly the same as applying a boolean property, but instead select the appropriate options for the desired properties.

apply-instance-swap-prop

apply-text-prop

Thanks for your fast reply again.

I don’t get that text line w the create property button.


So I’m simply trying to make variations of a button, with different icons etc.

Now, it lets me instance swap my text for an icon, but that’s not really useful.

Screenshot 2023-11-21 at 01.06.02


If i click the icon however, the ‘apply instance swap property’ is gone.

Screenshot 2023-11-21 at 01.06.20


Again, thank you for trying to help out.

It looks like you are selecting the wrong layers for these properties.


The text property can only be applied to a text layer. Make sure the text layer is not nested within an instance of another component.


The instance swap property can only be applied to an instance layer. Make sure that an instance of one component is not nested within an instance of another component.


If you still want to add a property to an instance’s nested object, you need to go to its main component and add and apply the desired property there.

Okay, finally figured it out with the help of the above posts. After more digging, I found that the Component Instance I had put in my Avatar Component went in as a property and not as an instance. Once I was able to rework that variant to ALSO be an instance, it allowed me to rig it up and get Instance Swap to finally work. Thanks everyone!

It also seems that Figma didn’t like it when all the variants didn’t contain an instance to swap. I was trying to provide a single Component that would allow for user initials or a photo. When I had the user initials variants in the same component as the photos, it wouldn’t expose the “Custom Photo” property 😦

Reply


Terms & ConditionsCookie settings