Hey! I’m wondering what’s the “correct” way to structure colors in Sketch. An example of how I currently structure my colors would be for example:
Background
Color 1
Color 2
Gray
Color 1
Color 2
Brand
Color 1
Color 2
Light
Color 1
Color 2
In this example, “Color X” are the actual variables and background, gray, brand, light… are groups / categories.
In Copenhagen’s color picker, only the last category is displayed when scrolling through colors, so it looks like:
Background
Color 1
Color 2
Gray
Color 1
Color 2
Brand
Color 1
Color 2
Light
Color 1
Color 2
The obvious issue here is that I can’t tell that:
Gray is a child of Background
Brand isn’t a child of Background
etc…
This leads me to a conclusion that I’m just using the categories wrong…? It’s absolutely possible, because I carried this naming habit over from Figma (habits die hard)
So to my question: What’s the intended way to categorize colors? How do you guys do it?
I just realized there’s one more case I’d like to bring up.
In the web version of Sketch, when I select an element with “Background/Gray/Color 1” variable as a fill for example, the inspector just says “Color 1”. There’s no way to tell at a glance, whether the “Color 1” variable is in “Background/Gray”, “Brand” or “Brand/Light”.
The developer must click through and go to Components to see where in the hierarchy this specific “Color 1” resides. This again leads me to belief that I’m not structuring the color variables in the intended way. Should each color variable have unique name, rather than rely on the naming hierarchy / structure to determine which variable it is?
I have the same problem. Repeating the category in each name is not great because CSS variables are exported with the folder path in the name. So if you want both name clarity AND categories in Sketch a colour would be named --background-gray-background-gray-color-1 – not great, and downright confusing in the web app where you’d see only background-gray-color-1
