Penpot: the open-source alternative to Figma for design teams

What is it and why does it exist?

Penpot presents itself as “the open-source design platform for teams that need scalable collaboration”. Its central promise is that the team’s design and code are not tied to a vendor: the pricing page talks about “no vendor lock-in” and says the team owns its designs and its code. The official GitHub repository publishes it under Mozilla’s MPL 2.0 license.

That difference matters to organizations with data requirements, to educational teams and to projects that want to contribute to the tool’s code. For an individual designer, the most visible difference is that the tool can be installed and modified.

Someone coming from Figma will find similar concepts, but it is worth noting the equivalences (panels, shortcuts, functions) and testing a complete component, with variants and states, before migrating a real project.

What does it offer today?

According to the official site and the help center:

• Wireframes, interactive prototypes and layouts with CSS Grid and Flex. Flex Layout is built on Flexbox and Grid Layout on CSS Grid, so what you design follows the layout model of the web. In Grid, rows and columns accept fr, auto and pixel units, and cells can be merged into areas.
• Components, design tokens and shared libraries. These are the pieces a design system needs to stay consistent.
• Native tokens. The documentation says Penpot tokens follow the draft Design Tokens Format Module from the W3C Design Tokens Community Group. Types include color, dimension, spacing, border radius, opacity, shadow and typography; tokens can reference other tokens (aliases) and are imported or exported as JSON, ZIP or folders.
• Code aligned with the design. The site talks about inspecting and integrating code that matches the design, and mentions open standards such as CSS, HTML, SVG and JSON.
• Plugins and an MCP server. The help center has sections on plugins and on an MCP server that connects a compatible AI client (for example Cursor or Claude Code) to your Penpot files. The documentation warns that the client can run write operations on the open page, and recommends starting with read-only prompts.

If your team already works with tokens, the token architecture defines which names to use, and that applies in Penpot just as it does in other tools. For another way to manage tokens, see Tokens Studio.

How much does it cost?

The Penpot pricing page, consulted on November 6, 2026, shows these plans in US dollars:

Unlimited and Enterprise offer a 14-day free trial. There are discounts for non-profit, educational and open-source organizations, on application. Limits on members, storage, version history and file recovery appear in the comparison table on the same page; check it before choosing, because it often matters more than the price.

Prices change: confirm them on the official page the day you decide.

What about hosting it on my own server?

Penpot offers self-hosting. The help center’s technical guide describes installation with Docker, with Kubernetes and with Elestio, plus a section of configuration options. It is useful when design files cannot leave the organization’s infrastructure, for example because of internal policy or regulatory requirements.

The cost is no longer the licence but maintenance: updates, backups and availability become the responsibility of the team that hosts it. For a team without infrastructure staff, self-hosting is not an automatic advantage.

When does it make sense, and when not?

Penpot makes sense when:

• you need design data to stay in your own infrastructure;
• the budget is limited and paid plans do not fit;
• you want to contribute to or adapt the tool;
• your team works with tokens and components and values open formats.

It is not a good fit when:

• your team already has years of Figma libraries and plugins that cannot be migrated without cost;
• nobody maintains a server of your own and you do not want to depend on the vendor’s hosting;
• you need a specific integration that exists only in another tool.

To compare with other options, use Figma as the reference for the category, and Webflow or Framer if your goal is to publish a site rather than a prototype.

Example

Illustrative example: a team at a public institution needs to design an application form for government procedures, but its guidelines do not allow design files to be stored outside its own server. It installs Penpot on its infrastructure and creates a library of components and tokens for fields and error messages. Designers test the flow with two people from the community and check the contrast of the error states. Because the team does not depend on external plugins, the migration costs nothing. Had it had a large library in another tool, the decision would have been different.

For your team: review which plugins and libraries you use today. If you depend on many, try Penpot on a small project before migrating.

Common mistakes

• Choosing by price without checking that the tool covers your workflow.
• Self-hosting without a maintenance plan: backups, updates and access.
• Migrating everything at once instead of trying one project.
• Ignoring tokens and components and drawing loose screens.
• Assuming it works like Figma for plugins and integrations.
• Letting an AI client write to the file without starting with read-only tests.

Sources

• Penpot, official site: description, CSS Grid and Flex, components, tokens and code.
• Penpot Pricing, official page: plans, prices in US dollars, discounts and free trial.
• Penpot on GitHub: MPL 2.0 license.
• Penpot Help Center: Flexible Layouts: Flex Layout on Flexbox and Grid Layout on CSS Grid.
• Penpot Help Center: Design tokens: token types, aliases, W3C format and import and export.
• Penpot Help Center: MCP server: MCP server, requirements and write warning.
• Penpot Help Center: Technical guide: installation with Docker, Kubernetes and Elestio.