Hi Figma and Figma community!

I want to share some thoughts with you. Originally it was a feedback to support, but automatic reply replied me to move it here.

Building a design system is still not a very simple task.

Talking about color. What need I do to do to build a color system.

1. Build a spectral color pallete using some tool. E.g.

• Blue-100, Blue-200…


• Green-100, Green-200…


• Gray-100, Gray-200…

2. Create a semantic tokens for colors:

• Foreground / Text default


• Foreground / Text lighter


• Foreground / Border


• Background / Page


• Background / Panel


• Background / Dropdown


• Link / Text color


• Button / Primary / Background


• Button / Primary / Text

3. Map colors to that tokens by copying hex values.

• Foreground / Text default ← Palette / Neutral-600


• Foreground / Text lighter ← Palette / Neutral-400


• Link / Text color ← Palette / Blue-600

4. Check colors on components and screens.

If I tune spectral color I need to do following:

1. Tune color.


2. Find any semantic colors mapped on this value and change them by changing hex codes.

Or maybe better to change the mapping from

Foreground / Text default ← Palette / Neutral-600

to

Foreground / Text default ← Palette / Neutral-700

without changing palette color. So — rollback changes and try another way.

Iterations count could be high so I thought about way to fix it for ourselves and got a Plugin idea (now trying to ask our front-end team to create plugin). Plugin isn’t ready and even not very started so I cannot share with you any of results.

Plugin’s idea is to make that color management simplier. Here are my sketches: