Why Design Tools And Web Standards Should Match

Design tools and web development have always had an awkward relationship. The apps designers use to build interfaces are often terrible at reflecting the actual technologies those interfaces are built with. Layout tools follow logic that has nothing to do with how layouts work in CSS, and drawing tools produce output that behaves unexpectedly when exported to the web.

The root cause is usually that handoff and developer features were afterthoughts in commercial design software. Penpot takes a different approach: it is an open-source design and prototyping platform built from the ground up with designers and developers working together, and it is based entirely on open web standards.

That commitment matters in practical terms. Penpot files are saved as SVG — not "exported to SVG," but actually stored as SVG. Likewise, the CSS values that describe a design are read directly from the design itself rather than generated after the fact. The result is a much cleaner mapping from visual design to code than most design tools manage.

What Open Source Brings To Design Work

Penpot's open-source model is not just a licensing detail. It has concrete implications for how teams can use the tool:

  • It is free. The full application is available for commercial use with no paid tiers or feature gates. Every feature that exists today is free, even for large teams.
  • It is auditable and secure. Anyone can review the codebase for vulnerabilities. No single vendor controls the code, and users are not locked into a proprietary ecosystem.
  • It is customizable. Beyond plugins, teams can modify the source code itself to fit their exact workflow.
  • It can be self-hosted. Organizations can run Penpot on their own servers, keeping full control of their data and the application infrastructure.
  • It is future-proof. Because the code is open, users retain access to the tool and their work regardless of commercial shifts, acquisitions, or pricing changes.

Penpot has already attracted substantial traction — over 250,000 signups and 20,000 GitHub stars — which signals a growing appetite for open alternatives in this space.

Layout That Speaks CSS Flexbox

The most distinctive feature in Penpot is Flex Layout. It behaves like CSS Flexbox because it actually is CSS Flexbox, implemented inside the design canvas. This gives designers a layout system with the same properties, behavior, and constraints they would encounter in code. It also allows for capabilities that are awkward in other design tools, such as wrapping layout items into multiple rows.

The flexibility has a direct effect on responsive design. Because layouts are driven by real flex properties rather than ad-hoc grouped objects, it becomes possible to create designs that adapt across breakpoints without duplicating artboards for each screen size.

The Inspect tab supports the handoff workflow with similar precision. Selecting any component displays the CSS rules needed to reproduce it, plus the raw SVG source code — no translation layer or format conversion guesswork.

Where The Gaps Remain

Penpot is a young tool, and it does not yet match every capability of the commercial incumbents. Its component system and prototyping features are comparatively basic, and some workflows that require complex nested component logic or rich interactions will still feel limited.

The project's public roadmap shows active development, though, and the open-source contributor community gives the tool a trajectory that closed-source competitors lack. Work is already underway on future layout capabilities that would extend the Flexbox approach to other CSS layout models.

With flexibility as a design principle and SVG as a native format, Penpot is worth evaluating for teams that care about code parity and vendor independence. It is out of beta and available now at no cost.