Framegen is a premium AI platform exclusively for Framer designers and builders who want to introduce AI workflows and images into their work. This comprehensive plugin offers a vast library of high-quality AI collections, prompts and the ability to generate tailored AI images to enhance your Framer projects.

The project was to design, build and ship the brand, website and plugin with a GTM strategy that would kick-off onboarding early users.

I started the project by planning the UX and modals of the plugin, crunching some numbers and establishing the pricing modal. It was important to define this early, so I knew exactly how to position the product moving forward.

Marketing should always be baked into the product design.

Framegen was not the first AI generation plugin in the marketplace, so I had an opportunity to explore these existing tools to see how they approached delivering a high-quality product.

Some of these other tools are well known and had a larger backing than Framegen, so the pressure was on to create an experience that really delivered.

Design a brand, website, plugin and design system that would allow for fast production of content, leaning into AI.

Framgen had to 'pop' to stand out in the sea of plugins on the Framer Marketplace. There was not a large budget of ongoing paid media, so it was important that the plugin gained exposure through Framer and that same exposure led to content which could be used to further promote the tool organically.

A colorful Logomark was created, support by a simple Wordmark.

Next I started on the plugin. Luckily, I had already been working on a custom boilerplate for Framer Plugin development, now known as Framefast.

This gave me a strong foundation to build from, saving hours of time on the environment setup and components. I was able to focus more on the UX, to find the best experience for a smooth workflow, while making abundant features feel calm and spacious.

The AI modal I went with was Leonardo AI. I found their API and Documentation very good, plus the pricing structure worked very well for Framegen.

Payments were integrated with Lemon Squeezy, using licences and webhooks to validate accounts in Supabase.

Framegen was more than image generation, it was a library of image collections that users could access without spending credits generating new images.

This created a heavy administration burden to ensure new generations were populating the explore feed.

So I created an n8n automation that would explore, create and write its own prompts, then use our API keys for Leonardo to create the images. Because I already had a system for moderating images, I could store these as draft images and approve the ones that made the cut.

It would be strange if the website wasn't built in Framer, so of course it was.

This switch from product UI / UX to marketing website really allowed me to further explore the brand. The now completed plugin meant I could design the screens and components in Framer, staying true to the product UI.

Having a good relationship with the Framer team, I managed to fast-track Framegen through their review process. This actually identified one UX oversight with a support link, which was quickly rectified and passed.

Framegen quickly became one of the top plugins on the Framer Marketplace, and at the time of this case study, had over 20k users.

Work started on the roadmap of improvements, including new modals and better licence management and I included it on my marketplace Interface.

Update Feb 26': Work has started on the version 3 release which includes adjustment to our presets, new modals to explore and AI video generation. 🚀