This was a bit of an experiment if i'm honest.
I was creating our official colour palette for PolyAI alongside one of my full stack engineers. An approach I normally like to create colour palettes is well documented within Refactoring UI - Building your colour palette.
This time however, we wondered...
What if we let our platform generate the design system colour palette based on a little bit of user input? Would this make our life easier when introducing themeing and white labelling?
Why a Figma plugin?
There were two main reasons:
- I wanted to quickly generate palettes in Figma directly making it accessible for other contributors.
- Building my own plugin would has always been something I was interested in and thought this was a small enough use case to get going.
How the plugin works
The plugin takes three main values:
- The lightest tint
- The target colour
- The darkest shade
These are used to generate a swatch of 11 values. Consisting of 5 tints, 5 shades and the original target colour in the middle.
There is an optional coefficient value. This is used to adjust the lightness of the tints. This was only included at the time as the original inherited tooling had smaller steps between these tints for many of it's colour values.
My colleague used the interpolateHsl function from the D3.js library for the interpolation logic for HSL values.
I built the plugin that creates and places the squares using the interpolated values.
Conclusion
I wouldn't create a colour palette like this again as building the swatches programmatically meant sacrificing fine grained control over the colour values themselves.
Having said this, I really enjoyed the project.
I was able to learn some new skills whilst simultaneously building a meaningful relationship with a colleague who became a good friend.