Placing gradient colour anywhere on the frame

Overview

A Figma plugin for mesh gradients you shape by hand. Designed, branded and built end to end.

Gradients Lab puts each colour on the picture as a node you drag, and the whole field redraws as you move it. I took it from first commit to a paid launch in under eight weeks, rebuilt it as 2.0 fifteen months later, and 5.1k people have used it.

Problem

Figma’s gradients put colour along a line

Linear, radial, angular and diamond: each of Figma’s gradient fills lays its colour stops along one handle. None of them lets you put a colour anywhere on the frame and let the space between fill itself. Gradients Lab is built for exactly that.

Launch

Launched in eight weeks, with Pro from day one

I set up the type, spacing and radius tokens before the first feature in November 2024, and launched on 1 January 2025. Shuffle was the big button on the canvas; placing colours by hand, Custom Color Position, was a Pro switch. Pro is a one-time licence checked by a small server I wrote, and a plugin’s window sends a null origin, so the server allows figma.com and that origin only.

Updates

Three months later, placing colours became free

A Windows preview bug was fixed three days after launch. In March 2025 Custom Color Position left Pro, and the colours became round handles over stacked circles, blended in one of five styles.

Rebuild

In 2.0 I rebuilt the picture and how you shape it.

In March 2026 I rebuilt it: one field instead of stacked circles, a Mesh Editor on the canvas, and every ratio cut from one square.

01 · One field

Placing became the Mesh Editor, over one field

One shader replaced the circles and their styles: each node is a soft pool, colours mix in OKLab, and the background shows only where the pools thin out. The Mesh Editor opens from the canvas dock or the M key.

02 · Try it

The same field, live on this page

This is the plugin’s own shader, running here on the same mesh. Drag a node and the whole field redraws as it moves; on a keyboard, tab to a node and use the arrow keys.

03 · Editing

Every edit happens on the picture

Double-click adds a node. Hover one and its own size slider appears. Shuffle animates the nodes to new places, and undo walks back one step at a time.

04 · Export

Every ratio is cut from one square

A ratio crops the square’s band, the preview dims what will be cut, and the button reads the size Add to canvas will place in the file, up to 3840 px with Pro. The 21:9 ratio, cut in December 2024, came back.

Brand

A pixel G in the product’s own gradient

I designed the mark, a pixel G filled with a pink-to-violet gradient, and set it beside one interface purple and Inter. Most of the 2.0 launch cards put the real plugin on that purple with a single line.

Outcome

Free on Figma Community, with Pro on sale

Figma lets anyone run a plugin from search without saving it, so far more people have run it than kept it. Sales stay off this page.

Reflection

What I’d take to the next product