
Penpot: la alternativa open source a Figma para equipos de diseño
Penpot es una plataforma de diseño open source con CSS Grid, componentes y tokens que puedes alojar en tu servidor. Qué ofrece, cuánto cuesta y cuándo conviene.
¿Qué es y por qué existe?
Penpot se presenta como “la plataforma de diseño de código abierto para equipos que necesitan colaboración escalable”. Su promesa central es que el diseño y el código del equipo no quedan atados a un proveedor: la página de precios habla de “sin dependencia del proveedor” (no vendor lock-in) y de que el equipo es dueño de sus diseños y de su código. El repositorio oficial en GitHub lo publica bajo la licencia MPL 2.0, de Mozilla.
Esa diferencia importa a organizaciones con requisitos de datos, a equipos educativos y a proyectos que quieren contribuir al código de la herramienta. Para un diseñador individual, la diferencia más visible es que la herramienta puede instalarse y modificarse.
Quien viene de Figma encontrará conceptos parecidos, pero conviene anotar las equivalencias (paneles, atajos, funciones) y probar un componente completo, con variantes y estados, antes de migrar un proyecto real.
¿Qué ofrece hoy?
Según la web oficial y el centro de ayuda:
- Wireframes, prototipos interactivos y layouts con CSS Grid y Flex. El Flex Layout está construido sobre Flexbox y el Grid Layout sobre CSS Grid, así que lo que se diseña sigue el modelo de maquetación de la web. En Grid, filas y columnas admiten unidades
fr,autoy píxeles, y las celdas pueden unirse en áreas. - Componentes, tokens de diseño y librerías compartidas. Son las piezas que un sistema de diseño necesita para mantenerse consistente.
- Tokens nativos. La documentación indica que los tokens de Penpot siguen el borrador del formato de tokens del W3C Design Tokens Community Group. Hay tipos como color, dimensión, espaciado, radio de borde, opacidad, sombra y tipografía; los tokens pueden referenciar otros (alias) y se importan o exportan como JSON, ZIP o carpetas.
- Código alineado con el diseño. La web habla de inspeccionar e integrar código que coincida con el diseño, y menciona estándares abiertos como CSS, HTML, SVG y JSON.
- Plugins y servidor MCP. El centro de ayuda tiene secciones de plugins y de un servidor MCP que conecta un cliente de IA compatible (por ejemplo Cursor o Claude Code) con tus archivos de Penpot. La documentación advierte que ese cliente puede ejecutar operaciones de escritura sobre la página abierta, y recomienda empezar con prompts de solo lectura.
Si tu equipo ya trabaja con tokens, la arquitectura de tokens define qué nombres usar, y eso aplica igual en Penpot que en otras herramientas. Para otra forma de gestionar tokens, revisa Tokens Studio.
¿Cuánto cuesta?
La página de precios de Penpot, consultada el 6 de noviembre de 2026, muestra estos planes en dólares:
| Plan | Precio |
|---|---|
| Professional | 0 dólares por usuario al mes; “gratis y con todas las funciones” |
| Unlimited | 7 dólares por editor al mes, con tope de 175 dólares al mes sin importar el tamaño del equipo |
| Enterprise | 25 dólares por miembro al mes, con gobernanza, administración centralizada y permisos por equipo |
| Private Server | 50.000 dólares al año, con infraestructura dedicada |
Unlimited y Enterprise ofrecen una prueba gratuita de 14 días. Hay descuentos para organizaciones sin fines de lucro, educativas y de código abierto, con solicitud. Los límites de miembros, almacenamiento, historial de versiones y recuperación de archivos aparecen en la tabla comparativa de la misma página; revísala antes de elegir, porque suelen pesar más que el precio.
Los precios cambian: confírmalos en la página oficial el día que decidas.
¿Y si lo quiero en mi servidor?
Penpot ofrece autoalojamiento. La guía técnica del centro de ayuda describe la instalación con Docker, con Kubernetes y con Elestio, y una sección de opciones de configuración. Es útil cuando los diseños no pueden salir de la infraestructura de la organización, por ejemplo por política interna o requisitos regulatorios.
El costo ya no es la licencia, sino el mantenimiento: actualizaciones, copias de seguridad y disponibilidad pasan a ser responsabilidad del equipo que lo aloja. Para un equipo sin personal de infraestructura, el alojamiento propio no es una ventaja automática.
¿Cuándo conviene y cuándo no?
Penpot tiene sentido cuando:
- necesitas que los datos de diseño queden en tu infraestructura;
- el presupuesto es limitado y los planes de pago no encajan;
- quieres contribuir o adaptar la herramienta;
- tu equipo trabaja con tokens y componentes y busca formatos abiertos.
No conviene cuando:
- tu equipo ya tiene años de bibliotecas y plugins de Figma que no se pueden migrar sin costo;
- no hay nadie que mantenga un servidor propio y no quieres depender del alojamiento del proveedor;
- necesitas una integración específica que solo existe en otra herramienta.
Para comparar con otras opciones, revisa Figma como referencia de la categoría y Webflow o Framer si tu objetivo es publicar un sitio y no un prototipo.
Ejemplo
Ejemplo ilustrativo: un equipo de una institución pública necesita diseñar un formulario de trámites, pero sus lineamientos no permiten guardar archivos de diseño fuera de su servidor. Instala Penpot en su infraestructura y crea una biblioteca de componentes y tokens para los campos y los mensajes de error. Los diseñadores prueban el flujo con dos personas de la comunidad y revisan el contraste de los estados de error. Como el equipo no depende de plugins externos, la migración no cuesta nada. Si hubiera tenido una biblioteca grande en otra herramienta, la decisión habría sido distinta.
Para tu equipo: revisa qué plugins y bibliotecas usas hoy. Si dependes de muchos, prueba Penpot en un proyecto pequeño antes de migrar.
Errores comunes
- Elegir por el precio sin comprobar que la herramienta cubre tu flujo.
- Autoalojar sin plan de mantenimiento: copias de seguridad, actualizaciones y acceso.
- Migrar todo a la vez en lugar de probar un proyecto.
- Ignorar los tokens y componentes y dibujar pantallas sueltas.
- Dar por hecho que es igual a Figma en plugins e integraciones.
- Dejar que un cliente de IA escriba en el archivo sin empezar por pruebas de solo lectura.
Fuentes
- Penpot, página oficial: descripción, CSS Grid y Flex, componentes, tokens y código.
- Penpot Pricing, página oficial: planes, precios en dólares, descuentos y prueba gratuita.
- Penpot en GitHub: licencia MPL 2.0.
- Penpot Help Center: Flexible Layouts: Flex Layout sobre Flexbox y Grid Layout sobre CSS Grid.
- Penpot Help Center: Design tokens: tipos de token, alias, formato del W3C e importación y exportación.
- Penpot Help Center: MCP server: servidor MCP, requisitos y advertencia sobre escritura.
- Penpot Help Center: Technical guide: instalación con Docker, Kubernetes y Elestio.