Figma to Penpot Plugin: A Product by and for Designers and Developers
Penpot (Kaleidos)
From the very beginning, we noticed that Runroom understood the project so well that they could (almost) read our minds and anticipate our needs. Combined with top-tier technical expertise, we were consistently thrilled with the progress and the final outcome.
Penpot is an open-source web design tool built on open standards, designed to take collaboration between designers and developers to the next level. This digital product, developed by Kaleidos, has seen remarkable growth as a free, open-source alternative to Figma, carving out a significant place in the digital product creation ecosystem and establishing itself as an innovative platform for designers and developers alike.
Its approach goes beyond interface design, offering powerful integration with front-end development, making it a valuable tool for both designers and developers. Additionally, Penpot boasts a large open-source community that drives continuous product improvement and fosters collaboration in its development.
Challenge
Penpot identified a key obstacle in the adoption of its tool: many designers were already working with Figma, the most popular solution on the market, and transitioning between the two platforms meant starting projects from scratch. We collaborated with Penpot in developing a plugin that enabled the seamless export of Figma projects, allowing users to continue their work without interruptions. The goal was to reduce friction during onboarding and make it easier for designers who were already using Figma to adopt Penpot.
The main technological challenge of this project was integrating two platforms with very different architectures, Figma and Penpot. Understanding how Penpot managed elements at the code level was key to efficiently translating Figma components. I'm very proud of the result, especially seeing how thousands of users are already using the plugin, and we remain focused on optimizing and improving this integration
Solution
At Runroom, we approached the project from a cross-functional perspective, combining the talents of designers, developers, and product owners. Our approach integrated technology and UX from the start, aligning technical development with user needs. The solution was a plugin that exports Figma files and transforms them to be compatible with Penpot, leveraging the open-source design standards that Penpot champions.
The technical challenge was significant. The team had to make numerous decisions on how to transform Figma-specific elements, such as layouts and components, into formats that Penpot could interpret. Additionally, since Penpot focuses on both design and front-end development, the final experience needed to be seamless and valuable for both designers and developers.
The development of the plugin was based on TypeScript and began by retrieving the original version that the Penpot team already had. From there, it was fully refactored, restructuring the code to ensure long-term maintainability. One of the first tasks was to separate the UX from the backend, which had previously been intertwined, improving project organization and facilitating scalability.
A key aspect was working through each Figma element, translating every component to its equivalent in Penpot. This process posed an additional challenge, as Penpot is programmed in Clojure, a language our team was unfamiliar with at the time. However, by gaining a deep understanding of how Penpot functions internally, we were able to translate and adapt all compatible features between the two platforms.
This project has been both an incredible challenge and opportunity for the team. Developing a plugin that connects two powerful tools like Figma and Penpot, especially when Penpot is programmed in Clojure, a language we were unfamiliar with, allowed us to explore new ways of working and learning. One of the biggest achievements was restructuring the code, making future maintenance of the plugin much easier.
Work Process
Our team worked in sprint cycles using the Scrum methodology, deploying a beta version of the plugin early on for the Penpot community to test and provide feedback. This iterative approach allowed us to continuously improve the product, adapting it to the real needs of users.
It was a highly collaborative process, with designers playing a crucial role. They not only guided key decisions about the structure and organization of the exported layers but also helped prioritize which elements were essential in the conversion and which could be discarded for greater simplicity.
Additionally, we created a public roadmap and a backlog on GitHub to give visibility to the plugin's progress and current status, both for the Penpot community and the developers involved. This transparent approach enabled better collaboration and constant feedback.
As a product designer, I’m really excited about the development of the Penpot Exporter plugin. This tool allows us to migrate Figma files to Penpot without having to redo the designs, saving time and effort and letting us focus on creativity and evolving our projects. Moreover, this migration fosters closer collaboration between design and development, thanks to Penpot’s native code integration, making handoffs completely seamless. I’m thrilled about the future of Penpot Exporter and its potential to drive the growth of open-source product development.
Results
The plugin was officially launched in May 2024 and has since been installed by thousands of users. This has enabled many designers and developers to easily transition to Penpot without having to abandon their work started in Figma. The community has enthusiastically welcomed the plugin, highlighting how effortlessly existing projects can be imported and adapted to Penpot's standards.
We continue to provide support and maintenance for the plugin, actively collaborating with Penpot to iterate on the tool and improve its performance and functionality.
This project showcases Runroom’s technology team’s ability not only to develop highly technical products but to do so in perfect alignment with UX needs and the challenges of digital design. It’s a combination of technology and design that demonstrates our capacity to create innovative and scalable products.