CASE STUDY
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. Metodologías ágiles. 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. Pablo Ruiz-Múzquiz, CEO y Cofundador en Penpot (Kaleidos)”
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.
“El principal reto tecnológico de este proyecto fue integrar dos plataformas con arquitecturas muy distintas, Figma y Penpot. Entender cómo Penpot gestionaba los elementos a nivel de código fue clave para poder traducir los componentes de Figma de manera eficiente. Estoy muy orgulloso del resultado, especialmente al ver cómo miles de usuarios ya están utilizando el plugin, y seguimos enfocados en optimizar y mejorar esta integración. Alejandro Sánchez, Backend developer, Runroom”
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.
“Como diseñadora de producto, estoy muy emocionada con el desarrollo del plug-in Penpot Exporter. Esta herramienta nos permite migrar archivos de Figma a Penpot sin rehacer los diseños, lo que ahorra tiempo y esfuerzo, permitiéndonos centrarnos en la creatividad y en seguir evolucionando nuestros proyectos. Además, esta migración facilita una colaboración más estrecha entre diseño y desarrollo, gracias a la integración de código nativo en Penpot, haciendo que los handoffs sean completamente fluidos. Estoy entusiasmada con la evolución de Penpot Exporter y su potencial para fomentar el desarrollo de producto open-source. Karin Dahlstedt, Product Designer, Runroom”
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.
“Este proyecto ha sido un reto y una oportunidad increíble para el equipo. Desarrollar un plugin que conecte dos herramientas tan potentes como Figma y Penpot, especialmente cuando Penpot está programado en Clojure, un lenguaje que desconocíamos, nos permitió explorar nuevas formas de trabajar y aprender. Uno de los mayores logros fue reestructurar el código, facilitando el mantenimiento futuro del plugin. Jordi Sala, CTO, Runroom”
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 AG needed a high-performance Design Team capable of combining user, business, and technology needs into a high-impact product; a platform that consolidates different services and serves as a tool for healthcare professionals globally. At Runroom, we took on the challenge of conceptualizing a solution in just 6 sprints, resulting in a successful pilot test that will serve as a reference for the development of new projects within the company.
Boehringer Ingelheim
Understanding customer behavior and motivations allows for more effective decision-making in a company's strategy. We supported Boehringer Ingelheim in creating a 100% customer-centric digital strategy for the pharmacy sales channel, based on in-depth knowledge of the pharmacist customer to enhance repeat purchases, increase loyalty, and have control over distribution in pharmacies nationwide.
Viajes El Corte Inglés
Building a strong relationship with the consumer and listening to what they have to say is essential in the post-digital era. What has been their experience at each touchpoint? What are their preferences? Only with this information can the brand react in time to optimize and personalize the user experience. For Viajes El Corte Inglés, the challenge was to find a platform that would allow them to understand and predict customer behavior, and Medallia was the answer.
Bayer
How to design a system capable of connecting a global brand with hundreds of local realities.