Table of contents:
- What are Paper and Figma Make?
- Why this comparison matters now
- Test 1: Building a 404 page
- Test 2: Translating a Storybook component library
- How to start using Paper in your workflow
- Tools and resources
What are Paper and Figma Make?
Figma Make is Figma's built-in AI generation feature. You describe what you want, it generates design variations inside your existing Figma file. It's fast, it lives where designers already work, and it requires zero setup beyond having a Figma account.
Paper is a newer design tool where everything you create is actual HTML and CSS — not a proprietary format. It looks and feels like a design tool (auto layout, frames, familiar shortcuts), but under the hood it's building real code. It also has its own MCP server, which means AI agents like Claude Code can read from and write to the canvas directly.
The fundamental difference: Figma Make generates design assets. Paper generates working code that happens to look like a design tool.
Paper vs Figma Make
Figma Make operates within Figma's existing paradigm — proprietary file format, AI bolt-on, export-then-build. Paper flips that model. Since your design is the code, there's no conversion step. You design a component, and it's already Tailwind CSS you can drop into your repo.
Paper vs traditional design-to-code tools
Tools like TeleportHQ or Figma's Dev Mode still treat design and code as separate artifacts that need translation. Paper eliminates that gap entirely. The tradeoff is that Paper is still in open alpha, so it doesn't have the ecosystem maturity of Figma — no components system yet, fewer plugins, smaller community.
Why this comparison matters now
The design-to-code handoff has been broken for years. Designers create pixel-perfect mockups in Figma, developers rebuild them from scratch in code, and everyone pretends the Figma Dev Mode specs are actually useful. We've been doing this dance at TDP with B2B SaaS clients, and the gap between "designed" and "shipped" keeps eating weeks off every sprint.
AI tools are supposed to fix this. But not all AI design tools solve the same problem. Figma Make tries to speed up the design side. Paper tries to eliminate the handoff altogether. That's a fundamentally different bet, and it matters if you're deciding where to invest your workflow.
If Paper delivers on its promise, teams that adopt it early get:
- Faster shipping cycles. No handoff means no handoff delays. The design is the front-end code.
- Designers who understand implementation. Working in code (even visually) builds intuition for how things actually render.
- AI agents that can actually help. Because Paper speaks HTML/CSS, AI tools like Claude Code can read, modify, and extend your designs without any translation layer.
Test 1: Building a 404 page
We used cal.com, an open-source scheduling platform, as our testing ground. The task was simple: design three versions of a 404 page — minimal, playful, and split layout — using the same prompt, design tokens, and reference images in both tools.
Figma Make results
Figma Make finished first. It was noticeably faster. But when we looked at the output, all three versions were essentially identical. The prompt specifically asked for three distinct styles — minimal, playful, and split — and Figma Make ignored that entirely. It didn't incorporate the reference images we attached, and the layouts were generic.
Paper results
Paper took longer, and you could watch it work in real time — creating artboards, placing elements, building each variation. But the output was dramatically better. Each version was distinct: one had a progress bar, another had more playful copy, and the split view actually used the reference images we provided.
The real difference showed up in what happened next. We picked the split-view design and asked Claude Code to build it as the actual 404 page in the cal.com codebase. Because Paper's output is already HTML and Tailwind CSS, the translation was nearly one-to-one. Claude Code even pulled in the existing page logic, asked whether to keep the smart URL detection, and checked what the CTA buttons should do.
That kind of context-aware implementation doesn't happen when you're exporting a Figma frame as a PNG and rebuilding it from scratch.
Test 2: Translating a Storybook component library
The second test addressed a pain point we've seen repeatedly: teams that have a component library in Storybook (built in code) but no matching design system in their design tool. Historically, there hasn't been a good way to reverse-engineer Storybook components into usable design assets.
Figma approach
We connected Figma's MCP, pointed it at a button component in Storybook with multiple variants (secondary, icon, base, destructive), and asked it to build out all colors, sizes, and variants in Figma. It created the components, but each variant ended up on its own separate page. The result was functional but disorganized — you'd need to spend significant time restructuring it into a usable component library.
Paper approach
Same prompt, same Storybook source. Paper built everything at once — sizing section, color section, variant section — all organized on a single canvas in a way that actually looks like a component library. The states were clearly defined, laid out in a design-friendly format, and immediately usable for reference.
Paper doesn't have a full components system yet (it's on their roadmap), but even without it, the output was closer to what a designer actually needs than what Figma produced.
How to start using Paper in your workflow
Paper is still in open alpha, so this isn't a "migrate everything tomorrow" recommendation. But if you want to test whether it fits your team, here's how we'd approach it.
1. Pick a contained project
Don't start with your entire design system. Pick something self-contained — a landing page, a 404 page, an onboarding flow. Something with a clear scope and a fast feedback loop.
2. Set up the Paper MCP with Claude Code
Paper's MCP server is what makes the AI workflow click. Connect it to Claude Code so you can prompt against your Paper files directly from the terminal. If you're not familiar with the terminal setup, Paper has onboarding docs, and TDP has a walkthrough video on environment setup.
3. Use planning mode before building
One thing we've learned: don't let Claude Code build on the first prompt. Use planning mode to go back and forth on the approach before any code gets written. The more detailed your plan, the closer the output matches what you're asking for. This applies to any AI coding workflow, but it's especially impactful with Paper because the design is the implementation.
4. Iterate visually, ship in code
Design in Paper's visual canvas, then use the MCP to push changes into your actual repo. The loop is: design visually, review the generated code, refine in Paper, push to codebase. Since everything is Tailwind CSS, you're not context-switching between design language and code language.
5. Explore Paper's AI-native features
Paper has built-in features that think like a designer — text orphan control, text balancing, filters and animation effects. These are small touches, but they signal that the tool is being built by people who understand design craft, not just code output.
Tools and resources
- Paper — Free tier includes 100 MCP tool calls per week. Pro is $20/month with 1M MCP calls.
- Figma Make — Built into Figma. Worth using for quick ideation inside existing Figma workflows.
- Claude Code — The AI coding tool that connects to Paper's MCP for the design-to-code workflow described above.
- Storybook — If you're testing the component library translation workflow, you'll need your components running in Storybook.
If your team is spending more time translating designs into code than actually building product, that's the exact problem we solve at TDP. We take Figma designs (or now, Paper designs) and turn them into production-ready front-end code for B2B SaaS teams. [INTERNAL LINK: TDP services page]
Start experimenting
Paper is early, but the direction is clear: design tools that output real code are going to replace the design-then-rebuild workflow. The teams that figure out this loop now — design visually, build in code, ship with AI — will have a meaningful speed advantage in 12 months.
If you're a product team looking to implement AI into your design-to-code process, we're running workshops where we take your actual designs and build them in code with your engineers. Sign up here! https://tally.so/r/WOPNPP
