Skip to main content

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:

Figma – 30 Aug 21

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