Figma plugin: Color Kitchen

Color swatches and chips that represent color modification functions.

This Figma plugin invites to experiment with color to create a system of color tokens using inheritance and modifiers.

I often found myself scrambling with existing design tools when it comes to color, especially when working on color tokens and design systems. Plenty of design system teams create their own tooling for probably the same reason. But these usually are too opinionated for my needs. For my work, I needed something that allows me to freely experiment with the systems I set up. This helps me a lot when creating new brand designs from scratch as well as when creating and optimizing design systems for established brands.

The plugin offers a way to use the color conversion functionalities of Chroma JS and contrast checks for WCAG 2.1 and WCAG 3 (working draft) on the canvas in Figma. Color variables and styles can be referenced, modified and re-used in other variables, plain color styles, gradients or effect styles.

Links

  • Plugin in Figma Community
  • Chroma JS Docs

2022

RSSMastodonImpressumPrivacy
Me