Building a Figma Plugin: Lessons from Local Styler

Building Local Styler taught me more about product development than any course ever could. Here's the full story — from the initial frustration that sparked the idea to seeing thousands of designers use it daily.

The Spark

I was working on a large design system and realized how painful it was to create and manage local styles in Figma. The native workflow required too many clicks, and there was no way to batch-generate styles from a color palette. So I decided to build the tool I wished existed.

Technical Decisions

I chose React for the UI and TypeScript for type safety with the Figma API. The plugin architecture is straightforward: a UI layer that communicates with a sandbox that has access to the Figma document. But the devil is in the details — handling edge cases, managing undo states, and keeping the UI responsive while processing large documents.

Key Challenges

Performance: Processing hundreds of styles simultaneously required careful optimization. I implemented batching and progress indicators to keep the experience smooth.

UX: A plugin for designers needs to have impeccable UX. I went through 12 iterations of the interface before landing on the current design.

Distribution: Getting discovered on the Figma Community required good documentation, clear screenshots, and active community engagement.

Results & Takeaways

Local Styler now helps thousands of designers manage their styles more efficiently. The key takeaway? Build tools that solve your own problems first — if you feel the pain, others probably do too.