Create Your Account
Go to penpot.app and sign up for a free account with email or OAuth. Penpot is the open-source alternative to Figma: fully browser-based, self-hostable, and built on web standards like SVG and CSS. The cloud version is free for unlimited files and collaborators. Enterprise teams can self-host for full control.
Once logged in, you’ll see your dashboard with recent projects and teams. Click New Project to create your first file. Penpot’s interface will feel familiar if you’ve used Figma or Sketch: canvas in the center, layers on the left, properties on the right.
Start Your First Project
Click New File inside your project to open the editor. You’ll see a blank canvas and a toolbar at the top with shape tools, text, pen tool, and frame (artboard). Start by creating a Frame: click the frame icon or press F, then drag to define your artboard size. Use common presets like Desktop, Tablet, or Mobile from the right panel.
Add shapes using the toolbar: rectangles, circles, polygons, or the pen tool for custom paths. Click and drag to draw. Every shape has fill, stroke, shadow, and blur options in the properties panel. Penpot uses real CSS properties, so what you design matches what developers build.
Build Your First Design
Draw a simple UI: a header, button, and card layout. Use the Text tool (T) to add headings and body copy. Select text to adjust font, size, weight, and color in the right panel. Penpot supports Google Fonts and custom font uploads.
Group related elements by selecting them and pressing Ctrl+G (Cmd+G on Mac). Use Auto Layout (similar to Figma’s Auto Layout or CSS Flexbox) to build responsive components. Click the Auto Layout button in the right panel to turn a frame into a flex container with spacing, padding, and alignment controls.
Create reusable components by selecting an element and clicking Create Component in the toolbar. Instances inherit changes from the main component. Use design tokens in the Shared Libraries panel to define colors, typography, and spacing that sync across files.
Export and Share
When your design is ready, select frames or elements and click Export in the right panel. Choose PNG, JPG, or SVG. Penpot’s SVG export is clean and developer-friendly, with semantic markup and readable class names.
Use the Share button at the top to invite collaborators with view or edit access. Penpot supports real-time multiplayer editing like Figma. Generate a shareable link for clients or stakeholders to view designs in the browser without signing up.
For developers, Penpot shows CSS code for every element. Select a shape and open the Code tab in the right panel to see box model, flexbox, grid, and color values. This makes handoff seamless.
Next Steps
You’ve built your first Penpot design. Now explore prototyping with interactive flows, set up shared libraries for design systems, and learn how to self-host Penpot for team control. Check out Penpot’s full features to see how open-source teams use it for UI design, icon libraries, and design-to-code workflows. Combine Penpot with CSS frameworks like Tailwind for direct design-to-development pipelines.