For as long as I can remember, I’ve been obsessed with finding tools that make my work (and life) easier.

So picture this: I’m deep in my flow state, building out a website that’s going to blow minds, when I realise I need to check the colour contrast for accessibility. And what do I have to do? Step out of Framer just for that, open some random website tool, check the colours, and then head back into Framer. Rinse and repeat about 13 times.

That’s when it hit me — why not build my own plugin? And in turn, reduce the number of times I’d need to jump tabs.

Honestly, it turned out simpler than I expected.

So here’s my honest, straightforward guide to creating your first Framer plugin, based directly on my own experience. Trust me, if I can do it, you definitely can too.

1. Define the Problem

First things first. What’s driving you absolutely crazy in your Framer workflow?

The bonus here is if it’s something you’ve personally struggled with. That deep, personal frustration gives you all the context you need to understand why it’s worth solving.

For me, it was colour contrast. I was tired of jumping between tabs just to check if my designs were accessible. The constant tab-switching was doing my head in.

Once you have your problem, chat with an LLM like ChatGPT or Claude. Just spill all your thoughts about:

• Why this problem annoys you

• What your dream solution looks like

• How it would fit into your workflow

Have the LLM write up a product requirements document (PRD) that captures your vision. It’s like having a product manager friend in your pocket.
(Not that I advocate for putting your friends in small spaces).

2. Set Up Some Documentation

Now, let’s get organised. I know, I know — documentation sounds boring, but trust me, your future self will thank you.

LLMs tend to hallucinate a lot, so you’ll want to put some guard rails in place.

Instruct your AI assistant to create these files for you:

• implementation-plan.md – Your roadmap for building

• prd.md – The detailed requirements

• project-status.md – Your checklist for progress.

Put all these in a folder called “documentation”. More on this later.

3. Initialise Your Framer Plugin

Time to get this party started! Head over to the Framer plugin docs and follow their commands to create your plugin folder.

Remember those documentation files you just created? Drop them into your new plugin folder structure, which should look something like this:

See those documentation files, yeah? They play the most crucial part of this puzzle.

4. Start Building

This is where the magic happens! Fire up your favourite AI-assisted IDE (I’m a Cursor fan myself) and let’s get coding.

First, have the AI read through your "prd.md" and explain back what it understands about the plugin. Correct any misunderstandings immediately—this saves headaches later.

Instruct the agent to consult the "implementation-plan.md" before starting each major feature. It should follow this step-by-step, automatically updating your "project-status.md" file as you go.

I found that when I dropped a link to the Framer plugin API docs in my Cursor chat, the agent was able to better reference it and write better-conforming code.

5. Test and Debug

After a few hours of back-and-forth with your AI pal, you should have something that… well, sort of works! It might not be pretty, but functionality first, right?

Run "npm run dev" in your terminal and open the development plugin in Framer to see what you've created.

Take screenshots of any bugs you find and describe them to your agent. Iterate until things feel right.

6. Redesign the Interface

Now your plugin works, let’s make it visually appealing. Capture your current UI, put together a mood board, and refine the look in your favourite design tool (Figma works great here as it ties into the next step). Aim for something reliable, usable, and ultimately pleasurable.

7. Update Your Plugin UI

Now comes the fun part — making your plugin look as good as it functions!

You can upload screenshots of your redesign to your agent, or if you’re feeling fancy, try out the Figma MCP Server that lets Cursor directly interact with your Figma designs. Just copy a link to your frame, paste it into Cursor, and watch the magic happen.

8. Final Polish and Debug

You got your plug-in looking great! Take some time to nitpick and tweak your plugin.

Make sure it adapts to the active theme of the Framer canvas — when the canvas is in light theme, your plugin should be too, and vice versa. These little details matter.

I spent a great deal of time getting the theme change working effectively, but only made headway when I pasted the exact instructions from the Plugin docs.

9. Test and Deploy

Time to unleash your creation on the world! Run all your tests one last time and check that your plugin meets all the Framer plugin submission guidelines.

Run "npm run pack" to create a "plugin.zip" file in your root directory. This zip file is what you'll upload to the Framer marketplace.

The review process typically takes about 21 days. The Framer team will reach out if they need any changes before listing your plugin.

Common Pitfalls

While AI makes this entire process relatively simpler, there are still things that might make you pull out your hair if you’re not careful:

1. Saving Progress

Version control is your best friend. Set up Git and push your code regularly to a remote repository.

Make commits before you start working on a new feature and after you get each feature working. Trust me — I was thankful for this when my Cursor agent got stuck in a loop trying to fix a bug.

Save yourself from losing days or even months of work.

2. AI Limitations

Your AI assistant will sometimes confidently write completely incorrect code. Double-check everything, especially API calls and imports, and remind it to reference documentation regularly.

3. Scope Creep

You’ll be tempted to keep adding “just one more feature” — resist! Get your MVP working first, then iterate.

Conclusion

Building a Framer plugin might seem intimidating initially, but with the right approach, it’s totally doable. Seeing your plugin in the Framer marketplace feels absolutely fantastic.

And the best part? Every time you use your own plugin, you feel that little burst of pride. “I made this!”

So what are you waiting for? That Framer plugin idea could become a reality in just a few weeks.

Cheers, and happy building! ✨