Figma vs Penpot
Figma and Penpot are direct design-tool rivals — Penpot is the open-source, self-hostable alternative to Figma — and both ship an official MCP server that connects an agent to a live design file for design-to-code and programmatic edits. Figma's server is the polished, batteries-included option: it returns structured design context for a selection (React + Tailwind by default), reads exact variables, styles, and Code Connect mappings, captures screenshots, and can write back to the canvas, generate FigJam diagrams, or send live UI from a running app into Figma. Penpot's server takes a leaner, code-first approach: a compact tool set gives a high-level overview of the file, surfaces the plugin API, and exposes an execute_code escape hatch that runs JavaScript against the file through the plugin — the primitive that makes querying, transforming, and creating elements possible — plus shape export and image import. Both let an agent turn a mock into matching code, but the contrast is curated tools versus an open, scriptable API. Here is how they compare.
How they compare
| Dimension | Figma | Penpot |
|---|---|---|
| Openness | Proprietary, cloud-first (with a Dev Mode desktop server); Figma's official server is the polished first-party option. | Open-source and self-hostable: the official server for the open-source Penpot platform, run against your own instance or Penpot's hosted offering. |
| Design-to-code model | Purpose-built tools: get_design_context returns React + Tailwind by default, with variables, styles, Code Connect mappings, and screenshots for layout fidelity. | Code-first: high_level_overview orients the agent, penpot_api_info surfaces the plugin API, and execute_code runs JavaScript against the file — the agent composes its own queries and transforms. |
| Write-back | Rich: create files, generate FigJam diagrams from Mermaid or text, push live UI from a running web app into Figma, upload assets, and edit objects directly. | Through execute_code (create and transform elements via the plugin API), plus export_shape to render a shape to an image and import_image to bring images in. |
| Deployment and connection | Hosted remote at mcp.figma.com/mcp over OAuth, plus a Dev Mode desktop server at 127.0.0.1:3845/mcp for the file open in the desktop app. | Recommended hosted remote endpoint with an MCP key, or local mode via npx (@penpot/mcp); either way you connect the Penpot plugin in the file over WebSocket, active in one browser tab at a time. |
| Best-fit task | Teams on Figma that want turnkey design-to-code with first-class design-system reads and broad write-back capabilities. | Teams that want an open-source, self-hostable design tool and are comfortable driving it through a scriptable plugin-API escape hatch. |
Verdict
Both servers connect an agent to a live design file for code generation and edits, so choose on openness and how you want the agent to work. Pick Figma when you want a polished, turnkey design-to-code experience: React + Tailwind context out of the box, first-class design-system variables and Code Connect mappings, and broad write-back including pushing live app UI into the canvas. Pick Penpot when open-source and self-hosting matter, and when you are happy to let the agent drive a scriptable plugin API — its execute_code tool is a powerful escape hatch for querying and transforming the file, paired with a compact overview and import/export tools. Figma is curated and feature-rich; Penpot is open and programmable.
FAQ
- Is Penpot really a Figma alternative?
- Yes — Penpot is the open-source, self-hostable design and prototyping platform positioned against Figma. Its MCP server connects an agent to a live Penpot file for the same design-to-code and programmatic-edit goals, just through a more code-first tool set.
- How does Penpot let the agent make arbitrary changes?
- Through execute_code, which runs JavaScript against the file via the Penpot plugin API. That escape hatch lets the agent query, transform, and create elements. Figma instead exposes purpose-built tools for reading context and writing objects.