Penpot frente a Figma: lo que cambia de verdad la alternativa open-source
Figma y Penpot comparten el mismo paradigma: diseño vectorial en el navegador, colaboración en tiempo real, componentes reutilizables y handoff a desarrollo integrado. La diferencia fundamental está en el modelo de datos: Figma lo almacena todo en sus servidores en un formato propietario; Penpot utiliza SVG estándar como formato nativo, lo que significa que sus archivos de diseño son legibles por cualquier editor SVG y no dependen de ningún proveedor. Para un equipo que autoaloja su código en Gitea, su documentación en Docmost y su comunicación en Mattermost, alojar también su herramienta de diseño en ServOrbit es la conclusión lógica.
Lo que Penpot ofrece de serie
- Diseño vectorial en tiempo real: varios diseñadores a la vez sobre el mismo archivo, con cursores visibles y comentarios contextuales en las capas.
- Componentes y bibliotecas compartidas: cree design systems y publíquelos en bibliotecas compartidas entre proyectos.
- Handoff a desarrollo nativo: inspector CSS en vivo, exportación de assets, anotaciones y guías de spacing generadas automáticamente a partir de los diseños.
- Prototipado interactivo: enlace frames con transiciones y simule la navegación por el prototipo sin salir de la herramienta.
- Rejillas flexibles y restricciones: layouts automáticos, rejillas CSS nativas y restricciones de redimensionado idénticas a las de Figma.
- Formato SVG abierto: sus archivos son portables e importables en Inkscape, Illustrator o cualquier editor vectorial.
- Integración MCP: conecte Penpot a su asistente de IA para generar componentes a partir de descripciones de texto (v2.17).
Arquitectura: 6 contenedores, un único punto de entrada HTTP
Penpot es una pila moderna compuesta por: penpot-postgres (PostgreSQL 15, persistencia de proyectos y usuarios), penpot-valkey (Valkey 8, caché de sesiones y pub/sub en tiempo real), penpot-backend (Clojure, API y lógica de negocio), penpot-exporter (motor de exportación PNG/PDF/SVG mediante navegador headless), penpot-mcp (servidor MCP para la integración con IA) y penpot-frontend (proxy HTTP en el puerto 9001, que sirve la app React y enruta las peticiones hacia el backend). La arquitectura está pensada para exponerse tras un reverse proxy: basta con un único puerto 9001, ya que el frontend actúa de enrutador interno. En un VPS ServOrbit de 4 GB de RAM, la pila completa consume unos 800 MB en reposo — el resto queda disponible para sus otros servicios.
Despliegue en 6 pasos
Contrate un VPS ServOrbit
2 GB de RAM es el mínimo absoluto; 4 GB es lo recomendado en producción para que la exportación de archivos complejos (PDF, PNG de alta resolución) no sature el contenedor exporter. Ubuntu 24.04 LTS es la plantilla por defecto.
Apunte un subdominio a su VPS
Cree un registro A para
design.yourdomain.comhacia la IP del VPS. El aprovisionador de ServOrbit genera un certificado Let's Encrypt automáticamente. Penpot desactiva las cookies de sesión seguras en HTTP: un dominio HTTPS es imprescindible para la colaboración multiusuario en producción.Instale desde el marketplace
En la consola ServOrbit: Marketplace → Colaboración → Penpot → Desplegar. El job de AWX arranca los 6 contenedores, genera
APP_SECRETy configuraPENPOT_PUBLIC_URIcon su dominio. La interfaz está accesible enhttps://design.yourdomain.comen 2-3 minutos.Cree la primera cuenta de administrador
El registro está abierto por defecto (
enable-registration). Vaya ahttps://design.yourdomain.comy cree su cuenta: el primer usuario creado obtiene los permisos de administrador. Desde el panel de administración (/api/rpc/command/get-profile) podrá después desactivar los registros públicos e invitar a sus colaboradores por correo.Importe sus archivos de Figma
Penpot importa de forma nativa los archivos
.fig(exportados desde Figma). En un proyecto Penpot, haga clic en Import → Figma file y seleccione su exportación. Los frames, componentes y estilos se convierten en elementos Penpot — espere algunas pérdidas menores en los plugins específicos de Figma, pero la estructura general se conserva.Conectarse por primera vez
Abra la URL y haga clic en «Crear una cuenta»: el registro está abierto y la verificación por correo desactivada, así que su cuenta queda activa de inmediato. Hágalo cuanto antes.
Integrar Penpot en su flujo de trabajo Git
El formato SVG nativo de Penpot abre posibilidades que Figma no puede ofrecer: sus diseños son archivos de texto versionables. Exporte un componente en SVG, súbalo a su repositorio de Gitea y su pipeline de CI podrá detectar las regresiones visuales mediante diffs de SVG. Los desarrolladores del equipo pueden inspeccionar los cambios de diseño en una PR como cualquier otro código. Este enfoque «design-as-code» resulta especialmente potente para los design systems: una modificación de un token de color en Penpot genera un diff SVG inmediatamente legible en Gitea.
Penpot MCP: genere diseños desde su asistente de IA
Desde la v2.17, Penpot incorpora un servidor MCP (penpot-mcp) que expone sus proyectos a cualquier cliente compatible con MCP. Configure su asistente (Claude, Cursor, Continue) con la URL MCP de su instancia Penpot y podrá pedirle «crea un botón primario de 40px, color #6765A2, border-radius 8px»: el asistente genera directamente el componente en su archivo de diseño abierto. Es el bucle diseño→código más corto disponible en self-hosted.
