I built a figma plugin using Claude in 24 hours

StyleBind is a figma plugin that lets you bulk edit text styles and bind each font property to variables. You can try it out here.

The Problem

While trying to explore and build design systems at Open Government Products, managing text styles, colors and variables and trying different token structure was a huge part of it. Work flows were super tedious as most of the editing requires going into each property and changing them. My colleague and I spent a lot of time exploring tooling in the end, making Figma plugins that can help us manage our workflow more efficiently.

One of such problem was binding variables for different font properties to text styles in bulk. It is really a time sink to do it manually. I also want to explore different text styles structure so being able to bulk bind variables will be great. Now I finally have time to build the tool.

The Process

Thanks to Claude, I manage to build the first working prototype in about 24 hours.

Here was the super high level prompt I started with

i would like to build a figma plugin - a text style editor where i can select a few text styles and edit the linked variables at the same time.

then I went to bounce ideas with Claude, clarifying questions about my coding ability, preferences, any design choices etc. I also pasted it figma doc, some reference plugin code that I found on Github as inspiration. Then after some back and forth, Claude came up with the full prompt instructions for me to paste in Claude CLI.

The first cut was not really functional, just pure ui. Checkboxes, some inputs. But after 24 hours of prompting, debugging and testing. This was the outcome.

The Outcome

I got a fully working prototype by end of the first day and shared it on Linkedin. It took me another day to refactor, optimise and prep for the icons and screenshots necessary for the plugin submission. I needed to pay attention to the font loading and caching for this app. Luckily I have Claude, it was great at suggesting optimisations and consolidating my various functions into 1 font service and cache the fonts loaded. If the plugin don't preload fonts properly, users will not be able link the text styles' font family in respective font weight properly to the respective variables.

Why building this matters

This is a very niche product targeted at design systems builders like myself. I think to people who are not familiar with Figma workflows, they won't be able to understand. Not having this means I cannot test out different token structure easily, which means we just go with what we think can work because changing is too tedious.

Once u have all these foundational tools that encourages exploration and iterations, we can test different token structure that can optimises designers workflow. Then the designers can focus on higher order tasks like talking to users, designing user flows instead of spending time clicking and doing low level design like linking variables, making components from scratch because of poor foundations. And when designers have flow, the users benefit in better experiences.