Marcus V.
Curving abstract shapes with an orange and blue gradient

Better Style Generator: My First Figma Plugin

Veröffentlicht

The Pain Point

If you've ever worked on a design system in Figma, you know the pain of style management. Creating consistent color styles, text styles, and effects across a large project is tedious. Updating them is worse. I built Better Style Generator to solve this for myself.

The plugin generates and organizes Figma styles automatically. Select a set of elements, run the plugin, and it creates properly named, hierarchically organized styles. What used to take an hour of clicking now takes seconds.

Learning the Figma Plugin API

The Figma plugin ecosystem is surprisingly approachable. Plugins are just TypeScript (or JavaScript) running in a sandboxed environment. The API documentation is comprehensive, and the community has created excellent tooling.

I started with Figma's official plugin template, which provides a basic setup with TypeScript compilation and hot reloading. The development experience is pleasant — changes appear in Figma immediately, making iteration fast.

FigUI3 by Rogie King provides React-style components that match Figma's native UI. Using it made the plugin feel like a native part of Figma rather than a crude bolt-on.

How It Works

The plugin walks the selected nodes, identifies styling properties, and generates named styles following a configurable naming convention. Color fills become color styles. Text properties become text styles. Shadows become effect styles.

  • Extracts fill colors, stroke colors, and gradients
  • Generates text styles from font properties
  • Creates effect styles from shadows and blurs
  • Organizes styles hierarchically based on node structure
  • Detects duplicates and offers merge options

The naming convention was the trickiest part. Style names in Figma affect how they appear in the picker UI. The plugin generates names like 'Color/Primary/500' that create a nice folder structure in the style picker.

Lessons Learned

Building a Figma plugin taught me about operating within constraints. The sandboxed environment limits what you can do, but those limits push you toward focused, single-purpose tools. Better Style Generator does one thing well rather than trying to be a Swiss Army knife.

The biggest lesson: tools for designers should think like designers. The plugin doesn't just extract data — it understands design patterns and generates styles that fit how designers actually organize their work.

This was my first shipped product in the Figma ecosystem. It's small, but it's used. That feedback loop — building something and watching others use it — remains the most satisfying part of making software.