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:

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:

1. I deleted a collection containing 2 modes that were applied to a component’s frame.


2. 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).


3. 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 🫥

Came across this problem multiple times…It looks like a bug or a bad design.

I have the same issue 😦 I have copied some components from one file, and these components have variables. I want to get rid of them but it is impossible. I am looking into some plugins at this point…

Having the same problem. this is pretty annoying. happy I found out about this bug, before I have done a lot of designing with the variables.

This should be fixed ASAP.

Just make Variables be detachable on Layers.

Hello there, Thank you so much for bringing this to our attention. I completely understand how frustrating this situation can be.

When a variable is applied to an element or a nested layer, its collection is also applied to the layer and the parent layer. If the variable has multiple modes, you can switch between them by clicking on “Change variable mode” icon in the “Layer” section of the right sidebar.

I tested this on my end and found that detached variables applied to all nested elements or changing the variable applied to nested elements without multiple modes caused the “Change variable mode” icon to disappear from those “Layer” sections, as @21222090_Wataru_yamanouchi mentioned.

You can find more details on variable modes here:

I hope this information is helpful! Please don’t hesitate to let us know if I missed anything. Additionally, we welcome any further insights from community. Feel free to join the discussion!

Thank you,

Well, Thank you for sharing that Video.

Though, it is pretty annoying to be pressed to remove the corresponding variables from ALL “child frames”, before it disappears from the “parent frame”.

Why not just make it so that you can detach it from the parent frame itself. Without any child frame being changed?

That really irritates me!

Badly implemented?

Would be cool if a Figma employee could share the reasoning behind this “bug”. Or is it a feature?

Nice day to you all.

Yes, it’s very bad implemented. Even worse, if you copying from other files you inherit these variables and they confuse the shit if they have familiar names.

I try to avoid modes now where ever I can - too bad, its a good concept.

Same problem… It is Bug AF! Dont tell me, you have to delete all variables inside, to delete the variable mode… Please fix it Figma Team!!!

Figma fail.

I can’t follow any of the solutions on this page. But I DID find today that if you select the nested layer and then change the variable collection to AUTO, it removes it and follows the parent.

That solved my problem.

Not sure if that is the same solution you posted. But doing that worked for me today.