Plataforma de diseño open source

Penpot: Plataforma de diseño open source para equipos de producto

Diseño, código y colaboración en tiempo real con estándares abiertos y autoalojamiento completo

Vídeo tutorial en YouTube

Mira el vídeo completo sobre cómo instalar y usar Penpot: Plataforma de diseño open source para equipos de producto en el canal GENBYTE:

Clickea la miniatura para ir a YouTube

¿Qué es Penpot: Plataforma de diseño open source para equipos de producto?

Penpot es una plataforma de diseño y prototipado open source construida para equipos que desarrollan productos digitales a escala. Su fortaleza principal radica en ofrecer propiedad total de la infraestructura de diseño: al ser open source y diseñada para autoalojamiento, permite a los equipos mantener control completo sobre su entorno de diseño, cumpliendo requisitos estrictos de compliance y gobernanza. Funciona tanto en navegador como en servidores propios, y trabaja con estándares abiertos como SVG, CSS, HTML y JSON. La colaboración en tiempo real, los Design Tokens nativos, el servidor MCP para flujos bidireccionales entre diseño y código, una API abierta y sistema de plugins, junto con CSS Grid y Flex Layout, convierten a Penpot en una plataforma full-stack para sistemas de diseño escalables y procesos de desarrollo integrados.

Penpot une diseño y código mediante estándares abiertos, autoalojamiento y colaboración en tiempo real, eliminando el vendor lock-in y permitiendo que los diseños sean legibles por desarrolladores e IA a través de su servidor MCP.

Características principales

Autoalojamiento y propiedad total

Despliegue en servidores propios con control total de datos, cumplimiento normativo y sin dependencia de proveedores externos.

Estándares abiertos nativos

Funciona con SVG, CSS, HTML y JSON como formatos base, permitiendo que los diseños se expresen como código legible y portable.

Colaboración en tiempo real

Edición simultánea multiusuario con sincronización instantánea, soportando tanto trabajo en equipo como modo individual.

Design Tokens nativos

Sistema de tokens de diseño de primera clase que sirve como única fuente de verdad entre diseño y desarrollo, garantizando consistencia y escalabilidad en sistemas de diseño complejos.

Servidor MCP (Model Context Protocol)

Permite flujos de trabajo bidireccionales entre diseño y código, habilitando automatización, flujos impulsados por IA e integraciones programables.

API abierta y sistema de plugins

API accesible mediante tokens de acceso, webhooks y marketplace de plugins para extender capacidades e integrar con herramientas existentes.

CSS Grid y Flex Layout

Diseño de interfaces responsivas que se comportan como código real desde el inicio, usando motores de layout nativos del navegador.

Modo inspección (Inspect Mode)

Acceso instantáneo a código SVG, CSS y HTML listo para usar, acelerando la transferencia diseño-desarrollo.

Sistemas de diseño completos

Componentes, variantes y tokens integrados para crear bibliotecas reutilizables, consistentes y escalables across proyectos y plataformas.

Plan Enterprise

Consola de administración centralizada, SSO con proveedores de identidad, permisos avanzados y gobernanza para organizaciones que escalan across múltiples equipos, disponible en cloud y autoalojado.

Requisitos del sistema

Docker y Docker Compose para despliegue containerizado
Kubernetes (opcional) para orquestación en clúster
Acceso a registro de imágenes de Penpot (Docker Hub / GitHub Container Registry)
Base de datos PostgreSQL (gestionada internamente en despliegue estándar)
Almacenamiento persistente para assets y datos de usuario
Puertos de red disponibles (por defecto 3450 para API/frontend)
Recursos mínimos: 2 CPU, 4 GB RAM recomendados para instancias pequeñas

Instalación con Docker Compose

Despliegue con Docker Compose (recomendado)

Penpot proporciona guías oficiales de autoalojamiento en su documentación técnica. El despliegue estándar utiliza Docker Compose con múltiples servicios (frontend, backend, base de datos, almacenamiento). Consulte la guía oficial para el archivo docker-compose.yml completo y variables de entorno requeridas.

# Consulte la guía oficial en:
# https://help.penpot.app/technical-guide/getting-started/
# https://penpot.app/self-host

# Ejemplo genérico de inicio (valores reales en docs oficiales):
docker compose up -d

Despliegue en Kubernetes

Disponible mediante charts Helm oficiales o manifiestos Kubernetes. Requiere configuración de ingress, almacenamiento persistente y secrets para variables sensibles.

# Consulte la guía oficial en:
# https://help.penpot.app/technical-guide/getting-started/
# Repositorio Helm: https://github.com/penpot/penpot-helm

Proveedores gestionados (Elestio y otros)

Instalación en un clic mediante proveedores como Elestio que automatizan el despliegue y mantenimiento.

# Ver opciones en: https://penpot.app/self-host

Acceder al proyecto

Acceso web (autoalojado)

Tras el despliegue, la interfaz está disponible en el puerto configurado (por defecto 3450 según .env.example: http://localhost:3450). En producción, configure un dominio y TLS mediante reverse proxy (nginx, Traefik, Caddy).

Acceso SaaS (Penpot Cloud)

Disponible directamente en https://design.penpot.app sin necesidad de infraestructura propia. Requiere registro de cuenta.

API y tokens de acceso

La API REST está expuesta en el mismo host/puerto. Genere tokens de acceso personal desde la interfaz de usuario para integraciones, webhooks y el servidor MCP.

Casos de uso

Diseño de interfaces de usuario y prototipado interactivo para productos digitales
Construcción y mantenimiento de sistemas de diseño escalables con tokens, componentes y variantes
Colaboración en tiempo real entre diseñadores, desarrolladores y stakeholders
Transferencia diseño-desarrollo sin fricción mediante modo inspección (SVG, CSS, HTML)
Automatización de flujos de trabajo y generación de código mediante servidor MCP e IA
Integración en pipelines CI/CD y toolchains de desarrollo via API, webhooks y plugins
Autoalojamiento para cumplimiento de soberanía de datos, compliance y gobernanza corporativa
Equipos distribuidos que requieren plataforma unificada de diseño sin vendor lock-in

Configuración avanzada

Configuración de variables de entorno

Las variables principales se definen en .env (basado en .env.example). Incluyen URI de API, tokens de acceso, configuración de base de datos, almacenamiento (S3/compatible), proveedores OAuth/SSO, límites de subida, y ajustes de rendimiento. Consulte la guía técnica para lista completa.

# Ejemplo basado en .env.example
PENPOT_API_URI=http://localhost:3450
PENPOT_ACCESS_TOKEN=your-access-token-here
# Variables adicionales en docs oficiales:
# DATABASE_URL, REDIS_URL, STORAGE_BACKEND, S3_*, OAUTH_*, SMTP_*, etc.

Integración SSO y Enterprise

El plan Enterprise soporta SAML 2.0, OIDC y LDAP para autenticación centralizada. Requiere configuración en consola de administración y variables de entorno específicas del proveedor de identidad.

# Variables típicas SSO (consulte docs Enterprise)
PENPOT_SSO_ENABLED=true
PENPOT_SSO_PROVIDER=oidc
PENPOT_OIDC_CLIENT_ID=…
PENPOT_OIDC_CLIENT_SECRET=…
PENPOT_OIDC_ISSUER_URL=…

Servidor MCP y automatización

El servidor MCP permite exponer capacidades de Penpot a agentes de IA y scripts. Requiere habilitación y token de API con permisos adecuados. Documentación en https://penpot.app/penpot-mcp-server y https://help.penpot.app/mcp/#quick-start

# Habilitación MCP (ejemplo conceptual)
PENPOT_MCP_ENABLED=true
PENPOT_MCP_TOKEN=mcp-specific-token
# Uso via cliente MCP compatible

Plugins personalizados

Desarrolle plugins usando el SDK de Penpot (TypeScript/JavaScript). Los plugins pueden extender la UI, manipular objetos, integrar APIs externas y automatizar tareas. Publique en Penpot Hub o instale localmente.

# Estructura básica plugin
# manifest.json + main.ts + build (esbuild/vite)
# Consulte: https://penpot.app/penpothub/plugins

Gestión y mantenimiento

Actualización de versión

Actualice las imágenes Docker a la versión objetivo (ej. 2.17.0) y ejecute migraciones de base de datos si aplica. Revise CHANGES.md para breaking changes. En Docker Compose: docker compose pull && docker compose up -d. En Kubernetes, actualice el chart Helm o imagen del deployment.

# Docker Compose
docker compose pull
docker compose up -d

# Verificar logs
docker compose logs -f

Backups y restauración

Realice backups periódicos de la base de datos PostgreSQL (pg_dump) y del almacenamiento de assets (volumen Docker / bucket S3). Pruebe restauración en entorno de staging. La frecuencia depende de criticidad (diario/semanal).

# Backup DB (ejemplo)
docker exec penpot-postgres pg_dump -U penpot penpot > backup_$(date +%F).sql

# Backup assets (volumen local)
tar -czf assets_backup_$(date +%F).tar.gz /path/to/penpot/assets

Monitoreo y logs

Centralice logs de contenedores (stdout/stderr) mediante Loki, ELK o similar. Monitoree métricas clave: latencia API, uso CPU/RAM, conexiones DB, almacenamiento. Configure alertas en Prometheus/Grafana o herramienta equivalente.

# Ejemplo labels Docker para Loki
docker run –log-driver=json-file –log-opt labels=service
–label service=penpot-backend …

Limpieza y mantenimiento rutinario

Elimine imágenes Docker no usadas, rotación de logs, verificación de espacio en disco, revisión de accesos y tokens expirados. Ejecute tareas de mantenimiento de PostgreSQL (VACUUM, REINDEX) según carga.

# Limpieza Docker
docker image prune -a
docker volume prune

# Rotación logs (logrotate example)
/var/lib/docker/containers/*/*.log {
daily
rotate 7
compress
missingok
}

Stack técnico

Clojure (backend)
ClojureScript (frontend)
React (interfaz de usuario)
PostgreSQL (base de datos principal)
Redis (caché y pub/sub para colaboración en tiempo real)
Docker / Docker Compose (despliegue)
Kubernetes / Helm (orquestación opcional)
pnpm (gestor de paquetes frontend)
ESBuild (bundler)
Playwright (testing E2E)
SVG / CSS / HTML / JSON (formatos nativos)
Model Context Protocol (MCP) para integración IA

Referencias oficiales

Repositorio oficial GitHub: https://github.com/penpot/penpot
Sitio web oficial: https://penpot.app
Documentación técnica (autoalojamiento, arquitectura, guías): https://help.penpot.app/technical-guide/
Guía de inicio rápido autoalojado: https://help.penpot.app/technical-guide/getting-started/
Opciones de autoalojamiento (Docker, Kubernetes, Elestio): https://penpot.app/self-host
Design Tokens nativos: https://penpot.dev/collaboration/design-tokens
Servidor MCP (Model Context Protocol): https://penpot.app/penpot-mcp-server
API y webhooks: https://penpot.app/integrations-api
Comunidad y foro de soporte: https://community.penpot.app
Canal YouTube oficial (tutoriales, dev diaries): https://www.youtube.com/@Penpot
Learning Center: https://penpot.app/learning-center
Guía de contribución: https://help.penpot.app/contributing-guide/
Licencia MPL-2.0: https://www.mozilla.org/en-US/MPL/2.0/

Apoya el canal GENBYTE

¿Te ha sido útil este contenido?

Suscríbete a YouTube
Newsletter GENBYTE
Ko-fi
Contacto: [email protected]