Penpot Wants to Fix Design Handoff—Does It

There's this moment that happens to every developer who works with designers: you're staring at a Figma file, mentally translating Auto Layout into actual flexbox, wondering if that 23.47px margin is intentional or someone fat-fingered their trackpad. The design looks great. The conversion to code? That's where things get messy.

Better Stack just released a video about Penpot, an open-source design tool that claims to eliminate this translation layer entirely. Instead of simulating web layouts, Penpot uses actual CSS, SVG, and HTML under the hood. The pitch is simple: what if your design tool already spoke the same language as your codebase?

It's a compelling idea. But does it actually work?

The Core Premise: Native Web Standards

Penpot isn't trying to be "Figma but free." The architecture is fundamentally different. While Figma's Auto Layout is inspired by flexbox, Penpot just... uses flexbox. When you set up a container, add padding, and drop in some text, you're working with the actual CSS properties that will ship to production.

The Better Stack demo shows this clearly. The host spins up a self-hosted instance via Docker (one command, apparently), builds a simple card component, then switches to inspect mode. What you get isn't an approximation or a best-guess translation—it's clean CSS you can copy-paste directly into your project. Flexbox properties, spacing values, layout structure. No mental conversion required.

"You get clean structure in the actual CSS, Flexbox properties, spacing, layout, not a rough translation, something you already understand," the host explains. "You can copy this and drop it straight into your project."

For developers who've spent hours reverse-engineering design files, this sounds like fantasy. But there's a reason most design tools don't work this way.

Why Figma Doesn't Do This

Figma's abstraction layer exists for a reason. Designers shouldn't need to understand CSS specificity or the quirks of flexbox to create good layouts. By simulating web standards rather than implementing them directly, Figma gives designers freedom to think in design terms, not code constraints.

Penpot makes a different bet: that the mental model of modern CSS (flexbox, grid, etc.) is now intuitive enough that designers can work directly with those primitives without feeling constrained. Whether that's true probably depends on who's using it.

The video addresses this indirectly: "Figma simulates layouts. Auto Layout is inspired by Flexbox, but you still end up translating all this in your head. Penpot starts much closer to actual CSS, so there's less mental conversion between design and code."

That's a trade-off, not a pure win. Less conversion for developers might mean more cognitive load for designers. The question is whether that trade makes sense for your team.

The Self-Hosting Angle

One of Penpot's biggest differentiators is that it's fully open-source and self-hostable. The Better Stack demo runs on a local Docker instance, and the host emphasizes the data ownership aspect: your designs live as SVG, CSS, and JSON files. No proprietary lock-in, no seat-based pricing, no waiting for enterprise approval to add another collaborator.

For teams that care about data sovereignty or run air-gapped internal tools, this matters. For most teams? It's probably nice-to-have rather than essential. Self-hosting means you're now maintaining another service, dealing with updates, handling your own backups. That's not free, even if the software is.

The unlimited files and collaborators thing is genuinely useful, though. Figma's pricing scales with team size, which gets expensive fast. Penpot just... doesn't charge you. For bootstrapped startups or side projects, that's a real budget difference.

What Penpot Gets Right

The handoff problem is real, and Penpot's approach does shrink it. When your design tool outputs actual CSS, there's less room for interpretation errors. Design tokens—colors, spacing, typography—map more directly to code because they are code underneath.

The inspect view being built-in rather than bolted on also matters. In Figma, Dev Mode feels like a separate layer you activate when you're done designing. In Penpot, code and design coexist from the start. That architectural choice shapes how teams work.

For developer-heavy teams building internal tools or MVPs, this makes a lot of sense. The designer-developer ratio in those environments is often skewed toward dev, and Penpot's approach optimizes for that reality.

What It Doesn't Solve

The video is honest about limitations. Penpot struggles with really large files. The plugin ecosystem is tiny compared to Figma's. If your team has invested heavily in Figma workflows, migrating isn't trivial—and might not be worth it.

"Penpot can struggle with really large files. The plugin ecosystem is a lot smaller, and if you're deep into Figma, then there's going to be somewhat of a learning curve," the host notes.

There's also a question the video doesn't fully address: what about design sophistication? Figma became dominant partly because it's legitimately great at complex design systems, component libraries, and collaborative workflows. Penpot's commitment to web standards might make certain design patterns harder to express elegantly.

The polish gap is real. Figma has years of refinement, thousands of plugins, and the muscle of a major company behind it. Penpot has momentum and principle, but it's still catching up on execution.

Who This Actually Makes Sense For

The Better Stack host lands on a reasonable conclusion: Penpot doesn't need to replace Figma everywhere to be useful. If you're working on side projects, building developer tools, spinning up MVPs, or just want to avoid subscription lock-in, Penpot covers most of what you need.

"If you're in a big company with massive design systems, you're already built around Figma, so you're probably not going to switch to this, at least not overnight, but that's not really the point," he says. "Penpot doesn't need to replace everything to be useful."

That's probably the most honest take. This isn't about declaring a winner. It's about recognizing that different tools serve different contexts. For teams where developers outnumber designers, where shipping speed matters more than pixel-perfect brand consistency, where data ownership isn't negotiable—Penpot might actually be the better choice.

For enterprise teams with established Figma workflows, complex design systems, and the budget to pay for seats? The switching cost probably isn't worth it yet.

The interesting question is what happens as Penpot matures. If the ecosystem grows, if performance improves, if the plugin gap closes—does the native web standards approach start to feel less like a trade-off and more like an obvious evolution?

Right now, Penpot is a tool that solves real problems for specific teams. Whether it becomes the tool that redefines how design and development work together depends on whether its bet on web-native design proves correct. The early signs are promising enough to pay attention.

— Tyler Nakamura