Variables applied to component are not applying to instances of component

Ask the community
, ,
1

Hi,

So I am trying to create an icon that can be resized within another component. To do this, I have made 4 variable modes, so that the icon will scale to the set sizes. This all works fine with the main component itself, but when a duplicate or an instance of the component is placed, it does not work and I don’t understand why not. See video example…

Can anyone help me please?

2

Hi @Caitlin5, Thanks for reaching out about this and I appreciate you sharing the recording.

I tried to mimic the behavior in the video but could not reproduce the same. You might need to contact our support team to take a closer look at your design file.

In the meantime, I have put together something might assist you. In this video,
“ballA” which variables attached, and “ballAA” which contains an instance of “ballA”. When selecting the “ballAA” instance and changing the mode, there’s no effect. However, if you select the nested layer(ballA), the mode will change.
On the other hand, when variables are attached to the nested instance of “ballB” in “ballBB” component, allows for mode changes when the "ballBB"instance is selected.

I hope this will provide some clarification. You can check this related article from our Help Center here:Modes for variables

If none of the above doesn’t help, I recommend to reach out our support team for investigate:https://help.figma.com/hc/en-us/requests/new
When you contact our support team, please provide the following:

  • Use your Figma account’s email address.
  • The direct link to the file and amy related library file and please add support-share@figma.com as an Editor to those files (don’t worry, this won’t impact your billing).
  • A brief video recording that shows the issue, this time please ensure the entire Figma window is visible, including the Properties and Layers Panel, and that the relevant layers are expanded.

We deeply appreciate your cooperation, as it will assist our support team in conducting further investigations.
If anyone in our community has additional insights, please feel free to share it here.

Thanks,

3

Hi @Junko3 , thanks for the video it was helpful to look over and double check how variables work, as I’m fairly new to Figma!

There was other icons in the library I made which worked, so I recreated that icon and it did the trick. I believe it possibly wasn’t working due to it being made a bit messy with union, subtraction, and having lots of layers put together which made it difficult to scale? Anyways… simplifying it seem to do the trick, thanks for the help!

2 Likes