Figma to Penpot Plugin: A Product By and For Designers and Developers
Areas
Product Trio (Product Manager, Designer, Developer). Dual Track Agile. Investigación de usuario. Agile methodologies. Testing de conceptos. Diseño de experiencias de usuario
Penpot, the open source digital product design platform, faced a major challenge: facilitating the transition of designers working in Figma, the most used tool in the industry, to its environment without having to start their projects from scratch. We developed a plugin that allows exporting Figma files and easily adapting them in Penpot, significantly reducing friction in the adoption process. Thousands of designers and developers have already integrated this tool into their workflow, boosting the growth of the Penpot community and improving their user experience.
“Desde el primer momento notamos que Runroom comprendía el proyecto hasta el punto de (casi) poder leernos la mente y anticiparse a nuestras necesidades. Sumado a un calibre técnico de primera categoría, estuvimos siempre encantados con los avances y el resultado final.”
Penpot is an open-source web design tool with open standards to take collaboration between designers and developers to the next level.
This digital product developed by Kaleidos has experienced remarkable growth as a free and open-source alternative to Figma, occupying an important space in the digital product creation ecosystem, establishing itself as an innovative platform for designers and developers.
Its approach goes beyond interface design, with powerful integration towards the front-end, making it a valuable tool for both designers and developers.
Additionally, it has a large open-source community that drives the constant improvement of the product and fosters collaboration in its development.
“"The main technical challenge of this project was integrating two platforms with vastly different architectures: Figma and Penpot. Understanding how Penpot handles elements at the code level was key to efficiently translating Figma components. I'm incredibly proud of the result, especially seeing thousands of users already relying on the plugin, and we remain focused on optimizing and refining this integration.”
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 facilitated the export of Figma projects, allowing users to continue their work without interruptions. The goal was to reduce friction in onboarding and facilitate the adoption of Penpot among designers already using Figma.
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 outset, 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 this platform advocates.
The technical challenge was significant. The team had to face multiple decisions on how to transform Figma-exclusive elements, such as layouts and components, into formats that Penpot could interpret. Additionally, being a platform focused on both design and front-end, the final experience had to be useful and seamless for both profiles.
“As a product designer, I'm thrilled about the development of the Penpot Exporter plugin. This tool allows us to migrate Figma files to Penpot without rebuilding designs from scratch, saving time and effort so we can focus on creativity and continuous project evolution. Beyond efficiency, this migration enables closer collaboration between design and engineering, thanks to Penpot’s native code integration making handoffs completely seamless. I'm excited to see how Penpot Exporter evolves and pushes open-source product development forward.”
The plugin development was based on TypeScript and began with retrieving the original version that the Penpot team already had. From there, it was completely refactored, restructuring the code to facilitate its long-term maintenance. One of the first tasks was to separate the UX part from the backend, which was previously mixed, improving project organization and facilitating scalability.
A key aspect was working element by element from Figma, translating each component to its equivalent in Penpot. This process brought an additional challenge, as Penpot is programmed in Clojure, a language previously unknown to our team. However, through a deep understanding of how Penpot works internally, we were able to translate and adapt all compatible features between both platforms.
Work Process
Our team worked in sprint cycles under the Scrum methodology, deploying a beta version of the plugin from an early stage so the Penpot community could test it and provide feedback. This iterative approach allowed continuous product improvement, adapting it to the real needs of users.
It was a highly collaborative process, and designers played a crucial role. They not only guided key decisions about the structure and organization of 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 provide visibility into the progress and current status of the plugin, both for the Penpot community and the developers involved. This transparent approach allowed for better collaboration and constant feedback.
“This project has been both a challenge and an incredible opportunity for the team. Building a plugin that connects two powerful tools like Figma and Penpot—especially given that Penpot is built in Clojure, a language we were unfamiliar with—pushed us to explore new ways of working and learning. One of our biggest milestones was refactoring the code to ensure the plugin is easy to maintain moving forward.”
Results
The plugin was officially launched in May 2024 and has since been installed by thousands of users. This has allowed many designers and developers to easily integrate into Penpot without having to abandon their work started in Figma. The community has received the plugin enthusiastically, highlighting the ease with which existing projects can be imported and adapted to Penpot standards.
Furthermore, we continue to offer support and maintenance for the plugin, actively collaborating with Penpot to iterate on the tool and improve its performance and functionality.
This project highlights the capability of Runroom's technology team not only to develop highly technical products but to do so in perfect harmony with UX needs and the challenges of digital design. A combination of technology and design that demonstrates our ability to create innovative and scalable products.
We love technological challenges and understand the importance of design and user experience as key aspects for the success of any digital project.
More success stories
Bayer
Bayer Design System: Global Coherence, Local Flexibility
Automatización de workflows con IA
When Preparing Data Stops Stealing Time from Analysis
Effic
Elevating the Digital Product of Leaders in Energy Efficiency
Esade Business & Law School
The AI that Detects When a Campaign Deviates from the Objective
Let's talk
Tell us about your challenge, and we'll explore how to turn it into a growth opportunity together.