penpot/penpot es una herramienta de diseño open source. Su posición es cercana a Figma, pero pone más énfasis en código abierto, autohospedaje y colaboración entre diseño y código. Encaja con equipos que quieren mantener bajo su control los activos de diseño, los componentes y el flujo de entrega.
Repositorio del proyecto:
https://github.com/penpot/penpot
Sitio oficial:
Para quién encaja Penpot
Penpot encaja en estos escenarios:
- El equipo quiere usar una herramienta de diseño open source.
- La empresa no quiere que todos los archivos de diseño vivan por completo en un SaaS de terceros.
- Diseño y frontend necesitan Inspect Mode, sistema de diseño y entrega de componentes.
- El equipo quiere construir normas de diseño a largo plazo basadas en design tokens, components y variants.
Si solo necesitas dibujar algo de forma puntual como usuario individual, la versión online es más sencilla. El autohospedaje tiene más sentido para uso continuo en equipo.
Punto de partida para autohospedar
El README no pega un Docker Compose completo en la portada, sino que apunta a la documentación oficial de self-host:
|
|
Para un despliegue real, conviene seguir la documentación oficial de Docker o Kubernetes en vez de copiar un compose antiguo de internet. Herramientas colaborativas como Penpot normalmente implican más de un contenedor. También pueden requerir base de datos, almacenamiento de objetos, tareas en segundo plano y servicio de correo.
Un flujo prudente de autohospedaje sería:
|
|
Cómo usarlo para entrega a desarrollo
Para desarrolladores, una de las partes más útiles de Penpot es Inspect Mode. Cuando el diseñador termina una pantalla, desarrollo puede revisar:
- Tamaños y espaciados.
- Colores y fuentes.
- Estructura de componentes.
- Design tokens.
- Componentes reutilizables y variants.
Esto es más estable que anotar capturas de pantalla y funciona mejor para colaboración entre varias personas.
Flujo recomendado para equipos
Puedes aterrizarlo así:
- El diseñador crea un design system en Penpot.
- Los nombres de componentes se mantienen lo más cerca posible de la librería de componentes frontend.
- Colores, tamaños de fuente y espaciados se gestionan con tokens.
- Desarrollo consulta estilos con Inspect Mode, en vez de depender de descripciones verbales.
- Antes de versiones grandes, exporta o respalda los archivos de diseño.
Notas
Penpot es un sistema colaborativo, no una herramienta de archivo único. Al autohospedarlo hay que pensar en actualizaciones, copias de seguridad, permisos, correo, HTTPS y almacenamiento. Conviene probar el flujo completo en un entorno de pruebas antes de migrar los activos reales de diseño del equipo.