Figma Support Forum

Figma design system color management: some thoughts

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…
  1. 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
  1. 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
  1. 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:

It would be so cool to have such or similar color management in Figma directly, without any plugins.

Similar ideas and request:

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.