The competitive dimensions of design tools have changed: Some rent canvases, some turn canvases into code

Have you ever seen a symphony orchestra that only reads the score and never rehearses before going on stage?

The current design tool ecosystem is exactly like this—designers finish the 'score' in Figma, and developers have to 'rehearse' it again: measure spacing, guess corner radii, align pixels. An 8px corner radius can escalate to a meeting called by the product manager, and a 16px spacing can cause the frontend to refactor components.

This is not anyone's fault; it's the tool's fault. What's missing between design drafts and code is not more precise annotations, but a homologous language.

A paradigm shift from 'translation' to 'direct output'

Penpot has done something no other tool has: the design draft directly is CSS Grid and Flex layout.

Not 'similar', not 'close', but native. The layout you drag in Penpot is CSS Grid under the hood; the flexible container you create is Flexbox. When a developer clicks 'Inspect Mode', they don't get an image that needs translation, but CSS code that can be directly pasted into the project.

What does this mean? What designers draw behaves exactly like a real web page—responsive, flexible, breakpoints are all determined during the design phase. There is no need for the 'design-implementation inconsistency' step, because the design draft itself is the implementation.

Penpot's user count surged from 250,000 in early 2023 to 1.5 million in early 2026, a 6-fold increase in 3 years. With 55,172 stars on GitHub, 330 contributors, and 125 commits per week—this is not a 'toy project', it is a rapidly evolving infrastructure.

Not just an 'open source Figma'—three unique weapons

Weapon 1: Design Tokens—the 'constitution' of the design system

Figma also has variables, but Penpot's Design Tokens are native-level. Define primary colors, fonts, button styles once, and sync across the entire project. When a designer changes a token value, all pages and code update simultaneously—not 'suggested update', but forced sync. This upgrades the design system from 'documentation convention' to 'code constraint'.

Weapon 2: MCP protocol—AI directly participates in design

This is the most underrated capability. Through MCP (Model Context Protocol) server, Penpot allows AI assistants to directly read and write design drafts. You can have AI generate layouts, auto-adjust spacing, or even reverse-convert a piece of HTML code into a design draft. The relationship between design and AI is no longer 'copy-paste prompt', but bidirectional real-time collaboration.

Weapon 3: Self-hosting—data sovereignty belongs to you

Figma's data is on Figma's servers. When the news of Adobe acquiring Figma broke, how many teams studied migration plans overnight? Penpot supports one-click Docker deployment to your own server, with data fully under your control. For industries with strict compliance requirements like finance, healthcare, and government, this is not a 'bonus', but an entry condition.

Cost awareness: 55K stars does not mean no pitfalls

Large projects lag. On the Penpot community forum, 'Performance issues with self-hosted Penpot on big projects' is a frequent post. With more components and complex pages, the UI starts dropping frames. Some report 'importing reference images lags so much it becomes unusable', 'components cannot auto-update'. Clojure, as the main language (74.5% of code base), is directly challenged on HN: 'ClojureScript may be the least efficient of all languages compiled to JS; no matter how optimized, it can't catch up to Figma's C++ engine.'

Self-hosted version is behind. GitHub Issue #5500 clearly states that the Docker image for self-hosted version is updated nearly a month later than the cloud version. If you choose self-hosting, you have to accept delays in new features and bug fixes—unless you build the container image yourself.

Plugin ecosystem gap. Figma has thousands of plugins, from auto-annotation to design system management to accessibility checks. Penpot's plugin system is just starting. If you are a 'heavy plugin user', migrating will cause a noticeable functional gap.

No FigJam. Figma's whiteboard tool FigJam is very useful for brainstorming. Penpot currently has no equivalent product. For the early stages of the design process—user research, information architecture, process mapping—you'll still need other tools.

Competitive product comparison: Who should use what in which scenario

One-sentence selection guide: small team + code direct output + limited budget → Penpot; large team + plugin dependency + don't care about monthly fee → Figma; macOS native + no collaboration → Sketch; individual + occasional design + need free → Lunacy.

Self-hosted deployment configuration reference

⚠️ Note: First deployment requires access to raw.githubusercontent.com to pull configurations. If your server is in an internal network/without internet, you need to download configuration files and Docker images in advance for offline deployment. Some in the community have already stepped into this pitfall.

Trend judgment: The next competitive dimension of design tools

Figma wins on performance with its C++ engine, and on functional breadth with its plugin ecosystem. But Penpot targets another dimension: zero-loss conversion from design to code.

When AI can directly manipulate design drafts via MCP protocol, when Design Tokens turn design systems into code-level constraints, when CSS Grid makes design drafts and web behavior completely consistent—the wall between 'design draft' and 'code' is being dismantled from the root.

This is not a story of 'open source replacing closed source'; it's a story of design tools evolving from 'canvas' to 'compiler'. A canvas can only be seen, a compiler can run.

Penpot is not perfect—performance, plugins, version lag are real costs. But 55K stars and 1.5 million users show one thing: enough people are willing to trade 'not yet perfect' for 'no longer being held hostage'.

Project address: https://github.com/penpot/penpot