.png)
At this year’s AI Demo Day, I shared how I’ve been using AI IDE agents—specifically Cursor and GitHub Copilot—to build custom Figma plugins for the community, VGV, and even for our clients like Toyota. These tools give me the ability to write complex code, quickly validate ideas, and automate repetitive parts of my design workflow, despite not knowing a whole lot about code.
Being able to build your own plugins is a total game-changer. It gives us control over our workflow, helps us move faster, and unlocks entirely new capabilities. Plugins aren’t just for designers, either—FigJam, Dev Mode, and even Figma Slides support plugins now. That means everyone on a team can benefit from tailored tooling.
What Figma Plugins Actually Are
In case you’ve never peeked under the hood: Figma plugins are just web apps built with JavaScript, HTML, and CSS.
You use the Figma Plugin API (not to be confused with the Figma REST API) to read/write directly to a file, leveraging the user's own credentials (no API keys needed). It even gives you access to variables without requiring an enterprise plan!
There are different types of plugins, too:
- Simple single-use scripts
- Menu-driven tools
- Full interactive UIs
Bottom line: if you can code it (or ask an AI to code it), you can build it into Figma.
From Curious to Custom: My Plugin Journey
My journey into plugins started with something called Very Good Flutter Styles—a plugin that exports Figma color and text styles into Dart code for Flutter themes.
That plugin took me weeks to build manually; I used ChatGPT, hacked around, and honestly had little confidence about the best way to approach the implementation. But I managed to get it working! And adding Dev Mode support made it helpful for both designers and devs. It automated a tedious task and made our handoffs faster and more accurate.
Since then, I’ve built and released a bunch of plugins, everything from variable renaming, calculating, and matching values across modes. And the key to this breakthrough? AI agents.
AI + Figma Plugins = Superpowers for Designers
With tools like Cursor and Copilot, I’ve gone from fumbling through JS tutorials to shipping useful, production-grade plugins in as little as a few hours.
Let’s look at some recent examples:
Very Good Aliasing (4 hours to POC)
Often in design systems, there are raw color values related to a brand (e.g., blue or red), and separate semantic roles (e.g., primary or secondary) that all appear in design tokens. For complex products, making sure the brand color and its variants stay synced and updated across all of their semantic roles can be tedious. This plugin bulk-assigns variables to their semantic usage in seconds, providing a quick way to configure a theme. It replaces hundreds of clicks down to a few for each color. It’s a game changer. Using Cursor, I even built a variant that re-aliases based on values instead of names in about an hour.
Very Good Flutter Variables (4 hours to POC)
A follow-up enhancement to the Very Good Flutter Styles plugin, this one exports Figma variables and modes as Dart code, which can generate light and dark themes in a single export. I’d actually tried and failed at this plugin before, but AI made it happen in hours.
Toyota Icon Lint (2 hours to POC)
We’ve been working with Toyota to scale their powerful design system used in their in-vehicle center console. I built this plugin to validate icon formatting rules for their internal asset pipeline, to check the settings for things like fill-rule, orientation, color, and name. It flags dozens of rules across hundreds of icons in seconds instead of requiring manual spot checks, which could take minutes per icon. Now it’s used by global teams, giving time back to work on more meaningful features.
My AI Agent Workflow (No Engineering Degree Required)
I’ve developed a simple, iterative workflow that’s worked for me. It allows you to quickly start with an idea and evolve it through small requests. This method allows you to gain a better understanding of how the code works, making it easier to identify where issues are arising.
- Start with a clear vision: I write a quick doc in Notion with plugin goals, key data structures, and examples of input/output.
- Use Cursor in Agent + Auto mode: It writes and updates code for me—hands off! It also picks the best model for the job.
- Keep requests small and focused: Too much context can cause issues that take time to fix. Focused steps = success.
- Provide examples: When I don’t know the right jargon, I show the AI my expected inputs and outputs.
- Use version control: The agent will break your code eventually. I use GitHub Desktop to save and explore safely.
- Ask for help! The agent can log values, debug, and explain errors, just ask. It can often fix issues based solely on the logs.
The Hardest Part? Not What You Think.
Most of the actual plugin logic was easier than I expected. But the real challenge? Making it usable. Things like:
- Validating edge cases
- Preventing user errors
- Handling weird Figma property values (like rotation 0 = -0.000003e12 😩)
My Big Takeaways
- Everyone should try this. You don't need to be an engineer. These tools let you test, build, and explore in ways that were never possible before.
- AI opens new doors. I now look at problems differently: not as constraints, but as opportunities for automation using new processes and tools.
- We can build better, more personal tools - fast. Whether it’s internal workflows, client handoffs, or even just reducing frustration, these plugins improve how we work.
- AI agents can do way more than plugins. Cursor can easily scaffold and build a Flutter app—components, themes, interactions—all through chat.
If you’re curious about building Figma plugins, or even what you might be able to create with a little help from an AI agent, I hope this shows you what’s possible.
And if you ever want to chat about plugins, Figma, or Cursor, I’ll be happy to talk about it, so feel free to reach out!
.png)
.png)
.jpg)
