Building Custom Figma Plugins: How a VGV Designer Codes with AI

Designer Murphy O'Rourke on building an entire ecosystem of custom Figma plugins with AI, from his first ChatGPT experiment to Claude Code, on Very Good Engineering.

7 min read

Most conversations about AI and engineering focus on people who already write code for a living. This episode of Very Good Engineering flips that. Host Jorge Coca sits down with Murphy O’Rourke, a designer at Very Good Ventures who taught himself to build custom Figma plugins with AI and has quietly grown a whole ecosystem of them that the VGV design team now relies on every day.

About Murphy O’Rourke

Murphy is a designer at Very Good Ventures who leads design on some of the company’s most complex programs. He describes himself as a more technical designer than most, and the background backs it up. He started in front-end work, learned HTML, CSS, and JavaScript, taught himself enough WordPress to build sites for friends and clients, and picked up Git along the way. His first role had him building the front end for a PhoneGap app, embedded with a mobile design team. Years of sitting close to engineers, mostly on design systems, gave him a clear view of where design and code rub against each other: handoff, consistency, and the time it takes to push a single change through a whole system.

What a Figma Plugin Actually Is

A Figma plugin is a way to interact with the canvas and the data behind it. Murphy draws a line between two things people often confuse. The Figma API is more powerful but sits behind higher subscription tiers, so reaching features like variables requires an enterprise or org plan. The Figma plugin API runs locally in the app, uses your own authentication, and opens up a huge amount of that same functionality. A plugin is mostly a few files: some JavaScript or TypeScript, sometimes an HTML file, and a manifest. From there you can read and write the design data directly.

The payoff is ownership. Instead of stitching together marketplace plugins that each get you 90 percent of the way, a team can build tools shaped exactly around how it wants to work. As Murphy puts it, you no longer have to keep up with the Joneses and work the way everyone else does.

The First Plugin: Very Good Flutter Styles

Murphy’s first plugin, Very Good Flutter Styles, shipped in late 2023, about two and a half years before this conversation. It takes the theme colors and text styles from a Figma component library and exports them as Dart code. That solves a real handoff problem. A project can carry hundreds of styles, with each text style holding six to ten properties, and moving all of it into code by hand is slow and easy to get wrong. Change a few values later and the migration starts over.

He built it by talking to ChatGPT, asking for a function to pull the style data, pasting the result into a JavaScript file, and wiring the pieces together with his own limited knowledge of code. It took about a month of working in fits and starts, plus close collaboration with VGV developers to get the output up to standard. The result drops clean Dart into the codebase, with each style commented with its font size in pixels and declared exactly the way the team writes it in Flutter. When VGV’s engineers first watched Figma produce reliable Dart for their theme, Murphy says their minds were blown.

An Ecosystem Built on Variables

Most of what Murphy builds traces back to VGV’s template files and how they handle variables. The team builds adaptive layouts from variables and uses Figma modes to flex color and size, so a single component can render as a phone, tablet, laptop, or desktop, in light or dark, at different text and global scaling levels. Under that sits a three-tier structure: a theme layer for colors, a layout layer for sizing across breakpoints, and primitives where the raw color and font values live. It supports multiple brands and responsive typography. It is powerful, and the variable tables get complex fast.

That complexity is where his plugins earn their keep. A few of them:

  • Locals Only — When a template is duplicated for a client, it detaches from the source of truth, and Figma offers no native way to pull updates back in. Locals Only matches the template’s naming conventions and remaps colors, numbers, styles, and effects to the new file’s local variables in one pass. He originally built it to copy layouts into Figma branches without overriding every value by hand.
  • Variable Calculator — Scopes a math operation to a chosen collection, mode, or group of variables. Want every tablet value multiplied by 1.2, or type previewed at 200 percent? It runs the calculation across all of them at once instead of editing more than a hundred number variables one at a time.
  • Mode Match — Copies every value from one mode to another, so matching tablet portrait to tablet landscape becomes a single action.
  • Variables to Text Styles — Pushes variables from text objects into text styles. It complements Styler, a community plugin Murphy admires, which uses layer names as a source of truth but blanks out applied variables. One client maintains around 1,200 text styles to cover responsive scenarios, and he says he would still be updating them by hand without this.
  • Very Good Alias and Very Good Swatch — Reskin an app fast by remapping semantic colors to new primitives and updating dozens of swatches at once. Re-theming 61 swatches by hand is slow. Doing it in a second is not.
  • Contrast Audit — Checks foreground and background combinations across components, reports the contrast ratio, and flags whether each passes for text. It even flattens transparency into a real hex value so semi-transparent colors get checked accurately. Murphy has run it for many clients and says it collapses days of work into minutes.

From a Skill to a Plugin: The Very Good Design Kit

One of his newer tools started as a Claude skill that interviewed the user and customized a template file. It worked, and it ate an entire session’s worth of tokens. So he rebuilt the same idea as a plugin, the Very Good Design Kit. It validates that a file’s collections are structured correctly, then walks through brand colors, multi-brand support, font families, type scale and ratio, and number scaling across devices. Then it re-themes the whole file: text styles, sizes, accessibility scaling, all of it. The best part, he notes, is that it uses no tokens and can run again and again as the design changes.

The plugin he is proudest of is Control R, for renaming variables. It gave designers search-and-scope renaming for variables before Figma shipped its own version, borrowing the pattern Figma already used for renaming layers. It picked up traction on design blogs he had never heard of and shout-outs from people he admires in the design community.

From ChatGPT to Claude Code

Murphy’s toolkit has changed a lot since 2023. He moved from ChatGPT to Copilot and Cursor, and now leans on Cursor and Claude Code. A proof of concept that once took a month can now take 15 minutes to an hour. He keeps a public starter kit on GitHub with the boilerplate files a plugin needs, common functions, and a set of Claude skills and Cursor rules for chores like generating a README or a community description.

For quick ideas he reaches for Cursor and simply tells it to build. For anything complex he opens Claude Code in plan mode, often planning with Opus and building with Sonnet, clearing context between the two. He estimates plan mode one-shots the idea about 90 percent of the time, and that it sometimes thinks of things he had not considered. He also points the agent at the Figma file through the Figma Console MCP, using a community plugin called Bridge, so the model can read the layer structure and colors directly instead of having all of it described to it.

When Design and Engineering Blur

The conversation keeps circling back to a theme VGV calls trust and taste. With these tools, the old lines between product, design, and engineering get blurry. A designer can take a first pass at code, an engineer can prototype in a design tool, and the back and forth gets faster. Murphy is clear-eyed about the limits. He can jump into code, but he leans on developers to judge whether it belongs in the app. What changes is that ideas can come from anywhere and get expressed in a way the rest of the team can see and build on.

He points to shaders as an example. Custom shaders and interactive effects used to demand a lot of specialized knowledge and time. With AI explaining them in plain language, they open up to more of the team, which makes room for work that used to get cut for budget or schedule. His own Ghostty terminal setup, with shaders and an animated message of the day written by Claude in a shell script he admits he does not fully understand, is a small, fun proof of the point.

Key Takeaways

  • Build for your own workflow. Marketplace plugins get you most of the way. Custom ones fit exactly how your team works.
  • Start with the pain. Murphy’s plugins all come from repetitive, error-prone tasks in design systems work.
  • AI lowers the floor. You no longer need deep coding expertise to ship a useful tool, just a clear idea and the willingness to iterate.
  • Plan mode matters. Letting the model plan before it builds is what turns a rough idea into a one-shot result.

Conclusion

Murphy O’Rourke’s plugins show what happens when a designer treats AI as a way to build the tools he always wished he had. The work is less about replacing engineers and more about closing the gap between design and code, so a team can move faster without giving up structure or accessibility. For anyone curious about extending Figma, his advice is simple: find a repetitive task, learn just enough to start, and build.

About the Author

VGV Team

Insights from the team at Very Good Ventures, the consultancy behind some of the world's most successful Flutter apps and open source tools.

Frequently Asked Questions

What is a Figma plugin?

A Figma plugin is a way to interact with the canvas and the data behind it. It runs locally through the Figma plugin API using your own authentication, and is built from a few files of JavaScript or TypeScript, sometimes an HTML file, and a manifest. From there it can read and write the design data directly.

What was the first plugin Murphy built?

Very Good Flutter Styles, which shipped in late 2023. It takes the theme colors and text styles from a Figma component library and exports them as Dart code, removing the manual effort of moving hundreds of styles into a codebase by hand.

What tools does Murphy use to build Figma plugins now?

Mostly Cursor and Claude Code, along with a public starter kit on GitHub that holds the boilerplate files, common functions, and a set of Claude skills and Cursor rules. For complex plugins he uses Claude Code in plan mode, often planning with Opus and building with Sonnet.

How long does it take Murphy to build a plugin today?

He says a working proof of concept can take anywhere from 15 minutes to an hour, depending on scope. His first plugin took about a month of working in fits and starts before AI tools matured.

Which Figma plugin does Murphy admire that he didn't build?

Styler. He calls it simple, well made, and hard to beat, and credits it with shaping how he thinks about using layer names as a source of truth in his own plugins.