Penpot’s official launch brings developers and designers closer than ever!

May I say Happy Birthday! to everyone that was born on the 31st of January! It’s the least we can say on the day we’re officially welcoming Penpot to the world!

But why now? And what’s packed in this official launch?

Let me start by personally thanking both the team and the community for shaping up such a great release for everyone to enjoy. This didn’t happen by accident. You don’t get such a polished vision executed so meticulously without at least a couple of years of hard work.

We conceived Penpot to be the ally designers needed in their demand to achieve unprecedented scalability and creativity. We wanted to build designer and developer communities that could collaborate effortlessly, so they could focus on bringing their unique creative contributions to the world.

However, we didn’t want to achieve any of this at the expense of the ownership and freedom of your work. That promise could only be guaranteed by open standards and open source, hence Penpot.

Now, let’s dive into what’s new for our official launch!

Flex Layout!

With Penpot, designers and developers can now finally work in unison to build beautifully designed software experiences that can truly scale up.

For this official release, we wanted to bring something truly special and innovative. Welcome Flex Layout! Both designers and developers who helped us beta test this feature overwhelmingly fell in love with this opinionated design=code stake on designer’s creativity.

flex-button
Penpot Flex Layout in action!

Traditionally, design and prototyping tools have built a silo model for designers, forcing them to stay away from developers. Penpot puts and end to that by bringing code standards as a design capability!

Code Inspect

Speaking of developers, they love to tinker and explore! They (we) often refer to this as “to inspect’’ so we added a brand new view-only “Inspect mode” right on the Workspace UI. Multiple designers and developers might be sharing the same Penpot UI space on a real-time collaboration, and yet enjoying slightly different panes and tabs. That’s a game-changer for team dynamics.


Code Inspect and Flex Layout make such a wonderful duo! Here we simulate real-time collaboration. Go fullscreen to enjoy it to the fullest!

Treat yourself with a nice tutorial experience by visiting our documentation covering Flex Layout and Code Inspect!

Webhooks

Penpot’s official release comes with an exciting new feature, outbound webhooks! Webhooks are easy to use event-driven communication calls between different applicatons. That’s right! Penpot can now broadcast team and project activity to other tools that can handle webhook payload URLs.

It’s still relatively simple, but if you were to take a closer look at our API reference doc you can already see the potential!

More payload options, inbound webhooks as well as a full-featured API is underway. This is just us wanting to show you that Penpot is a team player for your Designops and Gitops workflows.

Accessibility

We all believe that design should make technology more accessible to everyone, but what about the creative tools themselves? A few months ago we started to bring accessibility to our core software development processes and the first fruits of that are here. You will notice important improvements on color contrast, alt texts, semantic labels, focusable items and keyboard navigation.

Other bonuses!

The truth is that if you were to sneak peek into our code repository, you’d find dozens of new features and improvements, we’re not kidding. And so I was forced to ask the team for their shortlist of favorites and save you the pain of a gigantic text wall.

The team is particularly proud of improvements on nested boards, as well as new overlay trigger options for more productivity on interactive prototypes. Components have evolved into a much more straightforward “main component/instances” logical abstraction. Improvements for pen tablet support are a megawin and everything around invites/onboarding, roles and permissions as well as design sharing options make bigger teams really come together, faster.

My personal favorite, though, is all the great stuff around assets and variables. First of all, it’s super easy to create and manage asset groups, but I also love the fact that everything around assets and colors&fonts is located in one place, making it specially fast to find the stuff you need. Oh, if you’re a keyboard shortcut fan like me, don’t forget to press “?” at any time on the Workspace!


Assets and Libraries together! Bauhaus experience!

New website!

Could we launch our official release and not have a revamped website? No, we could not! The new website is a nice blend between beautiful design (of course), really useful data on Penpot’s capabilities and a few mission statements, so people know where we stand.


The website screams both show me code! and show me the product!

If you know someone who could benefit from a quick overview of what Penpot can do for them, feel free to share our new website!

What’s next!?

Ha! Good question! To be fair, we’re still super focused on making sure this official release gets out there with a bang, but we can’t hide our product backlog, can we?

Big themes for us are a Plugin Architecture, more Layout options, Variables/Version control rules applicable to any design asset or Git repository integrations, to name a few. Particularly, the Plugin Architecture should bring all the great stuff from generative AI. We clearly want to be on the right side of History here, and the unmistakable truth is that Penpot is the only design & prototyping tool you can truly claim your own.

On the performance side, we have both an opportunity and a challenge. The fact that we use open web standards, and therefore we can tap into browser’s DOM memory availability, means that we don’t have a 2GB/4GB project size limit. Current browser configurations typically speak of a 16GB limit, but you’d expect that to increase over time as computer resources do too. We’ll have to work extremely hard on making sure that 16GB projects can run super smoothly on Penpot! Who’s up for a challenge!

Finally, one data point you might find really encouraging. The whole team that brought you all this is actually not bigger than 30, and that includes any direct and indirect involvement. This speaks volumes about the talent and the motivation of the team, but also about the critical importance of building technology on top of open source and open standards. I want to thank every bit of free & open source software we used, as well as open standards working groups we relied upon for enabling impactful technologies for everyone!


We have a surplus of great energy!

The team would like to dedicate this release to Clara and Andrey, team members on maternal/paternal leave at the moment!

PS: I earlier said that this release didn’t happen by accident. By now you’ll also agree with me that our future is not going to be an accident either, we’re going to shape that future and share it with everyone!

If you missed our live unboxing or you simply want to re-watch it, go there now!

Also, if you plan to attend FOSDEM this weekend in Brussels, be sure not to miss our talk!

14 Likes

AMAZING release. Checking out everything. WOW. Congrats.

Flex is, bomb.

3 Likes

Ok, one question that regards both the new website and the app ui. On the new homepage, app UI looks different then the UI we have been using so far. Is there new APP UI coming? Is there any info on that? Thanks.

1 Like

Hey @thisbit this is the UI that should come later this year. We really want to ship asap but we don’t have a specific date. What’s most relevant I think, is the fact that the website UI mockups are actually part of our product backlog! I love them!

2 Likes

I agree it looks really good. When I saw the homepage I was excited for that too, but sure take your time to do it right.

1 Like

just curious why is there svg code, flex layout usually is just html and css right?

It’s right there below the CSS code! Check this https://europe1.discourse-cdn.com/standard20/uploads/penpot/original/2X/7/7fd8ebc3a6bed3dd4211e7e199cb7aa15944ef0e.webm

can’t open that image, i saw svg code just wondering why it wouldn’t instead make HTML code, why is SVG needed for a flexbox layout

actually nevermind i think the screenshots of the svg code next to the flexbox ui confused me, i don’t think they are meant to go together, I’ll just test drive it!

I get it now! The Code Inspect tab will always give you SVG output. What can also give you based on the layout system you’ve chosen (no one, Flex, Grid very soon) is the CSS that you might also want.

nice keep up the awesome work! love the code integration!

Well done! I love how you guys keep it tight between design and development. I hope this keeps building an edge in the product so that we will eventually win market share from Figma and increase adoption of open source apps.

1 Like

We keep working hard on all that! Thanks!

1 Like