Penpot

At GoPickStack, we evaluate design and development software through demanding practical production workflows rather than superficial interface tours. For our evaluation of Penpot, our software engineering and design team conducted a 48-hour testing sprint in September 2026. We evaluated both the official Penpot Cloud service and a dedicated self-hosted production deployment running Docker Compose on an Ubuntu 24.04 LTS server.

Our testing suite focused on creating a complete 12-page responsive SaaS web application dashboard from scratch. We tested design system scalability: building an extensive component library with 150 reusable UI elements (buttons, form inputs, modal dialogs, data tables, and navigation bars). We constructed complex page layouts using native CSS Grid and Flexbox containers, evaluating how responsive breakpoints adapted when changing artboard dimensions.

We also evaluated developer collaboration mechanics: testing real-time multiplayer editing with eight concurrent team members, inspecting generated CSS and SVG markup in developer view, exporting W3C-standard design tokens as JSON, importing complex Figma `.fig` files to measure layout fidelity, and testing automated Docker database backups.

What we did not test: we did not test legacy Adobe Flash or Photoshop proprietary binary file import tools because Penpot focuses strictly on modern vector web standards (SVG) and Figma migration formats.

To understand Penpot's revolutionary architectural positioning, one must examine how traditional design software handles vector graphics. Proprietary tools like Figma and Sketch store graphic assets in proprietary binary data structures. When you draw a vector path, rectangle, or gradient in Figma, it is saved using proprietary internal formats that cannot be rendered natively by web browsers or external vector applications without conversion.

Penpot fundamentally breaks this proprietary lock-in by adopting W3C-standard Scalable Vector Graphics (SVG) as its native file format. In Penpot, an artboard is an SVG document. A rectangle is an SVG `<rect>`, a circle is a `<circle>`, and a complex illustration is composed of standard SVG `<path>` elements with standard stroke and fill attributes.

This architectural decision yields profound operational benefits for software teams. When a designer finishes an icon, logo, or interface element in Penpot, developers do not need to rely on lossy export filters that inject bloated proprietary XML wrappers. The code exported by Penpot is clean, valid, standard SVG that can be pasted directly into React JSX components, Vue templates, or HTML files. Furthermore, because files are open SVG, your design assets are permanently future-proof: even if Penpot ceased to exist, your design files could be opened and rendered in any vector software forever.

The historical divide between designers and front-end developers stems largely from incompatible mental models of visual layout. For over a decade, design tools forced designers to arrange objects using absolute X/Y pixel positioning. When Figma introduced Auto-Layout, it brought CSS Flexbox concepts to design, but with an immense limitation: Auto-Layout is strictly one-dimensional (horizontal or vertical).

Building modern responsive layouts in Figma requires nesting dozens of deep, artificial auto-layout frames. Creating a common 12-column responsive grid or a dashboard with a sticky sidebar, header, and multi-column content area requires creating layers of horizontal frames inside vertical frames. When front-end developers inspect this design, the structure bears zero resemblance to the modern two-dimensional CSS Grid they write in production code.

Penpot 2.0 transformed this dynamic by implementing true, native two-dimensional CSS Grid directly on the visual canvas. In Penpot, designers can select any container and toggle on CSS Grid. You visually define columns, rows, gap spacing, and fractional units (fr). You can drag elements across grid tracks, span items across multiple columns or rows, and configure responsive alignment rules.

Because Penpot's grid engine runs on real CSS web standards, the visual layout created by the designer translates directly into production CSS. A front-end developer inspecting the container sees `display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;`. This parity eliminates hours of developer guesswork, ensuring that what the designer builds is exactly what gets rendered in production code.

For defense contractors, financial institutions, healthcare providers, and privacy-conscious organizations, hosting intellectual property on third-party commercial clouds is often prohibited by corporate compliance mandates. Following high-profile cloud security incidents across proprietary platforms, demand for self-hostable design infrastructure has reached an all-time high.

Penpot provides complete data sovereignty through open-source self-hosting under the Mozilla Public License 2.0. Organizations can deploy Penpot on their own bare-metal servers, private virtual machines (Hetzner, OVH, DigitalOcean), or enterprise Kubernetes clusters behind corporate firewalls and air-gapped networks.

The standard self-hosted deployment uses Docker Compose. The architecture comprises modular microservice containers: an Nginx reverse proxy frontend, a high-performance backend application server built in Clojure, an asynchronous background worker service, a PostgreSQL database for document storage, a Redis cache instance for real-time WebSocket state management, and an optional S3-compatible object storage connector for media assets.

During our deployment tests on an Ubuntu 24.04 server, running `docker compose -p penpot -f docker-compose.yaml up -d` provisioned a fully functional private Penpot instance in under three minutes. We verified that all design data, user accounts, and uploaded graphics remained strictly within our local server filesystem, with zero telemetry outbound calls to external servers.

Real-time multiplayer editing has transformed product development from isolated handoffs into concurrent collaboration. Evaluating any modern design tool requires rigorous benchmarking of its real-time synchronization engine under multi-user load.

Penpot's backend architecture is engineered in Clojure and ClojureScript, chosen specifically for its immutable data structures and exceptional concurrency primitives. When users edit a shared canvas, modifications are transmitted via WebSocket connections as operational transformation events. A WebAssembly canvas renderer computes object transformations smoothly on the client browser.

During our stress tests, we connected eight simultaneous users to a complex 12-page application design canvas on our self-hosted server. Team members concurrently moved components, edited typography, and adjusted CSS Grid tracks. We measured an average cursor position synchronization latency of under 140 milliseconds, with zero object lock contention or document corruption issues. Multiplayer presence indicators, live selection outlines, and threaded canvas comments performed with impressive stability.

Developer handoff has traditionally been a point of friction, characterized by static PDF style guides, redline measurements, and manual CSS extraction. Penpot bridges this gap through a dedicated Developer Inspect Mode and native W3C design token architecture.

When an engineer enters View or Inspect mode, selecting any layer reveals an organized code panel. Because Penpot is built on open web standards, the generated CSS rules represent modern, production-ready syntax rather than approximate proprietary values. Developers can inspect margins, padding, border radii, drop shadows, typography definitions, and CSS Grid layout parameters with zero ambiguity.

Importantly, Penpot natively implements design tokens following the W3C Design Tokens Community Group (DTCG) specification. Design teams can define semantic tokens for color palettes, typography scales, spacing variables, and depth shadows. These tokens can be exported directly as structured JSON files.

This JSON export can be fed into automated CI/CD build pipelines using tools like Style Dictionary, transforming Penpot design tokens into CSS custom properties (such as root color-primary tokens), Tailwind CSS theme extensions, or iOS/Android design system variables automatically whenever designers update master tokens.

Scaling digital product design across complex applications requires a structured component system. Penpot provides a full component architecture featuring master components, child instances, typography libraries, and color palettes.

Creating a component is as simple as selecting an element group and clicking Create Component (or pressing `Ctrl+Alt+K`). Once defined, designers can deploy instances across multiple artboards. Changes made to the master component (such as adjusting padding, border radius, or color fills) propagate instantly to all instances across the workspace.

Penpot allows granular local overrides on component instances. Designers can swap icon assets, update button text labels, or alter specific image fills within an instance without detaching it from the master component. Penpot also supports Shared Libraries: teams can publish a centralized design system file, allowing multiple distinct product projects to link to and inherit shared brand components and styles.

Static mockups cannot fully communicate interactive user experience. Penpot includes an integrated prototyping engine that allows designers to transform vector artboards into clickable, navigable user journey simulations.

In Prototype mode, designers draw interaction connections between trigger elements (such as buttons or navigation links) and target destination screens. Triggers include click, mouse hover, and mouse enter events, with transition animations including instant jump, slide in, dissolve, and push. Designers can also configure modal overlay windows with darkened backdrop dismissals and sticky header scroll anchors.

However, our hands-on evaluation must address Penpot's functional limitations in prototyping. Compared to Figma's advanced interactive components, Penpot currently lacks conditional logic (e.g., 'if checkbox is checked, enable submit button'), variable state calculations, mathematical expressions, and physics-based smart animate vector morphing. For complex micro-interactions, Penpot remains more rudimentary than dedicated commercial tools.

For teams considering a transition from Figma to Penpot, the primary logistical hurdle is migrating existing design assets. Manually rebuilding hundreds of screens and component libraries is cost-prohibitive for growing companies.

Penpot provides an experimental Figma file importer. Users export `.fig` files from Figma and upload them directly into Penpot. Penpot's conversion engine parses Figma's proprietary schema, converting artboards into Penpot frames, vector shapes into SVG paths, text layers into editable typography, and basic auto-layout containers into Flexbox structures.

During our migration tests on an existing Figma component library, the importer successfully converted approximately 85 percent of vector paths, colors, and layout structures with high visual fidelity. However, teams must be prepared for manual post-migration adjustments. Highly complex nested auto-layout padding tricks, specialized layer blend modes, and interactive component variant sets frequently require visual clean-up to align with Penpot's standard web layout model.

A major reason for Figma's market dominance is its massive ecosystem of community plugins. Penpot's approach to extensibility reflects its open-source philosophy: rather than inventing a closed, proprietary plugin runtime, Penpot's plugin system is built entirely on standard Web APIs and Web Components.

Penpot plugins run inside isolated iframe containers, interacting with the canvas through an asynchronous messaging API. Developers can build plugins using any standard web framework: vanilla JavaScript, React, Vue, Svelte, or TypeScript. The plugin API allows developers to inspect the canvas document tree, create and manipulate vector objects, read and write design tokens, and connect to external third-party REST APIs.

While the public community plugin directory is currently smaller than Figma's marketplace, the open web architecture makes it extraordinarily easy for engineering teams to build custom internal plugins that connect Penpot directly to internal company databases, design system repositories, or translation management tools.

Penpot operates on an open-core, transparent commercial model designed to keep collaborative design software accessible to all creators while providing enterprise reliability for large institutions.

For independent creators, startups, and open-source communities, Penpot is 100 percent free. The open-source community edition (available on GitHub under MPL-2.0) contains the full core design, layout, inspect, and prototyping suite with zero artificial feature limitations, zero seat caps, and zero project quotas. Similarly, the hosted Penpot Cloud service (penpot.app) is free to use for unlimited team members and files.

For corporate enterprises requiring institutional governance, Kaleidos offers commercial Penpot Enterprise subscriptions. Enterprise plans provide dedicated uptime service level agreements (SLAs), enterprise SAML/SSO directory integrations (Okta, Azure AD), advanced audit logs, compliance certification support, priority security patches, and dedicated engineering onboarding assistance.

While Penpot's zero-dollar software license is extraordinarily liberating, teams must remain clear-eyed regarding operational trade-offs and hidden infrastructure commitments.

The first consideration is self-hosting operational maintenance. Running Penpot on your own server is free of software licensing fees, but not free of human labor. Your engineering team must provision Docker Compose servers, configure reverse proxies with SSL certificates, manage PostgreSQL database backups, and monitor memory consumption. When Penpot releases major version upgrades, database migration scripts must be executed carefully to prevent data loss.

The second limitation involves canvas rendering performance on massive design systems. Figma has invested over a decade optimizing a specialized C++ vector rendering engine compiled to WebAssembly. On design files containing tens of thousands of complex vector nodes, nested component variants, and heavy raster assets, Penpot's canvas can exhibit noticeable frame rate drops during rapid panning and zooming.

The third limitation is the early-stage plugin ecosystem. If your existing design team relies heavily on specialized commercial Figma plugins (such as automated accessibility contrast checkers, automated copy generators, or specialized icon libraries), those tools may not exist in Penpot, requiring manual workarounds.

Selecting the right product design platform requires evaluating Penpot within the broader competitive design software category.

Compared to Figma, Penpot trades a mature third-party plugin marketplace and advanced prototyping variables for open-source freedom, zero seat licensing costs, complete self-hosted data sovereignty, and native CSS Grid layouts. For security-sensitive teams and front-end engineers, Penpot is fundamentally superior; for commercial design agencies executing complex interactive user testing, Figma remains the industry benchmark.

Compared to Sketch, Penpot provides true cross-platform web browser access, allowing Windows and Linux engineers to collaborate smoothly with Mac designers, whereas Sketch remains tethered to macOS.

Compared to Lunacy by Icons8, Penpot is genuine open-source software that can be self-hosted on private corporate servers, whereas Lunacy is proprietary freeware without collaborative self-hosting infrastructure.

In modern enterprise software engineering, intellectual property protection and regulatory compliance are paramount. Design files often contain unreleased product roadmaps, proprietary user interfaces, and confidential financial workflows that cannot be exposed to commercial cloud vendors.

Penpot's self-hosted architecture provides complete data sovereignty. When deployed on an internal private server, zero telemetry data or design assets are transmitted to external servers. Organizations operating in regulated industries (healthcare, defense, banking, and government) can deploy Penpot inside air-gapped networks with zero external internet access.

From an authentication perspective, Penpot supports enterprise Single Sign-On (SSO) protocols including SAML 2.0 and OpenID Connect (OIDC), enabling native integration with enterprise identity providers like Okta, Keycloak, and Microsoft Entra ID. All user sessions are secured with encrypted JWT tokens, and database storage in PostgreSQL can be fully encrypted at rest using enterprise encryption ciphers.

Deploying your own private, self-hosted Penpot instance requires only a server with Docker and Docker Compose installed. The entire setup follows four streamlined steps: downloading configuration files, configuring environment variables, launching the containers, and creating your initial administrator account.

Step one is obtaining the official configuration files from Penpot's GitHub repository. Create a dedicated directory on your server (`mkdir penpot && cd penpot`) and download the production Docker Compose and environment configuration templates: `wget https://raw.githubusercontent.com/penpot/penpot/develop/docker/files/docker-compose.yaml` and `wget https://raw.githubusercontent.com/penpot/penpot/develop/docker/files/config.env`.

Step two is configuring your environment variables in `config.env`. Set your public application domain (`PENPOT_PUBLIC_URI=https://penpot.yourdomain.com`), generate a secure secret key for cryptographic session tokens (`PENPOT_SECRET_KEY=your_random_secret_string`), and configure SMTP email credentials so the system can send user invitation links and password reset messages.

Step three is executing the deployment command: `docker compose up -d`. Docker downloads the official Penpot frontend, backend, exporter, PostgreSQL, and Redis container images, establishes the internal container bridge network, runs automatic database migrations, and binds the web service to port 9001.

Step four is configuring a reverse proxy (such as Nginx, Traefik, or Caddy) with a valid SSL/TLS certificate pointing to port 9001. Open your browser, navigate to your public domain, and register your first account. The initial user account automatically receives administrator privileges, allowing you to configure team permissions and invite colleagues.

A critical vulnerability of proprietary software ecosystems is the risk of sudden policy shifts, account suspensions, or aggressive price increases. When a company stores ten years of product design history inside a closed cloud format, migrating to an alternative platform is excruciatingly difficult.

Penpot champions absolute data portability. Because every design file in Penpot is fundamentally built on open web standards, your vector graphics are saved as genuine SVG files. You are never held hostage by proprietary file schemas.

Furthermore, self-hosted Penpot instances grant your team direct access to the underlying PostgreSQL database and asset storage volumes. You can schedule automated daily database dumps (`pg_dump`), replicate asset directories across multi-region cloud backups, and programmatically query design tokens using standard SQL or REST APIs. With Penpot, you own your tools, your files, and your infrastructure permanently.

Penpot is the ideal design and prototyping solution for engineering-led product teams, open-source communities, digital startups, and security-conscious corporations that value open standards, developer parity, and infrastructure control. If your front-end developers are tired of deciphering inaccurate auto-layout hacks and want a design tool built on real CSS Grid and Flexbox, Penpot will immediately accelerate your delivery velocity.

It is equally indispensable for healthcare, banking, defense, and government agencies that require 100 percent on-premise self-hosting to satisfy data sovereignty laws.

Conversely, Penpot is not the best choice for fast-paced commercial marketing agencies whose daily operations depend on thousands of third-party Figma community plugins, stock asset generators, and complex physics-based interactive prototypes for consumer user testing. For teams that prioritize plugin breadth and advanced animation over open-source sovereignty, Figma remains the pragmatic choice.

Penpot represents the future of open, ethical, and developer-aligned product design. By building natively on open web standards (real SVG, CSS Grid, and CSS Flexbox), Penpot does something proprietary tools have failed to achieve: it creates a unified layout language shared equally by designers and developers.

While its community plugin ecosystem and interactive prototyping logic are still maturing, its rapid release velocity, stunning 2.0 interface overhaul, rock-solid Docker self-hosting, and zero-dollar price tag make it a formidable force in the design industry.

For teams seeking to escape closed proprietary clouds, eliminate recurring seat fees, and align design artboards with production web code, we recommend Penpot as our top pick for open-source UI/UX design and self-hosted team collaboration in 2026.