Plugin de Figma a Penpot: un producto por y para diseñadores y desarrolladores
Penpot (Kaleidos)
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 es una herramienta de diseño web de código abierto y estándares abiertos para llevar la colaboración entre diseñadores y desarrolladores al siguiente nivel.
Este producto digital desarrollado por Kaleidos, ha experimentado un notable crecimiento como una alternativa open source y gratuita a Figma, ocupando un espacio importante en el ecosistema de creación de producto digital, consolidándose como una plataforma innovadora para diseñadores y desarrolladores.
Su enfoque va más allá del diseño de interfaces, con una integración poderosa hacia el front-end, lo que lo convierte en una herramienta valiosa tanto para diseñadores como para desarrolladores.
Además, cuenta con una gran comunidad open source que impulsa la mejora constante del producto y fomenta la colaboración en su desarrollo.
Desafío
Penpot detectó un obstáculo clave en la adopción de su herramienta: muchos diseñadores ya trabajaban con Figma, la solución más popular del mercado, y la transición entre ambas plataformas implicaba empezar proyectos desde cero.
Colaboramos con Penpot en el desarrollo de un plugin que facilitara la exportación de proyectos de Figma, permitiendo a los usuarios continuar su trabajo sin interrupciones. El objetivo era reducir la fricción en el onboarding y facilitar la adopción de Penpot entre diseñadores que ya utilizaban Figma.
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.
Solución
Desde Runroom abordamos el proyecto desde una perspectiva crossfuncional, combinando el talento de diseñadores, desarrolladores y product owners. Nuestro enfoque integró tecnología y UX desde el primer momento, alineando el desarrollo técnico con las necesidades de los usuarios. La solución fue un plugin que exporta archivos de Figma y los transforma para ser compatibles con Penpot, aprovechando los estándares de diseño open source que defiende esta plataforma.
El reto técnico no fue menor. El equipo tuvo que enfrentarse a múltiples decisiones sobre cómo transformar elementos exclusivos de Figma, como layouts y componentes, en formatos que Penpot pudiera interpretar. Además, al ser una plataforma con enfoque tanto en diseño como en front-end, la experiencia final debía ser útil y fluida para ambos perfiles.
El desarrollo del plugin se basó en TypeScript y comenzó con la recuperación de la versión original que ya tenía el equipo de Penpot. A partir de ahí, se refactorizó completamente, reestructurando el código para facilitar su mantenimiento a largo plazo. Una de las primeras tareas fue separar la parte de UX del backend, que previamente estaba mezclada, lo que mejoró la organización del proyecto y facilitó su escalabilidad.
Un aspecto clave fue trabajar elemento por elemento de Figma, traduciendo cada componente a su equivalente en Penpot. Este proceso trajo un desafío adicional, ya que Penpot está programado en Clojure, un lenguaje desconocido hasta entonces para nuestro equipo. Sin embargo, a través de un profundo entendimiento de cómo funciona Penpot internamente, pudimos ir traduciendo y adaptando todas las características compatibles entre ambas plataformas.
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.
Proceso de trabajo
Nuestro equipo trabajó en ciclos de sprints bajo metodología Scrum, desplegando una versión beta del plugin desde una fase temprana para que la comunidad de Penpot pudiera testearla y proporcionar feedback. Este enfoque iterativo permitió mejorar el producto de forma continua, adaptándolo a las necesidades reales de los usuarios.
Fue un proceso altamente colaborativo y los diseñadores jugaron un papel crucial. No solo guiaron decisiones clave sobre la estructura y organización de las capas exportadas, sino que también ayudaron a priorizar qué elementos eran esenciales en la conversión y cuáles podrían ser descartados para una mayor simplicidad.
Además, creamos un roadmap público y un backlog en GitHub, con el fin de dar visibilidad al progreso y estado actual del plugin, tanto para la comunidad de Penpot como para los desarrolladores involucrados. Este enfoque transparente permitió una mejor colaboración y feedback constante.
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.
Resultados
El plugin se lanzó oficialmente en mayo de 2024 y desde entonces ha sido instalado por miles de usuarios. Esto ha permitido a muchos diseñadores y desarrolladores integrarse fácilmente en Penpot sin tener que abandonar su trabajo iniciado en Figma. La comunidad ha recibido el plugin con entusiasmo, destacando la facilidad con la que se pueden importar proyectos ya existentes y adaptarlos a los estándares de Penpot.
Además, seguimos ofreciendo soporte y mantenimiento al plugin, colaborando activamente con Penpot para iterar sobre la herramienta y mejorar su rendimiento y funcionalidad.
Este proyecto destaca la capacidad del equipo de tecnología de Runroom no solo para desarrollar productos altamente técnicos, sino para hacerlo en perfecta sintonía con las necesidades de UX y los retos del diseño digital. Una combinación de tecnología y diseño que demuestra nuestra capacidad para crear productos innovadores y escalables.