Where are you using WebAssembly?
Wasm promises to let developers build once and run anywhere. Are you using it yet?
At work, for production apps
At work, but not for production apps
I don’t use WebAssembly but expect to when the technology matures
I have no plans to use WebAssembly
No plans and I get mad whenever I see the buzzword
Frontend Development

Penpot Woos Developers, Takes on Figma with Open Source Tool

Tools that help developers collaborate with designers are a trend. Figma and Canva have been touting their dev tools, and now Penpot is too.
Jun 29th, 2023 5:00am by
Featued image for: Penpot Woos Developers, Takes on Figma with Open Source Tool

When Adobe announced that it would acquire the design tool Figma for $20 billion last September, an open source equivalent called Penpot immediately began seeing a spike in signups. Penpot, which is developed by a Spanish company called Kaleidos, continued to grow rapidly after it launched General Availability in February. Since then, Penpot sign-ups have grown by 66% to 400,000 users, reports Kaleidos.

I spoke with Penpot’s creator and the CEO of Kaleidos, Pablo Ruiz-Múzquiz, ahead of the company’s first developer event, Penpot Fest. At the event, Kaleidos is introducing a suite of new tools to “further improve collaboration between designers and developers.” It’s also partnered with Tokens Studio, a popular design tokens plugin (formally called “Figma Tokens”), to “build native Penpot compatibility and an AI engine capable of generating design systems and key design workflows.”

I began by asking Ruiz-Múzquiz about the genesis of Penpot, which launched in beta during 2021. He explained that Penpot was born out of the need for a design and prototyping tool within their open source-focused software development agency, Kaleidos (“as in kaleidoscope”). It was when the company started hiring in-house designers that Ruiz-Múzquiz realized he needed some tools to collaborate with them.

Kaleidos began by creating Taiga, an open source project management tool. The objective was to bring the new designer employees into the agile (specifically, lean) devops process that the Kaleidos developers adhered to. Then they turned to creating an open source design and prototyping tool, Penpot, which would enable the designers to also collaborate with the company’s developers.

“We made sure that whatever we would build actually welcomed developers into the design process, the same way we had welcomed designers into the ‘lean’ process with Taiga,” Ruiz-Múzquiz explained.

Penpot prototyping

Using Penpot to prototype an app.

Once these two products were released and gained some initial traction in the open source community, Kaleidos decided to focus full-time on them.

“After 10 years doing consultancy, we decided to ditch all that and pivot into a 100% open source product company, with both Taiga and Penpot,” Ruiz-Múzquiz said.

Initially, Penpot was targeted at designers, as Kaleidos wanted to cater to a discerning audience who were accustomed to using expensive tools (like, say, the Adobe suite). They wanted to ensure that designers would be happy with Penpot, while also considering features that would appeal to developers.

Developers Bring Scalability

Ruiz-Múzquiz estimates that around a third of Penpot’s current users are developers, but he thinks this will grow over time “simply because there are so many more developers out there.”

Building a tool exclusively for designers is not sustainable, he argues. Developers bring scalability, both in terms of audience and the projects they can create using the tools.

With that said, Ruiz-Múzquiz also suggested that the influence of designers on its product is very high. His company has a ratio of one designer for every two developers working on the Penpot project, which he said was unusual in the industry — “normally it’s one to ten, one to seven, or one to eight.”

He also suggested that some of the tools competing with Penpot treat developers as an afterthought — they took too long “to pivot” and to consider both audiences, he said. By the time they made the decision to include developers, it became a challenge to change perceptions of who the tool is meant for. In contrast, he says, Penpot was designed from the beginning to accommodate both audiences and integrate them into the same workflow, without requiring separate modes or niche workflows specific to one audience group.

Penpot vs. Figma

So other than the open source license, what makes Penpot different to Figma?

Ruiz-Múzquiz explained that Penpot provides design features that stem from engineering best practices and code standards. For example, they have a “Flex Layout” and a “Grid Layout” — both of which are based on CSS standards. In other words, once you have finished doing a design in Penpot, it’s already CSS code. The goal is to minimize any ‘lost in translation’ type issues between designers and developers.

Penpot layout

Choosing a layout in Penpot.

The user interface is also familiar to developers, he said.

“The onboarding process for developers is super easy. That is, the artifacts that they can use, the vocabulary, the UI. We try to make sure that developers really feel at home, because the tool is not alien to them.”

The number one difference between Penpot and Figma, though, is that one is open source software. But if you look beyond that, Figma is one of the most impressive web standards-compliant tools in recent memory. It utilized standards like JavaScript, WebGL and WebAssembly to create a web-based tool at least as interactive as old browser plug-ins like Flash. As Figma CTO Kris Rasmussen told me back in February, modern web standards enabled Figma to “basically take what traditionally wouldn’t be possible to port to the web, and port it directly to the web and make it a bit more efficient — to really compete with what otherwise would have been locked up in desktop applications.”

Nowadays, design tools that are browser-based is table stakes. What Penpot is trying to do is one-up Figma by making the license the point of difference.

Ruiz-Múzquiz insists that Penpot provides users with full ownership and control over the technology. It also offers organizations the opportunity to self-host Penpot, ensuring they are not reliant on third-party cloud services and have complete control over their critical IP and design assets. Furthermore, the formats Penpot uses are all open standards — he mentioned SVG, CSS and JSON.

“So I would not compare openness between Penpot and other tools because they are also built on some standard technology. I think it’s about the license.”

What isn’t that different between Penpot and Figma is the use cases. Ruiz-Múzquiz said that for Penpot, use cases include brainstorming ideas, creating interactive prototypes, low-resolution UX design, high-resolution design, receiving feedback, and building design systems, components and templates. Penpot does not generate React or JavaScript components, however, because it focuses on providing production-ready code using CSS and HTML.

Developer Platform?

Recently Canva, which also competes with Figma and Penpot, announced a new developer platform. The idea is that external developers will be able to create JavaScript applications for Canva users. I asked Ruiz-Múzquiz if his company plans to open up Penpot in a similar way to developers?

He replied that they are building a dev platform, but it won’t be ready until later this year. He hinted that it will enable developers to create “first-class” applications that won’t require approval from the owner of an App Store.

“Since we’re seeing more acceleration in terms of growth for self-hosting and private instances, we’ll probably see more plugins [based] around the fact that you’re integrating that behind your firewall. So you’re doing super cool stuff without really needing approval from a SaaS-only product.”

Group Created with Sketch.
THE NEW STACK UPDATE A newsletter digest of the week’s most important stories & analyses.