---
title: "Figma vs Paper for AI design: every token, tool call and dollar"
description: "I gave Claude Code one brief and three AI design tools, and logged every tool call and token. Not a feature list. What each one did with the same 11 minutes, and why the prettier result lost."
date: 2026-10-26
tags: [ai, design, tools, claude-code, figma, paper]
url: "https://mahdif.com/blog/figma-vs-paper-ai-design/"
---
# Figma vs Paper for AI design: every token, tool call and dollar
I gave Claude Code one brief and three AI design tools, and logged every tool call and token. Not a feature list. What each one did with the same 11 minutes, and why the prettier result lost.
I have been a product designer for 17 years, and for years Figma was the answer before anyone asked the question. Last week I ran a test where Figma won on looks, 12 calls to 8.
I still picked Paper.
The test: Claude Code read the codebase of [Peeko](https://usepeeko.com/), my analytics tool, and wrote one design brief for a new landing page. The same brief went to an agent working in Paper through its MCP server, an agent working in Figma through the Figma MCP server, and Figma's own Figma Agent, which just came out of beta. A conductor agent logged every tool call, screenshot and token. Whichever design won would become Peeko's real landing page.
This is not a verdict on which tool is better. It is a breakdown of what each one is better at, because the answer changed depending on what I measured.
Watch it or read it. The video below is the whole 30-minute test. Everything under it is the same test in writing, with every number, chart and screenshot, so you can skip the video and lose nothing.
The full test, 30 minutes. Rather read? It all starts right below.
## One brief, three tools
The brief asked for two directions, Sunny Side (light) and Night Watch (dark), with 13 sections each. It also moved Peeko's positioning. Peeko started out marketed to technical people, and I want it to work for anyone shipping something, including vibe coders who have never set up analytics.
Claude Code (Opus 5.5, medium effort) spun up a conductor, and the conductor started one agent per tool. Each agent built both pages from the same file.
The Figma Agent was the odd one out. It lives inside Figma, so it can't see my codebase, my project files or my repo. It got the same brief as a markdown file attached to its prompt, and nothing else.
What the Figma Agent could see: one markdown file. The MCP agents could read the whole project.
If you want to run your own comparison, that is the part worth copying. Have the agent write the brief to a file first, then hand the file to every tool. Otherwise you are comparing prompts, not tools.
## The race: 14.6 seconds against 2:29
The finish times were a wash. Paper took 10:45, the Figma Agent 10:48, the Figma MCP server 11:29.
The start was not. Paper put something on the canvas after 14.6 seconds and then painted the page in real time, section by section. Figma showed nothing for 2 minutes and 29 seconds, then arrived in chunks, one large component at a time.
The first minutes, at double speed. Paper on the left is already drawing. Figma on the right is still a blank page.
That difference matters more than it sounds. The first two minutes are when I catch a wrong direction. If the agent is drifting, I can nudge it while it works and save the other nine minutes. With Figma, the first time I could react was after the agent had already committed.
Paper's first move was the empty page, at 14.6 seconds. Figma's first move, at 2:29, was most of the hero at once.
## Figma won the looks
I went through every section, light and dark, side by side, and called a winner on each. Figma took 12, Paper took 8. Scroll both pages and judge for yourself.
Paper
Figma MCP
The full Sunny Side pages, exported from the actual Paper and Figma files. Each one scrolls.
Paper won on details. Its hand-drawn arrow points at the right thing. Its shadows are consistent hard 45 degree shadows on the buttons and the card, where Figma's only reach the buttons. Its FAQ and its narrower text columns read cleaner.
Small, but it's the kind of detail I'd fix by hand. Paper's arrow lands on the badge. Figma's misses it.
Figma won on presence, and it won the dark theme outright. The glow behind the Night Watch hero, the bold headline, the big call to action at the end: Paper's dark page looked flat next to it. Figma also built nearly everything in auto layout, which is how I would have built it myself.
Paper
Figma MCP
The full Night Watch pages, Paper on the left, Figma on the right. I prefer light themes anyway, and this one was not close.
Both slipped. Figma's first pass had clip content switched on and cropped a button (it fixed that later). Paper's dark FAQ fell back to the system font. And both, independently, drew Peeko's logo as an inverted L, which is an odd choice if you ask me.
Two tools, one brief, the same invented logo. Neither looked up the real one.
## The numbers
Paper MCP vs Figma MCP: the scoreboard
PaperFigma MCP
Total time
shorter wins
Paper wins
10:45 ✓
11:29
First thing on the canvas
sooner wins
Paper wins
14.6 s ✓
2:29
Tokens
fewer wins
Figma wins
13.4M
4.1M ✓
Estimated API cost
cheaper wins
Figma wins
$4.23
$1.77 ✓
Tool calls
how hard it worked
109
35
Fixes after its own review
both pages
16
11
Sections I liked better
more wins
Figma wins
8
12 ✓
Figma won three rows, Paper won two. The Figma Agent finished in 10:48; it runs inside Figma, so the rest couldn't be logged.
Paper works by doing a lot: about 10 tool calls a minute against Figma's 3. It writes to the canvas, takes a screenshot, fixes, writes again. Figma makes fewer, bigger writes.
Where the calls went. Paper wrote to the canvas 65 times and checked its work with 35 screenshots. Figma: 13 and 15.
That is also where the tokens go. Paper's line climbs the whole way. Figma's stays low and flat, and it finished at about a third of the tokens.
Tokens over the 11 minutes. Paper ends at 13.4M, Figma at 4.1M.
On my Claude subscription that difference never reaches my bill. If you run your models through an API key, through OpenRouter or OpenCode, it does, and Figma is the cheaper tool to design with. Most of it is cache reads: the agent rereading context it already has.
The bill at API list prices. Cache reads are most of Paper's $4.23.
## The handoff is the part nobody measures
Every number above stops when the design is done. The real job doesn't.
Paper's canvas is HTML and CSS. When a Paper design goes into the codebase, the model is mostly copying code that already renders in a browser. Figma stores designs in its own format, so getting to code means translating every frame, fill and auto layout into CSS.
The same header, as each tool actually writes it. Paper writes HTML. Figma writes its own values, like colors from 0 to 1.
That translation takes time, it takes tokens, and every step is a chance to drift from what you approved.
Back to code: Paper's path is a copy. Figma's has a convert step in the middle.
I didn't time that half in this test. I have done it both ways enough to know which one is slower. So the token gap above is real, but it is the cost of the cheap half of the work.
## The Figma Agent: promising, and quiet
This was my first time using it. It finished in 10:48, almost exactly with the other two.
It did things the MCP servers couldn't. It found Peeko's real logo in my Figma file and used it in both themes. It used the icon set already in that file. It figured out the full height of the page before it started, and built both themes side by side.
The Figma Agent near the end, with both themes on one canvas.
The page itself was weaker. The arrow points at nothing. The hero is crowded. Tilted icons were trying to be playful and read as unprofessional to me. Two footer colors fight each other, and its dark theme was a step down from what the Figma MCP server made.
Its hero, with my two first notes. It did get the real logo in the corner.
It had good ideas too. It put icons in a section where both MCP servers left them out, and its closing call to action is one I'd keep with a few changes. Here are both of its pages.
Figma Agent · Sunny Side
Figma Agent · Night Watch
Everything the Figma Agent made in 10:48, from one markdown file.
The bigger problem was the silence. For long stretches nothing changed on the canvas, and at one point I wasn't sure it was working at all. It is the same lesson as the race. When an agent is designing, showing its work is a feature.
## Where the human stays
The visuals were closer than a 12 to 8 score makes them sound. For most sections all three tools got me to the same place, and the difference came down to the prompt. My score is one designer's taste on one brief.
It was also one run per tool. Run it again and some of those calls flip.
None of these pages ships as is. Two tools invented the same odd logo. The arrows, the shadows, the footer colors all still need a person who knows what Peeko is supposed to feel like. The agents got me a strong first draft in 11 minutes. The design is still my job.
Four finished pages in 11 minutes each. A strong first draft, not a launch.
## Who each one is for
Pick Paper if you want to watch the design happen and steer it, if you want to try many directions in parallel (it works with much cheaper models too), and if the design is headed to code.
Pick the Figma MCP server if you pay per token, or if the design lives in Figma because your team does.
Give the Figma Agent another few months. The context it can reach inside your Figma file is a real advantage. It needs to show you what it is doing.
I used to judge an AI design tool by its output. In this test the output was close. What wasn't close was how soon I could see it, and how far it was from real code. The best AI design tool is the one you can watch.
Paper
Figma MCP
