Penpot

Penpot logo
An open-source design and prototyping platform with design tokens, CSS Grid layouts and a self-hosting option.

Why Penpot

Penpot is an open-source design and prototyping platform that runs in the browser. It works with web standards such as CSS, SVG and HTML, supports design tokens and flex and grid layouts, and can be self-hosted. It is built for designers, developers and teams that want an open alternative to proprietary design tools.

Best for
Design and engineering teams that want a browser-based design tool built on web standards, with an option to self-host for data control or open-source requirements.

What it does

Penpot is a design and prototyping platform that runs in the browser. You design interfaces, build components and prototypes, and share them with your team. It is open source and uses open standards: CSS, HTML, SVG and JSON, plus its own open file format.

Why you would need it

Two moments push teams towards it. The first is control: you want your design files on your own infrastructure, or your company cannot send files to a closed cloud tool. The second is the handoff gap between design and code. Penpot uses CSS Grid and Flex layouts and native design tokens, so what designers build maps closely to what developers write.

Where it fits

Penpot sits between product planning and front-end code. Designers work in it, developers inspect the output, and AI clients can read and change files through its MCP server. It is the open-source alternative to Figma and Sketch. Teams with their own platform can run it themselves.

How teams use it

A typical setup has designers building components and design tokens in Penpot, developers inspecting the standards-based output, and the design system living in shared libraries. Because the file format is open, you can process files with your own scripts and keep an export outside the tool.

Teams that self-host usually do so for data location or to meet internal security rules. The cloud version is run by Penpot, and discounts are available for non-profit, education and open-source projects.

What stands out

  • Open source with a self-hosting option, and a cloud version run by Penpot.
  • Design tokens and layouts built on CSS Grid and Flex.
  • A plugin system and an open API with access tokens and outbound webhooks.
  • An official MCP server, hosted remotely or run locally.
  • A free cloud plan with up to 8 team members and unlimited viewers.

My take

I would pick Penpot when openness matters: a company with strict data rules, an open-source project, or a team that wants to script design work through the API. The standards-based approach is a strength for design systems that need to match code.

Check how comfortable your designers are with it. Switching tools has a learning cost.

Verdict

Pick it when you need self-hosting, open standards or an open API around your design files. Skip it when your designers are happy in their current tool and no data or openness requirement forces a change.

Our full review

Notes

No notes yet.

Your note

Add your own text to this page.

Before you choose

Switching cost

Designers need time to move over, and shared libraries from another tool have to be rebuilt or imported. Run a pilot on one real project before you commit the whole team.

Read more

Plan limits on the free cloud plan

The free Professional plan has limits on team size, storage and version history, and the paid cloud plans are priced per editor or per member. Self-hosting removes the subscription but you carry the hosting and updates. A dedicated private server plan is available too.

Ecosystem size

Check that the plugins, templates and workflows you rely on exist for Penpot before you move.

Alternatives to compare

Figma has a large ecosystem and a browser-first workflow. Sketch is a native Mac tool with free viewers. Compare data control, cost and how well each handles design tokens.