Streamlining Design Systems with Styles IO

Hey there! I’m Giles Perry, a Product Design Director at Skyscanner, and I’m excited to share the journey behind my plugin, Styles IO, as part of the Framer Plugins blog series.

What Does the Styles IO Plugin Do?

Styles IO allows you to export text and color styles from one project as a JSON file, and then import them into another project. If you’re managing multiple sites under the same brand or working across projects that share a design system, this plugin will make your life a lot easier. You can even use it to take a snapshot of your project’s styles while iterating, giving you a safety net to return to earlier versions if needed.

A Little About Me

I lead the design system team at Skyscanner, ensuring our brand and design principles are consistent across products. I’ve worked with design systems extensively, so I understand the pain points when it comes to managing styles across different projects and teams.

The Inspiration Behind Styles IO

While managing the design system at Skyscanner, I realized Framer didn’t have a native feature to easily share styles across multiple projects. This inspired me to build Styles IO—a tool to fill that gap and streamline the process for designers like me who manage complex systems.

Why I Built the Plugin

Honestly, it started out of curiosity. I’ve built plugins for Sketch and Figma in the past, so when I heard Framer was launching its own plugin ecosystem, I was eager to dive into the developer documentation. I wanted to see if I could build something practical that would save my team time as they work in Framer every day.

Overcoming Challenges

The biggest challenge was figuring out how to read and write files in JavaScript—it was completely new territory for me. It took a bit of learning, but once I cracked that, everything started falling into place.

I just submitted Styles IO for review, and I can’t wait to share it with the Framer community once it’s approved. Stay tuned!

Read more stories from other creators behind Framer plugins!