Why I Started Building My Own Figma Plugins

Every new design system starts the same way for me. Pick a brand color, stretch it into a scale, name every step, turn the steps into Variables, make matching styles, then build a little documentation frame so everyone knows what's what. Then do it all again for type. Then, a few weeks later, someone needs a chart in a mockup and I'm drawing bars by hand.

None of that work is hard. That's exactly the problem. It's slow, it's fiddly, and it eats the hours I'd rather spend on actual design decisions. So I stopped grumbling about it and started building my own Figma plugins. Between 27 November and 12 December, three of them went live on the Figma Community.

The itch: repetitive setup work

I design and I write frontend code, so I notice repetition the way a developer notices a duplicated function. When I catch myself doing the same sequence of clicks on project after project, a small voice starts asking why this isn't a script yet.

Design-system setup is full of these loops. Color ramps, type scales and placeholder charts are rules-based work. There's a formula behind each of them, and the formula barely changes between projects. Anything that's mostly a formula is a good candidate for a tool.

Three plugins, three chores gone

Color Palette Generator

Color Palette Generator Variable/Styles went out on 27 November. You give it one hex code and it builds a Tailwind-style 8-step palette, from 100 to 800. It then creates Figma Variables as color primitives, creates matching Paint Styles, and draws a documentation frame with the hex codes and contrast labels. A live preview shows the ramp before anything lands in your file.

It also has no network access. Your colors never leave your file, which felt like the right default for something that touches a brand's core palette.

TypeScale Generator

One day later, on 28 November, TypeScale Generator followed. Type scales used to cost me the most time, because desktop and mobile rarely want the same sizes. This plugin builds both side by side, with a live split preview in the font you've chosen. It auto-loads Google Fonts for that preview, creates Figma Variables (as floats) and text styles, and outputs an auto-layout typography specimen frame you can drop straight onto your docs page.

Chart Generator

The newest one, Chart Generator (InstaChart), shipped on 12 December. It covers more than ten chart types, including bar, line, area, pie, donut, scatter, radar, polar area, and a mixed line and column chart with dual Y axes. You can paste CSV, upload a .csv file, or hit Randomize when you just need believable dummy data. Pick a theme (Pastel, Neon or Ocean) or bring your own palette. The output is editable SVG vectors set in Inter, so it behaves like anything else you'd draw in Figma.

What building for Figma taught me

I expected the code to be the hard part. Mostly it wasn't. The real lessons were about the platform and about scope.

• The plugin API rewards reading the docs twice. Figma's API is well documented, but it has its own rhythm. Fonts have to be loaded before you can touch text, and there's a clear line between the sandboxed code that edits the canvas and the iframe that draws your UI. Once that model clicked, everything else got easier.
• Variables change what "output" means. Drawing rectangles with the right fill is easy. Creating real Variables and styles that a team can bind to is what makes a plugin useful past the first five minutes. The result stops being a one-off and becomes part of the system.
• Keep the UI small. A plugin lives in a tiny panel next to someone's work. Every extra toggle is a decision you're asking them to make mid-flow, so I cut options until each plugin had one obvious path from input to result.
• Defaults are design decisions. An 8-step ramp, Inter for charts, desktop and mobile shown together. Good defaults mean most people never open the settings at all.

Ship v1, then fix what breaks

I could have polished each plugin for another month. Instead I shipped a v1 as soon as the core flow worked, and I'm glad I did.

TypeScale Generator is the honest example. Its first version had an error that could leave the UI blank, which is about the worst first impression a plugin can make: you open it and nothing happens. Version 2 went out on 2 December with the fix. Four days from launch to patch.

That's the same loop I believe in for product work: ship, watch, fix. A real file in a real workflow finds problems that testing on my own screen never will, and small releases keep those problems cheap. Feedback from actual use is what shapes each next version.

Austin Kleon's Show Your Work! has been on my desk for a while, and putting small, useful things out in public is very much in its spirit. A finished v1 that people can try beats a perfect v3 that only lives on my machine.

Try them (and tell me what's missing)

All three are live on the Figma Community. If you set up palettes, type scales or charts often, give them a spin on your next project. And if something feels clunky, or a feature you need is missing, I genuinely want to hear about it. That's how the next version gets better.

The bigger lesson for me is that designers don't have to wait for someone else to build the tool they wish existed. If you can describe a chore clearly, you're already halfway to automating it. Mine just happened to start with a single hex code.