Skip to main content
Paul_Mirocha
September 16, 2023
Question

Can't edit color styles

  • September 16, 2023
  • 17 replies
  • 19025 views

Oddly, I can no longer edit color styles. When I click on the edit icon, I get an inert color picker. Clicking on that brings up a repeat of the edit color box. I have Figma up to date. Did something change or is it my system?

–Paul

This topic has been closed for replies.

17 replies

Paul_Mirocha
September 16, 2023

Here is a screen shot

Justin31
November 17, 2023

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!?

Screenshot 2023-11-17 at 2.49.40 PM

tank666
November 17, 2023

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

Figma Learn - Help Center
UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
Justin31
November 17, 2023

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)

Paul_Mirocha
November 17, 2023

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

tank666
November 17, 2023

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

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
Ellu
November 17, 2023

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

tank666
November 17, 2023

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:

Figma Learn - Help Center
UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
alexandra.oneal
January 25, 2024

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.

tank666
January 25, 2024

@alexandra.oneal,

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank