Cómo elegir Penpot autohospedado: Docker, colaboración y entrega a desarrollo en una herramienta de diseño open source

Guía práctica de penpot/penpot: qué es, cuándo encaja, por dónde empezar el autohospedaje, sistemas de diseño, Inspect Mode y límites de despliegue para colaboración en equipo.

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:

https://penpot.app

Para quién encaja Penpot

Penpot encaja en estos escenarios:

  1. El equipo quiere usar una herramienta de diseño open source.
  2. La empresa no quiere que todos los archivos de diseño vivan por completo en un SaaS de terceros.
  3. Diseño y frontend necesitan Inspect Mode, sistema de diseño y entrega de componentes.
  4. 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:

1
https://penpot.app/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:

1
2
3
4
5
# 1. Lee primero la documentación oficial de self-host
# 2. Prepara dominio, HTTPS, directorios persistentes y base de datos
# 3. Arranca usando el método oficial recomendado de Docker / Kubernetes
# 4. Crea la cuenta de administrador
# 5. Importa o crea espacios de equipo

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:

  1. Tamaños y espaciados.
  2. Colores y fuentes.
  3. Estructura de componentes.
  4. Design tokens.
  5. 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í:

  1. El diseñador crea un design system en Penpot.
  2. Los nombres de componentes se mantienen lo más cerca posible de la librería de componentes frontend.
  3. Colores, tamaños de fuente y espaciados se gestionan con tokens.
  4. Desarrollo consulta estilos con Inspect Mode, en vez de depender de descripciones verbales.
  5. 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.

记录并分享
Creado con Hugo
Tema Stack diseñado por Jimmy