The open-source design tool that speaks real code
Built-in CSS and SVG means developers integrate design deeply into their workflow.
Connect design and code at scale
Code
Design
Designed for developers
Penpot was built from day one to serve both designers and developers and create a seamless design-code process. With features such as CSS Grid and Flex Layout, Penpot is made to streamline devs' workflow.
See Layout features
Code
Code
Inspect mode
Work with ready-to-use code and make your workflow easy and fast. The inspect tab gives instant access to SVG, CSS and HTML code.
Code
Design
Self host your own instance
Use Penpot's cloud service or deploy your own Penpot server. Provide your team or organisation with a completely owned collaborative design tool.
Self-host install
Code
Code
Integrations
Penpot supports webhooks and a flexible open API through access tokens. Enjoy total flexibility integrating Penpot into your development toolchain.
Integration guide
Code
Design
Design Tokens
No need of a plugin. Use built-in design tokens as a single source of truth to improve efficiency and collaboration between product design and development.
More on Design Tokens
Code
Code
Design systems
Borrow from the best software architecture practices. Encapsulate design elements into components and tokens that allow extreme reusability and scalability of your design work.
More on Design Systems
Code
Design
Plugin System
Extend and customize Penpot to fit your workflow. Create your own plugins or use community ones—like Locofy plugin, which turns designs into production-ready code in seconds.
Explore plugins
Code
Code
Interactive prototyping
Create realistic user flows and interactions. Collect feedback from stakeholders in a single, centralized conversation.
Discover more features
Share your work
Share any piece of work with other users. You decide whether they can suggest changes or not.Multi-language UI
Choose among over 30 different languages (RTL supported) and use Penpot in your own language.Unlimited teams and projects
With unlimited projects, scale up your work and organization.Full features list
From beautiful code comes a beautiful tool
Your Penpot, your rules
Learn how to setup your custom Penpot installation in no time, whether it's a glorified localhost or a company's instance.
Technical guide
Hack along with us!
Tinker with Penpot and suggest new ideas, send code contributions or produce libraries and templates.
Contributing guide
What developers say about Penpot
Oh my gosh - I love it. The controls felt very intuitive to me - way more intuitive! They map nicely to the mental models of actual CSS. I LOVE the wrapping options as well - so much more dynamic than I thought it ever would be! I also really appreciate how developer-friendly this is, so hand-off becomes simple!
Brett Haymaker
@BrettHaymaker
The fact that you can build layouts using flexbox is so practical. It takes away this weird layer of abstraction that exists with other tools, which needs to be "deconstructed" to some extent during implementation.
Raphaël Titsworth-Morin
@@raphaeltm_
Penpot using the same abstractions as developers - CSS flexbox and grid - could be a huge game changer for front-end developement.
Steve O'Brien
@username
Stay in the loop
