Three AI design canvases on a spectrum: Figma is canvas-led (the mature industry standard), Paper is web-native (built on real HTML/CSS), and Pencil is codebase-led (lives inside your IDE). Each represents a fundamentally different approach to the design-to-code problem. For PMs choosing between them, the real question is where on that spectrum your workflow sits. Here's a head-to-head-to-head with a winner per category.
Canvas-led. Mature design platform, massive ecosystem, cross-functional collaboration. AI via Figma Make. Best for established design orgs. From $15/editor/mo.
Web-native. Real HTML/CSS canvas, MCP agent integration, production-faithful output. Best for design-code PMs. Free (alpha).
Codebase-led. IDE-native canvas, grounded in your real components, MCP integration. Best for developer-adjacent PMs. Free (early access).
9 dimensions with a winner per category — scan the table, then dive into the pricing comparison and use-case deep dives below.
| Dimension | Figma | Paper | Pencil | Winner |
|---|---|---|---|---|
| Design approach | Canvas-led — a mature design platform with a custom rendering engine. Design first, translate to code later. | Web-native — a canvas built on real HTML/CSS. What you design is what ships, no translation gap. | Codebase-led — an IDE-native canvas grounded in your actual codebase. Design from your real components. | Depends on your workflow |
| AI integration | Figma Make — AI-powered design-to-code. Growing AI features but AI is layered on a traditional design tool. | MCP server — external AI agents (Claude, Cursor) read/write to the canvas. Agentic design-to-code loop. | MCP server — AI coding agents (Cursor, VS Code) connect to the canvas using your codebase as context. | Paper / Pencil (agentic) |
| Production fidelity | Approximation — Figma's custom renderer approximates web layout. Requires translation to real code. | Exact — the canvas is real HTML/CSS. What you see is what a browser renders. No translation needed. | Exact — designs use your real components and tokens. What you design is built from production code. | Paper / Pencil |
| Ecosystem & maturity | Massive — thousands of plugins, templates, community files, integrations. The industry standard with deep talent pool. | Emerging — open alpha. Small but growing ecosystem. MCP approach is future-facing but early. | Emerging — early access. Recently rebranded (Pencil.dev → pen.dev). Small ecosystem, narrow audience. | Figma |
| Collaboration for non-designers | Excellent — shareable links, real-time multi-user editing, commenting, dev mode for handoff. Built for cross-functional teams. | Good — shareable via URL, viewable in any browser. Real-time collaboration still developing in alpha. | Limited — lives in the IDE. Non-developers can't easily view or comment. Not built for stakeholder review. | Figma |
| Starting price (paid) | $15/editor/mo (Professional) — per-seat pricing for teams. Free tier for individuals (3 files, 3 pages). | Free (open alpha) — full access including web canvas, desktop app, and MCP server. Pricing TBD post-alpha. | Free (early access) — full access including canvas, MCP server, and IDE extensions. Pricing TBD. | Paper / Pencil (free now) |
| Best for PMs who… | Work in established design organizations with design systems, cross-functional teams, and need governed collaboration. | Prototype UI at the intersection of design and code, want production-faithful output, and work with AI agents. | Work alongside developers in Cursor/VS Code, have established component libraries, and want design coupled to code. | Depends on your role |
| Learning curve for PMs | Moderate — widely documented, many tutorials, most designers know it. PMs can learn basics quickly. | Moderate — web-native canvas is intuitive if you understand HTML/CSS. MCP setup requires technical knowledge. | Steep — requires IDE proficiency (Cursor/VS Code), MCP configuration, and comfort with developer workflows. | Figma |
| Design-to-code workflow | Export-based — use Dev Mode, plugins, or Figma Make to translate designs to code. Translation gap is inherent. | Continuous loop — MCP lets AI agents sync design tokens and components between canvas and codebase bidirectionally. | Native — designs are already code. The canvas reads from your codebase, so design-to-code is inherent, not translated. | Pencil (native) / Paper (loop) |
Figma wins on ecosystem, collaboration, and accessibility. Paper and Pencil win on production fidelity, AI integration, and design-to-code workflow. The right choice depends on where your workflow sits on the canvas-led → web-native → codebase-led spectrum.
A side-by-side breakdown — Figma has established pricing; Paper and Pencil are free during alpha/early access with pricing TBD.
| Plan | Figma | Paper | Pencil |
|---|---|---|---|
| Free | 3 files, 3 pages per team. Individual use only. | Full access (open alpha) — canvas, desktop app, MCP server | Full access (early access) — canvas, MCP server, IDE extensions |
| Entry paid | $15/editor/mo (Professional) — unlimited files, collaboration | TBD — pricing to be introduced post-alpha | TBD — pricing to be introduced post-early-access |
| Organization | $45/editor/mo (Org) — design systems, SSO, governance | TBD | TBD |
| Enterprise | $75/editor/mo (Enterprise) — security, compliance, dedicated support | TBD | TBD |
| Pricing model | Per-editor — scales with team size. Non-editors (viewers) are free. | TBD — likely per-seat or per-project | TBD — likely per-seat or per-project |
Key insight: Paper and Pencil are free now but pricing is uncertain. Figma has predictable, established pricing ($15-$75/editor/mo). For PMs who need budget predictability, Figma is the safer choice. For PMs who want to experiment with next-gen design tools, the free periods for Paper and Pencil are a genuine opportunity. See our free AI tools guide.
5 vetted AI tools for B2B SaaS product managers, delivered to your inbox each weekday morning. No spam, no sponsorships, unsubscribe anytime.
50+ AI tools categorized by PM use case — prototyping, evaluation, research, analytics, roadmapping, and more. Each with a one-sentence description, a why-it-matters-for-PMs line, and a link. Free PDF, no credit card required.
These canvases help you design. Signal Brief helps you discover the next AI design tool worth trying. 7-day free trial, then $10/mo or $96/yr. Cancel anytime. See a sample issue first.
No credit card for the first 7 days. Cancel anytime.
It depends on your workflow and technical comfort. Figma is best for PMs in established design organizations who need cross-functional collaboration, a mature ecosystem, and governed design systems. Paper is best for technically-inclined PMs who want production-faithful design (real HTML/CSS) and an MCP-connected agentic workflow. Pencil is best for PMs who work alongside developers in Cursor/VS Code and want design tightly coupled to their codebase. For most PMs today, Figma remains the safest choice; Paper and Pencil are worth evaluating if you work at the design-code intersection. See our Paper.design review and Pencil.dev review.
Paper is built on real HTML and CSS — the canvas renders actual web code, so what you design is what a browser will show. Figma uses a custom rendering engine that approximates web layout but requires translation to code. Paper also offers an MCP server that lets AI agents (Claude, Cursor) read and write to the canvas, creating a bidirectional design-to-code loop. Figma's advantages are maturity, ecosystem, collaboration, and Figma Make (AI design-to-code). Paper's advantages are production fidelity and agentic workflows. See our Paper.design review.
Pencil lives inside your IDE (Cursor, VS Code) and grounds designs in your actual codebase — real components, tokens, and styles. Figma is a standalone design platform with its own rendering engine. Pencil's advantage is codebase coupling: designs use your real code, so there's no design-to-code translation. Figma's advantage is that it's accessible to non-developers, has a massive ecosystem, and supports cross-functional collaboration. Pencil is for developer-adjacent PMs; Figma is for everyone. See our Pencil.dev review.
Yes, both are currently free. Paper is in open alpha — full access to the web canvas, desktop app, and MCP server at no cost, with pricing to be introduced later. Pencil (pen.dev) is in early access — full access to the canvas, MCP server, and IDE extensions at no cost, with pricing TBD. Figma has a free tier (3 files, 3 pages) but charges $15/editor/mo for Professional. For PMs evaluating all three, the free periods for Paper and Pencil are a genuine opportunity to test them alongside Figma. See our free AI tools guide.
MCP (Model Context Protocol) is a standard that lets AI agents connect to external tools. Both Paper and Pencil offer MCP servers that let AI coding agents (Claude, Cursor, Windsurf) read from and write to the design canvas. In Paper, this creates a loop between the web-native canvas and your codebase. In Pencil, the canvas is already grounded in your codebase, so MCP lets agents iterate on designs using your real code as context. Figma doesn't currently offer MCP connectivity — its AI integration is through Figma Make and plugins.
Not yet, unless you have a specific reason. Figma's ecosystem, collaboration features, and maturity make it the safer choice for most teams. Paper and Pencil are innovative but in alpha/early access — features may change, pricing is unknown, and collaboration features are still developing. The right approach is to evaluate Paper or Pencil alongside Figma (both are free right now) for specific workflows where production fidelity or codebase coupling matters. If your evaluation shows clear value, adopt for those workflows while keeping Figma for broader team collaboration. See our AI prototyping tools guide.
They're different tools. Figma, Paper, and Pencil help you design and prototype UI. Signal Brief helps you discover the AI tools worth designing with — 5 new AI tools every weekday morning with a PM-specific lens. Many subscribers use Signal Brief to discover new AI design tools, canvas tools, and prototyping platforms, then evaluate them alongside Figma, Paper, or Pencil. See our sample issue and AI design tools guide.
5 new AI tools every weekday morning. 7-day free trial, then $10/month or $96/year. Cancel anytime. No sponsorships, ever.
Questions? Email [email protected]