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

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…

Windy_Personal wrote:

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.