Penpot
The open-source design and prototyping platform for design and code teams.
Overview
Penpot is a web-based design tool for creating user interfaces and prototypes, built on open web standards. Designers and developers can work together in the browser, and it can be self-hosted.
Because Penpot uses SVG, CSS and flexible layout concepts, designs are closer to the way the web works, which makes the hand-off to developers easier.
Where it is used
- Website and app UI design
- Wireframes and prototypes
- Design systems
- Design-to-development collaboration
Getting started
- Create a free account on the Penpot website or follow the self-hosting guide (Docker Compose) in the Penpot documentation.
- Create a project and a board for your first screen.
- Build reusable components and link screens into a prototype.
- Share the file with your developer.
What you will cover
The key topics and features of Penpot
Design Boards
Create screens, components and design systems.
Prototyping
Link screens and preview interactions.
Flex & Grid Layout
Layouts that behave like real CSS.
Real-Time Collaboration
Designers and developers in one file.
Developer Handoff
Inspect CSS and export assets.
Self-Hostable
Run it on your own server.