Can't edit color styles

Here is a screen shot

I’m having the same issue. In my case, I’m trying to modify the document colors of a library file. In the attached, I clicked on primary/main blue in the right panel. The pop out menu then shows “main” blue in the primary section. However, I don’t get the edit icon when I hover over it. And there are no document colors to be found within the project itself.

So I’ve spent over an hour trying to figure out how to change that value for primary/blue and am coming up empty. What am I missing!?

It’s not a style, it’s a variable. So you need to open the local variables modal window and edit the value there.

Thanks @tank666 - I had gone that path as well. But I end up with the same result, in that primary/blue is not a variable I can edit. It’s only an option to change one of the variable colors to as far as I can tell. (also attached)

Justin31, This appears to be a usability problem in Figma. The expectation is that one would get to edit that color by clicking on it’s edit icon. But you have to go one screen further to the Library panel on your left and click on “Custom.” It’s grayed out so I thought it was inactive, but I was able to edit my color style when I clicked on Custom. That helped me, hope it helps.
Paul

“primary/main” is used as an alias. You need to find exactly this variable (it can be either in this collection, or in another, or in an external library).

Where does a library live and how can you inspect, compare, and groom them? Is there a direct way?

Library files live in team projects. If you have access to these files, you can edit or inspect them. You can find out more about libraries in the Help Center:

Same issue here. I’m in the original file; I created the variable; it’s a local library. When I go to edit the color, the old “edit” option that used to appear beside a color variable in a list has disappeared; the only way to change the color is to use the “Custom” tab at the top of the window, but this detaches the shape from the color variable. There is no way to edit the color variable, even when editing the original shape I used when I created it.

It’s very frustrating because it means my method of refining a palette by defining a library palette, using it in a dashboard or other UI, and then editing the library colors to see them shift en masse within the UI as I refine for color blindness, contrast, ND-friendliness, brand changes, etc. is now impossible. I apparently have to get the variables perfect the first time.

Screenshots are from the original library file, of the original shape used to create the library color.

@alexandra.oneal,

That solved it! Thank you 🙂

I’m not sure this is working for me.
Yes, I can open the local variables modal window.
I can find the variable and click the icon that allows me to “Edit the color variable”, but still, the aliased variables are uneditable.
I could detach the connection, but that feels like I’d be breaking the library somehow and that there is no obvious way to just edit the hex value of the aliased variable in place.

Must we detach the alias to edit the color? I am quite confused.

To edit the value of a variable, you must select the desired variable. It looks like you want to change the value of the variable “Color/Brand/80”, which is used as an alias. So find exactly this variable and make the necessary changes. If you don’t need this alias—detach it. In general, I recommend reading the specification of the design system you are using so that you act strictly in accordance with it.

Thank you, yes. It took me a while to understand how this worked and then how to find that darn set of variables.
I was looking for them in all the wrong places. I did finally find them in the global folder, and then I was able to edit just fine.

It would be useful to have more indication, in the ui, of the collection or folder in which such variables are stored.

My problem with colour variables is that they are so time-consuming to edit. If I want to set up a colour palette for a project and make minor amendments to the colours for accessibility etc., it is cumbersome. I have to open the variables panel, find the primary version of the colour in a collection (say ‘primitive collection’) and edit it. Changing the styles was so much easier. I can see the point of colour variables but wish there was an easy way to keep styles linked to variables which would automatically be amended if you edit the style.

We can edit font variables inline from the library pane, why can’t we edit color variables the same way?

Hey @Karen_Beal and @Sammy_Guergachi1, thanks for the feedback!

We’ll pass these along to our variables team for future consideration. Feel free to also share any other ideas you may have with the variables team directly here: