Unable to view "Change Variable Mode" icon in layer panel

Similar to someone else in this thread, the tokens option for Layers wasn’t showing up for me until I made both primitives and tokens. I’m trying to get everything to resize (padding, gaps, and width) when moving the design from say a desktop frame to an iPad frame.

As you can see, I’m not seeing the tokens option for a blank frame, which I find odd. But I do see it when I have a frame that has designs in it.

Here are my primitive and token settings for what I’m trying to achieve.

Is this getting fixed at some point? The thread is over a year old and I still have this issue with no solution.

I have the same problem and it’s 2024, I don’t understand how to fix it

Hi all, in case you don’t realize it that you’ve wrongly applied colors on the design to Primitive rather than to token because the UI/UX on Figma itself is a bit confusing and as a low-vision person, I’ve wrongly chosen it too even though I used it and worked well before that.

There was a case where the Primitive colours were on the top of the Token (on Fill>Libraries) while on other pages the Token is on the top, and the Title of Primitive/Token is a bit similar hierarchically to the categories title (color, spacing) just in case this is your problem too. Of course, it is fixed now after applied to the token.

Not sure if this will solve everyone’s issues, but in my case I was only able to see the variable mode icon on the layer panel after setting a type style that uses variables.

I don’t know how this might apply to other scenarios, but my assumption is that you need elements that rely on variables to be able to set a variable mode to the whole frame. In any case this is an UX issue and users should at least see some sort of warning so they know how to get it working.

Hey, i had the same issue with the variable that i gave for paddings. So i added a random variable to the component and the gear icon on layer section showed up. I hope this helps.

I had the same issue but was able to fix it by reading the last few posts.

Basically, you need to assign a variable to the actual property you want to change first. In my case, I have to assign the variable of ‘Padding-Vertical’ to my auto-layout property box before it will show the ‘Apply variable mode’ icon in the Appearance panel.

I’ve attached a couple of screengrabs to help - it is a tricky one!

Hi all. Just solved the issue in my case:
Starting point: I have pro plan, using a variable with modes, a variable used for an element in the frame, when said frame selected ‘Apply variable mode’ button not showing up.
Solution: I tested a lot and found out that variables in most collections work but variables in one collection don’t. So I tried to understand what is wrong with that particular collection. I deleted the 2nd and 3rd mode (just in case then closed the variables window and did a tab reload) and then created those modes from scratch and bam – it works now. Not sure what was the actual issue there though…

Hi all, in case you don’t realize it that you’ve wrongly applied colors on the design to Primitive rather than to token because the UI/UX on Figma itself is a bit confusing and as a low-vision person, I’ve wrongly chosen it too even though I used it and worked well before that.

There was a case where the Primitive colours were on the top of the Token (on Fill>Libraries) while on other pages the Token is on the top, and the Title of Primitive/Token is a bit similar hierarchically to the categories title (color, spacing) just in case this is your problem too. Of course, it is fixed now after applied to the token.

 

 

this is so far the best reply. Thank you. Found a solution. Used tokens instead of primitive.