Color Variable bug in instances

Share an issue
1

Hi team,

I’ve noticed an issue when using multiple color variables with the same hex value on a single layer.

Setup

  • A layer with:

    • Fill → uses color variable “Field Background”

    • Border → uses color variable “Field Border”

  • Both variables initially have the same hex value.

Issue

When both variables share the same hex value, the instance inspector shows only one color override instead of two.

As a result, the fill and border appear to be linked, even though they are assigned to different variables.

Steps to reproduce

  1. Create two color variables with the same hex value (e.g. Field Background & Field Border).

  2. Apply one to Fill and the other to Border on a component.

  3. Create an instance.

  4. Observe that only one color override is shown.

Workaround

If I temporarily change one variable to a different hex value, both overrides appear correctly.

When I set them back to the same value, the issue reappears.

Expected behavior

Even if two variables share the same hex value, they should remain independent and appear separately in instances.

The current behavior seems to merge them based on value instead of variable identity.

Why this matters

I understand that Sketch groups identical colors for convenience, and I do think this behavior is very useful when dealing with many elements that share the same hex value applied manually (without variables).

However, when color variables are involved, this overrides intentional variable separation and breaks design token workflows, where different semantic roles may temporarily share the same value.

In this case, preserving variable identity should probably take priority over value-based merging.

Thanks for looking into this.

Let me know if you need more details or a test file.

CleanShot 2026-01-26 at 11.02.51@2x
CleanShot 2026-01-26 at 11.02.51@2x994×1024 105 KB

CleanShot 2026-01-26 at 11.04.18@2x
CleanShot 2026-01-26 at 11.04.18@2x502×428 23.3 KB

CleanShot 2026-01-26 at 11.06.21@2x
CleanShot 2026-01-26 at 11.06.21@2x492×444 27.1 KB

3

Hi Leo. :waving_hand:
This is an unusual scenario, but definitely legitimate, as you have described. So I’m filing this for the dev team to have a look at. Thanks. :folded_hands:

1 Like
5

Hi, thanks a lot for looking into this and forwarding it to the dev team, I really appreciate it.

Just to clarify, this setup is part of a semantic token approach, where variables represent different UI roles rather than just color values.

In this specific case, I use separate variables for background and border to control whether the field visually shows a border or not, without affecting the component size (since borders have thickness).

Most of the time, the border matches the input background color, so it appears hidden.
When I need a read-only or display-only state, I simply make the background transparent and the border becomes visible, while keeping the same component structure.

In this kind of workflow, different roles may temporarily share the same value, while remaining independent for future changes. That’s why keeping variables separated is important in this case.

Thanks again for taking the time to review this.

2 Likes