Skip to main content
Solved

Instance Swap Porperty Not Used Within Component

  • November 20, 2023
  • 8 replies
  • 4559 views

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!

Best answer by Eric_Wald

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!

View original

8 replies

tank666
  • 4859 replies
  • November 20, 2023

  • 3 replies
  • November 20, 2023

Same exact issue.

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


tank666
  • 4859 replies
  • November 20, 2023

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


  • 3 replies
  • November 21, 2023

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.

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


Again, thank you for trying to help out.


tank666
  • 4859 replies
  • November 21, 2023

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.


  • Author
  • 3 replies
  • Answer
  • November 21, 2023

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!


  • Author
  • 3 replies
  • November 21, 2023

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 😦


Hailin
  • New Member
  • 2 replies
  • February 3, 2025

It took me a while to figure this out😅

I suggested selecting the instance first to create the swap property, rather than selecting the frame to create a new property (which would still require applying the instance property later, adding an extra step).

The steps are:

  1. Select the instance (must be linked to a component, not an individual item).
  2.  Create an instance swap property. (I marked it with blue circle)

     

  3.  Edit the name/value.

Please watch this video for more details: Youtube link

Hope it helps!


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings