Penpot for Designers: Open-Source Design Freedom

Penpot is a free, open-source design tool built as an alternative to Figma and Sketch. It runs in the browser with real-time collaboration, but you can also self-host it on your own servers for complete data control. The interface feels familiar if you’ve used Figma: frames, components, prototyping, and shared libraries work similarly. The difference is philosophy. Penpot is SVG-native (designs are stored as standard web files), fully open-source, and designed for teams that want to own their design infrastructure.

Key Specs

How Designers Use Penpot

Penpot adapts to the same workflows as Figma, with some differences in how features work.

For UI Design and Mockups

Create boards (Penpot’s version of frames) for each screen size. Use the layout tools to build interfaces with components, text, and vector shapes. Penpot’s vector editing is precise and SVG-native, which means paths behave like actual SVG elements. If you know SVG, this feels natural. If you don’t, it’s occasionally quirky compared to Figma’s abstracted approach.

For Design Systems with Components

Build components with flex layout (Penpot’s auto-layout) to make designs responsive. Use component swaps and overrides to handle different states. Publish components to shared libraries so your team can pull them into any file. Penpot’s component system is simpler than Figma’s variants but covers most use cases. Complex component architectures require more manual work.

For Prototyping Flows

Connect boards with interactions to create clickable prototypes. Add overlays, transitions, and animations to show how interfaces behave. Penpot’s prototyping isn’t as feature-rich as Figma’s, but it handles basic user flows and stakeholder presentations. You won’t find smart animate or advanced easing curves here.

For Developer Handoff

Penpot shows CSS properties, measurements, and spacing for any element. Developers can inspect designs and export assets directly. Since Penpot uses SVG, developers get clean code without conversion. There’s no equivalent to Figma’s Dev Mode (a separate paid view), but inspection is built into the interface for everyone.

Penpot vs. Alternatives

How does Penpot stack up against the big design tools?

Choose Penpot if: You want data sovereignty, need self-hosting for compliance, value open-source principles, or want to avoid vendor lock-in.

Choose Figma if: You need the most polished tool with the largest plugin library and community resources.

Choose Sketch if: You’re a Mac user who prefers native apps and works offline frequently.

Getting Started with Penpot

A quick start to creating your first design:

Step 1: Create a board and start designing

Press B to create a board (frame). Pick a preset size (Phone, Tablet, Desktop) or drag to create custom dimensions. Add shapes with R (rectangle), E (ellipse), or T (text). Penpot’s shortcuts are similar to Figma’s, so muscle memory transfers if you’re switching tools.

Step 2: Use flex layout for responsive design

Select elements and click the flex layout icon in the right panel (or press Ctrl/Cmd + Shift + F). This is Penpot’s version of auto-layout. Set direction, spacing, padding, and alignment. Add or remove items and the layout adjusts automatically. Flex layout is powerful but less intuitive than Figma’s auto-layout at first.

Step 3: Create components for reuse

Select a button, card, or any element you want to reuse. Press Ctrl/Cmd + K to create a component. Drag instances from the assets panel (left sidebar). Edit the main component and all instances update. Components work like Figma’s, with some limitations on complex overrides.

Penpot in Your Design Workflow

Penpot fits into design workflows as a Figma alternative with open-source advantages.

• Before Penpot: Research and wireframes (Excalidraw, FigJam, paper sketches)
• During design: Penpot for UI mockups, design systems, and prototyping
• After Penpot: Export SVG/PNG assets, hand off CSS specs, or integrate with self-hosted tools

Common tool pairings:

• Penpot + Excalidraw for open-source whiteboarding before detailed UI work
• Penpot + Taiga or Linear for design issue tracking without leaving the open-source ecosystem
• Penpot + Storybook for connecting design components to coded libraries (works like Figma)
• Penpot + self-hosted Git for version control on design files (since files are SVG)

Common Problems (and How to Fix Them)

These issues come up in Penpot communities. Here’s how to handle them.

“Penpot feels slower than Figma”

Penpot is improving performance but isn’t as optimized as Figma yet. Large files with hundreds of boards and complex components will lag. Keep files under 50 boards, break projects into multiple files, and avoid heavy bitmap images. Self-hosted instances on good hardware perform better than the public cloud version.

“Features I rely on in Figma don’t exist in Penpot”

Penpot is catching up but missing some Figma features: advanced component variants, plugins for integrations, Dev Mode, and some prototyping interactions. Check the roadmap (penpot.app/features) to see what’s planned. If a feature is critical, you may need to stay in Figma or use both tools for different projects.

“How do I migrate from Figma without losing everything?”

Start small. Export a single Figma file as .fig (File > Save as .fig), then import to Penpot. Review what transferred correctly and fix issues. Don’t migrate your entire design system at once. Test with one project first. Fonts, colors, and basic shapes transfer well. Complex components and plugins won’t.

“Self-hosting setup is confusing”

Penpot uses Docker, which requires technical knowledge. Follow the official Docker Compose guide (help.penpot.app). You’ll need a server (AWS, DigitalOcean, or on-premises), domain name, and SSL certificate. Budget 2-4 hours for initial setup. If you’re not technical, use the hosted version at penpot.app or hire someone to set it up.

“My team is resistant to switching from Figma”

Don’t force it. Penpot works best when teams choose it for specific reasons: avoiding subscription costs, data sovereignty, or open-source values. If your team is happy in Figma and doesn’t care about vendor lock-in, switching adds friction without benefit. Use Penpot for side projects or specific clients with compliance needs, not as a blanket replacement.