Hey! I’m Sergio, an independent Frontend Engineer and Interaction Designer, and I’m excited to share the story behind my first Framer plugin, Styleguide Generator. Let’s get into how this came together!

What Does the Styleguide Generator Do?

The Styleguide Generator helps designers and brands build styleguides in Framer quickly and efficiently. It lets you select project styles and automatically generates pre-built components filled with your colors and text styles. With one click, you can update all your components to reflect any style changes—saving you a ton of time!

The Inspiration Behind the Plugin

When Framer announced the plugin beta, I wanted to solve a problem I’d faced myself: creating styleguides can be repetitive and time-consuming. Using the early plugin APIs, I developed a prototype to automate the process, and that’s how the Styleguide Generator was born.

Why I Built It

Manually making styleguides for every project gets tedious, so I wanted to simplify that. Plus, it was exciting to be among the first to experiment with Framer’s plugin APIs and contribute feedback to the team.

A Challenge Along the Way

Framer initially only loaded fonts used on specific pages, which made it tricky for my plugin to display all project fonts. Luckily, Framer added a new API that allowed me to load fonts in code components, solving the issue!

Read more stories from other creators behind Framer plugins!