Skip to main content

Generate and link variants from base color

  • March 11, 2022
  • 1 reply
  • 2455 views

Axl

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 😀 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) 🤓

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 😱

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 🙌

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

Tools

GitHub
This topic has been closed for comments

1 reply

  • 0 replies
  • June 9, 2022

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


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings