Penpot is an open-source design tool for design and code collaboration, however it’s not only designers who use Penpot. In fact, many more developers use it in collaboration with designers and other stakeholders.
As shown on the graph below, Penpot enjoys a designer:developer ratio close to 2:3, where other tools are stuck at 1:1 — this is not a coincidence.
The best collaboration with designers
You, as a developer, may be asking yourself: what’s in it for me, right? Well, let’s take a look at our promise to bring developers and designers closer together under the Open Source umbrella. And how this is leaning towards how teams are changing how they’re building software.
How often do you feel like you and the designers in your team don’t speak the same language? As if you don’t fully understand each other, and things inevitably get lost in translation? This situation is painful for both designers and developers to suffer – when expectations of what can be achieved from both sides are not met. This issue clearly doesn’t help the effectiveness of building better products together.
Here’s some reasons why Penpot is the design tool of choice for developers.
1. A common language between designers and developers
At Penpot, our goal is to bridge the gap between designers and developers. One of the ways we articulate this approach is by building features such as CSS Grid Layout and Flex Layout which bring the coding language closer to the designs.
Penpot CSS Grid allows designers to create simple or elaborate 2-dimensional layouts (rows and columns) that are ideal for complex designs which need to meet real-world challenges. These layouts adapt and change across multiple devices and environments and make the dev’s job so much easier and straightforward!
If you want to know more about what’s the fundamental worldview behind decisions like this one, check Pablo’s posts on declarative design at c11n.quest blog.
2. Easy experience where devs feel at home
One of the aspects that first-time users highlight about Penpot is its intuitive interface and especially for devs who might not be so familiar with design tools – they say they feel very comfortable using Penpot.
We have made sure not to use confusing terminology and keep a tidy UI that feels welcoming and respects industry standards found in other design and code tools.
Thanks to Penpot’s code inspect tab, devs can freely inspect designs avoiding the fear of changing anything in the design file. You can copy the code output from the Inspect tab and take it straight to your code editor.
3. Inspect tab with ready-to-use code (SVG, CSS and HTML)
Having the possibility to inspect anything from the design file in the inspect tab with code ready to use —CSS and HTML— makes devs’ work much easier and faster by getting detailed information about the object’s style, measurements, distances and content.
Penpot provides developers with actual code snippets - ready to use code for CSS styles and SVG markup.
Penpot is natively based on SVG, which means that it is the best tool to edit vector files and make boolean operations.
4. Open-standard formats & Open Source
Unfortunately, proprietary software forces designers and developers to work within their walled gardens. You must use the privacy policy they choose, the formats they like, and pay a premium subscription to do so.
With Penpot —being an open-source platform— you own your work. Our tool works natively with open standards which makes it more accessible, collaborative and inclusive. You can turn your files into CSS, HTML, SVG, PNG, JPG and PDF formats, allowing you to take your designs wherever you like.
Even our .penpot files are basically a zip file with a JSON and a bunch of folders and SVGs but you can also use a binary-optimized .penpot file if you are only concerned in moving things around or between Penpot instances.
We’re an open-source company that believes in freedom, consequently we make sure our products deliver choice to our users.
5. Self host your own instance
Penpot offers you to use the platform in two different ways: you can use our web-based online service or, alternatively, deploy your own Penpot server and host it yourself.
By self-hosting your own instance, you provide your team or organization with a completely private collaborative design tool that you can control and customize to your liking.
The most common options of self-hosting are via Docker or Elestio. There is absolutely no difference between our SaaS offer for Penpot and your self-hosted Penpot platform.
And you’ll be wondering whether there’s a desktop app? Yes, there is an unofficial one supported by a wonderful member of our community. You can read more about it on this post. You can combine a Desktop-like experience with your own localhost deployment for a full “off-the grid” experience.
6. Integrate your stack with Penpot API
Penpot API gives you the flexibility to integrate our design tool into your dev toolchain as you please. Penpot supports webhooks and an API through access tokens so you can enjoy total flexibility and customization in your workflow.
We already have a couple of cases where the API has allowed companies to come up with brilliant solutions to their particular work scenarios such as a CSS Penpot exporter or another impressive case where Penpot worked as a framework to create an e-commerce builder – interestingly enough this work was made as a fork before even the webhooks and API existed in Penpot.
And what about plugins? Yep, they’re coming soon. We’re working on a plugin system that will allow you to go even further.
You’ll find more info on the Integration Guide.
7. Shared libraries and templates
You may want to start trying Penpot by using any of the libraries and templates, rather than begin a project from scratch. Alternatively, you can also add them whenever you feel it makes sense for your ongoing projects.
Explore all Libraries & Templates available on our website or a curated list within the app. To learn how to import them follow the instructions.
8. Keep consistency with scaled designs
Penpot allows you to encapsulate design elements into components and design tokens for extreme re-usability and scalability of your work.
Developers should immediately enjoy these familiar abstractions that include main-copy component inheritance, attribute overloading and copy-to-main component overrides. Once you’ve built a wonderful design system you can turn it into a library that can be exported and used across other projects, which can then tap into the benefits of distributed component management.
Penpot’s component system becomes addictive for developers and ties into the Code inspect tab seamlessly too!
9. Interactive prototyping
It’s not unusual that you, as a developer, want to prototype a certain software product flow in low fidelity and mock how users would explore a specific customer journey. Penpot has a powerful prototyping feature found on the right panel, between the design contextual information and the code inspect tab.
Of course, nothing prevents you from using it for high-fi UI simulations as well as completely different artifacts such as data flows, slides or anything that benefits from sharing something that’s interactive. You can allow for feedback and comments too through the sharing prototype feature.
10. Penpot is free
And finally and more importantly, we strive to make our tool accessible to everyone. Penpot is a free tool for both developers and designers, no matter the team size or the number of projects. And if you wonder whether we’ll ever close our gates, the short answer is no, the long one is here.
I hope I managed to make you feel excited about trying out Penpot, go ahead now and sign up!
Notes:
-
If you have more questions that didn’t get covered here, you may find your answers in our FAQ section or feel free to shoot them below in the comments section.
-
Willing to contribute in any way? Code contributions are more than welcome too.
-
Some of the features described above such as CSS Grid Layout, Components and HTML code are coming up in the next 2.0 release which we’ll be available very soon!
