David Bowman
Fig. 1 — title-card.webp
This is a group of components generated by Figmagent from an existing codebase. All component instances are correctly linked to their Figma libaries and all available Figma variables are properly applied. Fig. 2 — figma-output.webp
This is the output when the agent is prompted to inspect Figma and the corresponding code and compare the two. Fig. 3 — audit-output.webp
This is the result of the agent's work after being prompted to bring the Figma file in line with the changes made in code. Fig. 4 — figma-output-after.webp

FigmagentNo. 026

Figmagent is a custom MCP and harness for using AI agents inside of Figma for design tasks, not just for code extraction or vibe-y prototypes.

Figmagent was designed to make routine junior-level design work reliable and efficient. I made it as a tool for myself because I found agentic design tools extremely lacking: they were either big “make me a design” buttons or were hyper-focused on design handoff. Nothing could help me actually do stuff in Figma, and anything that claimed it could proved to be unreliable.

As model context windows increased, harness developers traded efficiency and reliability for flexibility by relying on context-based guardrails like skills. Figmagent tries to approach work in Figma like work in code. If any question about the agent’s work has a clear yes/no answer then that judgement should be built into the harness instead of relying on model inference and reasoning.

This led to increased reliability on tasks like refactoring designs, auditing component sets and updating design libraries to match new code releases — things we all know we should do but never have the time for. Intern work. Figmagent is a reliable intern. I’ve found it to be super helpful. You should give it a try.

Some details of how I architected it:

Claude Code-shaped interface
I tried to mirror the structure of tools agents are already familiar with and trained on. The five-tool structure of Claude Code was adapted to structure the main tools Figmagent offers. This made it easier for the agent to know what tool to reach for — it was already familiar with the pattern.
Intent-based tools
Agents can handle greater complexity within a tool. In fact, I think they prefer it. Instead of lots of single-activity tools, agents can handle a very complex tool that maps to a single intent: search, create, mutate. Within those high-level tools they are given the ability to do lots of things tied to that intent, which yields fewer tool calls, which leads to fewer verification round-trips and more reliable work in Figma that conserves context and tokens. The agent’s super power is to relentlessly follow an intent; tools mapped to that intent are more easily discovered and more successfully used.
Build determinism into the harness
If a certain output is always wrong, the agent shouldn’t need to check a guideline or md file to find that out. The default Figma MCP relies on agents using skills and documentation to write JavaScript to manipulate Figma files. Figmagent provides the agents with tools that handle the JS, eliminating a wide swath of potential errors. The tools also provide error feedback to the agent and input typing. It basically self-documents the tools, allowing the agent to quickly learn how to effectively make changes in Figma. They can experience Figma more like a human does: by using it, not by reading a manual and then trying to write code to manipulate the interface.
Save model inference for the hard stuff
Certain choices can’t be automated. What component to use? Which pattern to reach for? What tokens to apply? This is where real judgement is needed, and this is where the non-deterministic reasoning capability of an agent really shines. If the context budget can be saved for this work instead of fumbling with JS and tools then the agent does better work. This is really what takes a design agent from a cool demo to something that actually has utility.
Designed at
Automattic
Work
Design Engineering, Agent Experience Design
Link
Github