Penpot

Penpot is the open-source alternative to Figma, built on web standards from the ground up. It outputs real CSS and SVG, supports CSS Grid layouts natively, and runs entirely in the browser. For teams that value open-source principles, self-hosting options, or tighter designer-developer collaboration through shared code standards, Penpot delivers a capable design platform without licensing fees.

What Penpot Does

Penpot is a web-based design and prototyping platform for creating user interfaces, design systems, and interactive prototypes. You work in a visual editor with standard design tools: vector drawing, text, shapes, components, grids, and constraints. The key differentiator is that Penpot uses CSS properties natively. Layouts are built with CSS Grid and Flexbox, not proprietary layout engines. The inspect panel gives developers ready-to-use CSS, SVG, and HTML code. Prototyping supports interactive flows with transitions and animations. Plugins extend the platform’s capabilities, and with over 30 language translations, it is one of the most internationally accessible design tools available.

Key Strengths

CSS-native layouts. Penpot uses real CSS Grid and Flexbox for layout. Designers see the same layout model developers use, which eliminates the translation gap between design and code.
Open-source and self-hostable. The entire platform is open-source under the MPL 2.0 license. You can use the hosted version, deploy it on your own servers, or run it in air-gapped environments. No vendor lock-in.
Developer-ready inspect tab. The inspect panel outputs clean CSS, SVG markup, and HTML structure. Developers copy code directly instead of interpreting design intent from visual specs.
Design tokens support. Native design token integration lets teams define and share design decisions (colors, spacing, typography) as structured data across design and code.
Components and design systems. Build reusable component libraries with variants, overrides, and shared styles. Components sync across files for consistent design system management.

Limitations to Know

Smaller ecosystem. Penpot’s plugin and community ecosystem is growing but smaller than Figma’s. Fewer third-party integrations and resources are available compared to established commercial tools.
Performance on large files. Complex files with hundreds of frames and components can feel slower than Figma, especially on lower-powered machines. The team is actively improving performance.
Learning curve from Figma. While the concepts are similar, Penpot’s interface and workflow patterns differ enough from Figma that experienced Figma users need adjustment time. The CSS-based layout model requires understanding CSS concepts.

Pricing Overview

Penpot’s core platform is free. Paid plans add team management and storage.

Free: $0. Full design and prototyping features, unlimited projects, community support, hosted on Penpot’s cloud.
Professional: Up to $175/month. Team workspaces, 25GB storage, priority support, and advanced admin controls.
Enterprise: Up to $950/month. SSO, custom deployment options, dedicated support, SLA guarantees, and compliance features.
Self-hosted: $0. Deploy on your own infrastructure with no licensing fees. You manage hosting, updates, and maintenance.

Best Use Cases

Design-to-development handoff. Teams tired of translating Figma specs into CSS will appreciate Penpot’s native code output. Developers get usable CSS without interpretation.
Open-source projects. If your project is open-source, using an open-source design tool aligns your entire stack. Contributors can access designs without commercial tool licenses.
Self-hosted enterprise design. Organizations with strict data sovereignty requirements can run Penpot on their own servers, keeping all design assets behind their firewall.
Design system management. Build and maintain component libraries with design tokens that map directly to CSS custom properties in your codebase.

How It Compares

Penpot competes most directly with Figma on features, but differs fundamentally in philosophy. It is open-source, self-hostable, and built on web standards rather than a proprietary rendering engine. For teams that need quick visual content rather than UI design, Canva is faster and simpler. If you are building websites and need wireframing acceleration, Relume handles the structural planning that precedes detailed UI work in Penpot. For image editing and photo manipulation, Photopea covers the raster editing that Penpot does not attempt. And if your project needs interactive 3D elements, Spline fills that gap as a complementary tool.

Common Questions

Is Penpot really free? Yes. The hosted version at penpot.app is fully functional at no cost. You get all design and prototyping features, unlimited projects, and cloud hosting. Paid plans add team management, storage upgrades, and enterprise features. Self-hosting is also completely free.

Can I import Figma files into Penpot? Penpot supports importing Figma files, though complex auto-layout configurations and some advanced Figma features may need manual adjustment after import. Simple to moderately complex files convert well.

How does the CSS output compare to Figma’s dev mode? Penpot’s CSS output is generally cleaner because the tool uses CSS properties natively. Layouts built with CSS Grid in Penpot produce CSS Grid code. Figma translates its proprietary auto-layout into CSS, which can result in less predictable output.

Is Penpot stable enough for production design work? Yes. Penpot has matured significantly and is used by teams at organizations of various sizes. The platform is stable for daily design work, though very large files may perform better in Figma. The monthly release cycle brings consistent improvements.