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.
- Build a spectral color pallete using some tool. E.g.
- Blue-100, Blue-200…
- Green-100, Green-200…
- Gray-100, Gray-200…
- 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
- 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
- Check colors on components and screens.
If I tune spectral color I need to do following:
- Tune color.
- 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: