Migrating design workflows to Penpot

Penpot reached 250,000 users this month after raising $12 million in equity funding led by Decibel. This follows a $8 million Series A announced in September 2022, with participation from Athos and several high-profile angels. This user base reflects a growth rate of 500% following the Adobe acquisition of Figma. The platform has 20,000 GitHub stars and 20,000 active teams, including organizations like Mozilla, Accenture, ByteDance, IBM, Google, and Microsoft. Kaleidos, the parent company, doubled its valuation with this round. The CEO, Pablo Ruiz-Muzquiz, notes that developers outnumber designers 10 to 1, making the developer-friendly nature of the tool a priority. Last year, the company saw growth of 5,600% to 100,000 users in a couple of weeks. Because Penpot uses web standards like SVG, CSS Flexbox, and CSS Grid, the code inspection panel produces real CSS that developers copy directly into production. This alignment reduces the friction seen in traditional handoff processes. You can deploy the tool using Docker or Kubernetes to maintain control over your data. The architecture separates the frontend, which uses Nginx and ClojureScript, from the backend, which uses a JVM API server. Users also utilize an exporter running Node.js and Puppeteer for rendering. For storage, the system uses MinIO and PostgreSQL, while Valkey handles real-time notification coordination.

Design tokens and CSS-native layouts

Designers build systems using the W3C Design Tokens Community Group spec. This system handles properties like color and spacing, as well as typography. You can import existing tokens via JSON or export them to integrate with your development workflow. Penpot 2.0, which arrived in late 2024, introduced improved component management and better performance for large files. The platform supports real-time multiplayer editing so multiple designers work in the same file simultaneously. You can manage custom fonts at the team dashboard level to ensure brand consistency. The Inspect panel provides exact HTML and CSS code snippets, as well as SVG code, directly from your design files. This capability makes the handoff process much faster than tools that only provide visual measurements.

The plugin for importing Figma files converts components and text, as well as basic layouts, into Penpot formats. For one user, converting a single page of components and auto layout took 37 minutes. However, the plugin struggles with complex Auto Layout structures and advanced prototyping, which require manual reconstruction. The plugin ecosystem remains significantly smaller than Figma’s. You can use the Flex Layout tools to build responsive designs that behave exactly like they will in a browser because you manipulate properties like justify-content and align-items. This tool also allows for adding occasional contributors to a project. The interface provides a dashboard similar to Figma, which helps teams transition between platforms without extensive retraining.

Comparing Penpot and Figma costs

Figma charges per editor seat, which makes scaling expensive for large teams. For a team of twenty editors, Figma Organisation costs $10,800 per year, while the Organization tier costs $55 per editor per month. Penpot has a free tier for up to 8 members and an Unlimited plan for $7 per editor per month, with a monthly bill cap of $175. Large organizations can use the Enterprise tier for a flat fee of $950 per month.

Penpot is the best choice for teams requiring data sovereignty. Because Penpot uses CSS Flexbox and Grid for layouts, the Inspect panel produces CSS properties that match how the layout renders in the browser, which helps developers avoid the typical translation errors seen in proprietary tools. The tool tends to slow down as soon as a file becomes complex and large, which presents a problem for massive scale projects. Will the growing plugin library eventually match the maturity of Figma’s ecosystem?