Inception

Last November, I started working on my design system after finalising the Border styles, Spacing units, and Typography styles. I then moved on to selecting the colour palette for the design system, and I struggled a lot, I mean a lot! It's a tedious task to choose colours.

I browsed through a few videos on YouTube and came across this wonderful YouTube video from UX Tools. In the video, Jordan clearly explains how to select a colour palette for a design system. I had to reiterate the process several times to achieve a good colour palette. So, an idea came into my mind: why not make this task a bit easier? Hence, I decided to make a Figma plugin to create a colour palette using the bézier curve editor.

I asked myself what basic inputs I needed to create a colour palette for this plugin.

1. A colour picker with a bézier curve editor for selecting the colour and curve
2. A step number input field for selecting the number of colours in one swatch
3. A text field for naming the colour swatch

These were the basic inputs needed for the palette generator to work. I developed the plugin with the above inputs. The other two inputs are very straightforward, but the colour picker with a bézier editor makes the plugin so special.

The editor comprises two inputs: a hue range slider and a cubic bézier curve editor. The hue range slider ranges from 0 to 360, where its value indicates the selected hue, which is also reflected on the bézier curve HSV colour picker. The cubic bézier curve editor plays a major role in the editor. It lets users select the start and end points of the curve, along with handle points for these points. The start point indicates a colour point from which the swatch colour will start, and the endpoint indicates at what colour the swatch will end. The handle points are used to manage the curvature of the bézier curve. Using these inputs for different hues, you can create a colour palette.

More inputs…

After building the basic inputs, I went on to add a few more useful inputs, such as:

1. Auto-generate the swatch name: The name will be auto-generated per the hue value.
2. Curve styles preset: The presets dropdown allows you to select a few curve styles, such as Sine, Quad, Cubic, Linear (although it's not a curve, it can be created using a cubic curve), and easing (ease-in, ease-out, and ease-in-out).
3. Freehand mode toggle: When this mode is toggled on, users can freely select the handle points of the curve however they want it to be. When toggled off, users can select preset curves from the dropdown. In this mode, the start and end points of the curve can be edited, but the handle points for these points.

Outcomes

Colour Palette

When the user is satisfied with all the inputs, they can click on Generate Swatch to create a colour swatch. The swatch will appear as an accordion on the right side, as shown in the above image. After generating the swatch, the user can:

1. Edit the swatch
2. Duplicate the swatch (if the user wants to have the same bezier curve for all the other colour swatches)
3. Delete the swatch

Each accordion will hold a colour swatch along with the following info:

• Name of the swatch
• The colours of the swatch: Each colour will have its number, hex code, token, and contrast ratio for black and white.

Integration and Export

After generating the colour palette, and when the user is satisfied with what they have generated, they can perform the following actions on the palette:

1. Get tokens: Export your palette as JSON tokens, ready for integration into your design systems or development workflows.
2. Export palette: Instantly export palettes as organised frames within your Figma file for easy sharing and collaboration.
3. Create styles: Streamline your workflow by, creating reusable styles directly in your Figma file with one click.

Building this plugin has been quite a ride, and I'm excited to see how it'll help speed up your colour palette creation. No more manual tweaking or endless back-and-forth - pick your colours, adjust the curves, and you're good to go! I hope you will use this plugin in your next project. Let me know what you think. Your feedback helps make the plugin even better!

You can try this plugin in Figma, as it's already published in the Figma Community.

This plugin is open-sourced on GitHub. If you have any suggestions or want to contribute to the plugin, you are always welcome to create a new issue in the Github repository.