How to Use Penpot: A Practical Guide

Penpot is an open-source design and prototyping tool that runs in the browser. It's free, and unlike Figma's free plan, the free version has no seat limits — the whole team can collaborate at no cost. For teams that are self-hosted or have strong data sovereignty requirements, Penpot is one of the only credible options.

Here's how to get set up and productive.

Cloud vs self-hosted

Penpot gives you two ways to use it:

Penpot Cloud (penpot.app). Free account, sign up in two minutes. This is the fastest way to start. Your files are stored on Penpot's servers. Good for: individuals, small teams, people who want to try Penpot before committing.

Self-hosted. Run Penpot on your own infrastructure using Docker. This requires a developer or DevOps setup — it's not a one-click install. Good for: companies with data residency requirements, enterprises that need full data control, teams already running infrastructure. The self-hosted version is free indefinitely; there's no premium self-hosted tier.

If you're evaluating Penpot for a team and don't have strong hosting requirements, start with penpot.app. The self-hosted setup takes an hour or two with Docker knowledge.

Importing from Figma

Penpot has a built-in Figma importer. To use it:

1. Export your Figma file as a .fig file (from Figma's File menu → Save local copy)
2. In Penpot, create a new project or open an existing one
3. Click the "+" button to add a file and choose "Import Figma file"
4. Upload the .fig file

The importer handles most elements well: frames, text, shapes, auto layout, and basic components. What doesn't import cleanly: complex component variants with many properties, interactive prototyping flows, and some plugin-generated content.

After importing, expect to spend 30-60 minutes cleaning up a complex Figma file. Simpler files transfer with minimal cleanup.

Creating components in Penpot

Penpot's component system works similarly to Figma's but has some conceptual differences.

To create a component: select a group of layers and right-click → "Create main component." The component appears in your Assets panel under "Components."

Instances: drag a component from the Assets panel onto the canvas. Any changes to the main component propagate to all instances. To override instance properties, double-click to enter the instance and make your changes.

Penpot added support for component variants in recent updates, similar to Figma's variant properties. The interface is less mature than Figma's but functional for most use cases.

Auto layout in Penpot

Penpot calls auto layout "Flex Layout" — it's based on the CSS flexbox model, which is actually more intuitive if you have a web development background.

To add flex layout: select a frame, then click the "F" (Flex) button in the Design panel. You can then set direction (row/column), gap, alignment, and padding.

The behavior is nearly identical to Figma's auto layout for horizontal and vertical arrangements. Grid layout (Penpot's version of Figma's grid-in-frame feature) was added more recently and gives you CSS grid-style positioning.

Prototyping

Penpot's prototyping is in the Prototype panel (the play icon in the right sidebar). Select a layer, add an interaction, choose the trigger (on click, on hover) and the destination frame.

Transitions: slide, push, dissolve, and no transition. Easing and duration are configurable. The prototype viewer is clean and linkable — you can share a prototype link with stakeholders for review without giving them edit access.

Compared to Figma prototyping: the interaction model is simpler. You won't find Smart Animate equivalents or advanced component interactions. For basic flow prototyping and stakeholder walkthroughs, it's sufficient.

Dev mode (inspect)

Penpot's inspect view (called the "Developer" mode in the viewer) lets developers view CSS properties, download assets, and copy code snippets. Access it by sharing the file in View mode and selecting the inspect tab.

It generates CSS values for most properties: dimensions, colors, typography, spacing, border-radius. The output is close to production-ready for simple web layouts.

Try Penpot Free

The differences from Figma to be aware of

• Plugin ecosystem is smaller. Figma has thousands of plugins; Penpot's library is growing but much smaller. If you rely on specific Figma plugins, check whether Penpot equivalents exist before switching.
• Performance on large files. Complex files with hundreds of components can feel slower in Penpot than in Figma. This is improving with each release.
• The component system is less mature. Multi-property variants and component properties (Figma's text/visibility/instance-swap properties) are in development. For complex design systems, Figma is ahead.
• No branching. Figma's branching feature doesn't have a Penpot equivalent yet.

Who Penpot is best for

• Teams with a no-cost-tool policy or budget constraints
• Teams with self-hosting or data control requirements
• Developers building or evaluating open-source toolchains
• Individuals who want full-featured design software without a subscription

For large product design teams doing heavy design system work, Figma's more mature component system and plugin ecosystem are still ahead. For everything else — wireframing, UI design, prototyping, stakeholder reviews — Penpot does the job.