How exactly do you detach a variable from a layer without deleting it from your local variables list? Right now you have to make the entire thing from scratch or am I missing something?
1 Like
Can you give an example of the type of variable and how it is applied?
In general, you just remove it. If it is a fill color, you remove the fill, if it is a string, you replace the text on the text box, if it is a boolean for an interaction you just don’t use it…
I made two modes in a collection (default & error), with color values for each mode, and applied the variable on layer level to a component. The setup works perfectly fine.
The only thing I am missing is how to detach it when it is applied on layer level? You can only switch between the modes but there is no way of deleting it from the layer level without deleting the entire collection from your variables list or making the component from scratch?
Hover the property that contains it so the “Detach” icon shows up, or use the minus button to remove the fill/property completely and then add another one.
I’m talking about a variable applied on layer level. As you can see no way of detaching:
1 Like
Ah, sorry, now I understand it. I couldn’t find a way to detach it either. Seems like you do have to delete the layer and create a new one. Another way would be to set it to Auto and not place it in any frames that set it to error.
You have to delete each applied variable individually from the layer/component. Once that’s done it should be detached. However, it seems there’s a bug where it’s still showing the tag on the layer name in the layers pannel. If you duplicate the layer that should disappear.
I’m frequently running into this as well. Does Figma have visibility on this as an issue? Not sure why the original post is marked as having a solution…
The applied variable will randomly disappear sometimes breaking the prototype in ways that makes this feature unusable or at least very frustrating and unreliable.
Duplicating or copy/pasting layer outside of frame does nothing, moving contents out of group and re-adding auto layout does nothing. Only thing to do is recreate the entire element and re apply the variable which is just a non starter.
Same problem. Thank you for mentioning it
Same problem, is it a bug?
Today, I may have found a solution to this problem.
When a variable is applied to an element on a child layer, its collection is also applied to the parent layer. So, removing all variables from the child layer will solve the problem.
So check all the elements of the layer again.
I think it’s a bug.
In my case:
- I deleted a collection containing 2 modes that were applied to a component’s frame.
- In the layer variable mode dropdown of the component instance, I can still see the deleted collection & mode name (which is not available since they have been deleted).
- I detached the instance and the ghost variable option was still here.
Now I have to ungroup & recreate the component’s frame to “remove the ghost variable”.
The structure of the variable should be very stable before applying it to the ui element 