Generate and link variants from base color

It would be great if there was a “generate tints/shades” from a base color option.

At first, just having a fixed number of colors would do the trick as a proof of concept :smile: Eventually that could grow into generating material design type palettes (50, 100, 200 etc), standard tints/shades (adding white/black) from a base color or any number of different patterns for generating variants of one color (maybe even adding accent options etc) :nerd_face:

Linking these variants to the base color should then also allow for a user to change the base color and have that automatically propagate to all the variants :scream:

I believe this would be a great time saver when setting up a new project. Just being able to define the whole color system with a few clicks, and also try out new colors for the whole design.

The way to use the colors could range from either having the same sort of implementation as we have for swapping instances (icons etc), to just generating the colors into the colors styles view.
A side note on that. Being able to duplicate an existing color style collection would be nice, e.g. if you are always naming it “some color; base, tint 1, tint 2, shade 1, shade 2” then having that set defined and just going in and changing the individual colors would at lease save us the time of having to type the same name over and over :raised_hands:

Below are some tools (for concrete implementations/ideas to the Figma development team) and discussions that I’ve found/used regarding this subject

Tools

Discussions

1 Like