Cómo instalar Penpot en Docker - Herramienta de diseño colaborativa autohospedada en Docker

-
Penpot | Design Tool | Docker

Penpot: Herramienta de diseño colaborativa open source autohospedada en Docker

Diseño y prototipado colaborativo. Alternativa Figma/Sketch open source. Editor vectorial profesional. Diseño tokens. Handoff a código. SVG nativo. Libre y self-hosted.

¿Qué es Penpot?


Penpot es un herramienta de diseño y prototipado colaborativa completamente open source que funciona en navegador, diseñada como alternativa a Figma, Sketch, o Adobe XD. A diferencia de herramientas propietarias, Penpot es 100% self-hostable, libre para usar, y construida sobre estándares web abiertos (SVG, CSS, HTML, JSON).

Arquitectura moderna: Backend Clojure + PostgreSQL. Frontend React/ClojureScript. Comunicación real-time via WebSockets. Todo open source (Mozilla Public License v2).

Características principales: Editor vectorial completo (dibujo, shapes, texto, importar SVG). Colecciones y libraries de componentes reutilizables. Prototipado interactivo con animaciones y transiciones. Design tokens integrados (colores, tipografía, espaciado) con sincronización programática. Inspección pixel-perfect para developers con CSS/SCSS exportable. Colaboración real-time (múltiples usuarios editando simultáneamente). Handoff a código: developers ven medidas, colores, especificaciones directamente. Tier gratuito ilimitado (sin restricción de proyectos/archivos en cloud). Self-hosting: deploy en Docker, Kubernetes, cualquier infraestructura. Autenticación flexible (email/password, Google, GitHub, GitLab, OIDC, LDAP). API REST + webhooks para integraciones custom.

Para equipos diseño + development: Alternativa Figma completamente soberana. Control total. Libre. Self-hosted. Design tokens. Developer handoff perfecto.

Características principales

Editor vectorial completo

Dibujar, shapes, texto, paths. Herramientas profesionales. SVG nativo.

Colaboración real-time

Múltiples usuarios editando simultáneamente. Cursores visibles. Sincronización baja latencia.

Components & Libraries

Componentes reutilizables. Overrides. Nested components. Versioning.

Design Tokens

Sistema completo de tokens. Colores, tipografía, espaciado. Sincronización programática.

Prototipado interactivo

Flujos interactivos. Animaciones. Transiciones. Sin plugins requeridos.

Developer handoff

Inspect panel pixel-perfect. CSS/SCSS exportable. Medidas, colores, especificaciones.

Self-hosted

Docker, Kubernetes, tu infraestructura. Control total. Soberanía datos.

Tier gratuito ilimitado

Sin límite de proyectos, archivos, miembros en cloud. Raro en design tools.

Open source

Mozilla Public License v2. Código auditable. Customizable. Comunidad.

Multi-plataforma

Web (browser-based). Responsive. Funciona en Windows, Mac, Linux.

Autenticación flexible

Email/password, OAuth (Google, GitHub, GitLab), OIDC, LDAP/SSO.

API + Webhooks

REST API para integraciones. Webhooks para eventos. Extensible.

Requisitos del sistema

  • Docker & Docker Compose
  • 4-8 GB RAM (Clojure backend + PostgreSQL + Redis)
  • 10+ GB espacio disco (BD + archivos diseño)
  • Puerto 9001 (frontend, configurable)
  • Puerto 6063 (backend, interno)
  • PostgreSQL 12+ (incluido en docker-compose)
  • Redis (incluido en docker-compose)
  • Navegador moderno (Chrome, Firefox, Safari, Edge)
Atención: Penpot consume más recursos que herramientas ligeras. 4GB RAM es mínimo, 8GB+ recomendado para producción con múltiples usuarios.

Instalación con Docker Compose

Paso 1: Descargar docker-compose de Penpot

git clone https://github.com/penpot/penpot.git cd penpot/docker/images

Paso 2: Configurar variables de entorno

cp .env.example .env nano .env # Edita estas variables clave: # PENPOT_FLAGS: enable-secure-session-cookies # SECRET_KEY: genera con: python3 -c "import secrets; print(secrets.token_hex(32))" # PENPOT_SMTP_FROM_ADDRESS: tu email

Paso 3: Iniciar Penpot

docker compose up -d # Esperar a que PostgreSQL y Redis arranquen (30-60 segundos) docker compose logs -f penpot-backend

Acceder

http://localhost:9001 - Dashboard Penpot

Paso 4: Crear cuenta admin

  1. Click "Sign Up"
  2. Email y contraseña
  3. Verifica email (si SMTP configurado)
  4. ¡Listo para diseñar!

Primeros pasos

1. Crear proyecto

  1. Dashboard → "Create New Project"
  2. Nombre: "Mi proyecto"
  3. Crear

2. Crear archivo de diseño

  1. Dentro del proyecto → "Create New File"
  2. Aparece canvas blanco
  3. Listo para diseñar

3. Usar herramientas de dibujo

  1. Left sidebar: Rectangle, Circle, Text, Line, etc
  2. Click y arrastra en canvas para dibujar
  3. Right panel: edita propiedades (color, tamaño, posición)

4. Crear componentes reutilizables

  1. Dibuja un elemento (ej: botón)
  2. Right click → "Create component"
  3. Ahora puedes instanciar ese componente múltiples veces
  4. Cambios al main = actualiza todas las instancias

5. Usar Design Tokens

  1. Right panel → "Tokens"
  2. Define colores, tipografía, espaciado
  3. Úsalos en diseños
  4. Cambio en token = actualiza automáticamente

6. Crear prototipo interactivo

  1. Crea múltiples páginas/frames
  2. Selecciona elemento → "Interaction"
  3. Define destino y animación
  4. Preview (play button) para testear

7. Exportar para developers

  1. Selecciona elemento
  2. Right panel → "Inspect"
  3. Developers ven medidas, colores, CSS
  4. Copia/pega CSS directamente

8. Invitar colaboradores

  1. Project Settings → "Members"
  2. Invita por email
  3. Asigna rol: Owner, Editor, Viewer
  4. Colaboran en tiempo real

Casos de uso

  • Equipos diseño + desarrollo: Colaboran en tiempo real. Design tokens. Developer handoff perfecto.
  • Startups: Herramienta gratuita ilimitada. Self-hosted barato. Control total.
  • Agencias: Self-hosted en servidor propio. Multi-cliente. Gobierno datos.
  • Empresas con compliance estricto: GDPR, HIPAA, etc. Datos 100% locales. Auditable.
  • Design systems: Components + design tokens. Gobernanza. Escala.
  • Open source communities: Herramienta libre. Contribuir. Sin vendor lock-in.

HTTPS con Caddy (producción)

Caddyfile

penpot.tudominio.com { reverse_proxy localhost:9001 }

Actualizar .env

PENPOT_PUBLIC_URI=https://penpot.tudominio.com PENPOT_OIDC_REDIRECT_URI=https://penpot.tudominio.com/auth/oauth/redirect

Acceso remoto seguro

https://penpot.tudominio.com con HTTPS automático de Caddy

Gestión y mantenimiento

Ver logs

docker compose logs -f penpot-backend docker compose logs -f penpot-frontend

Backup de base de datos PostgreSQL

docker compose exec penpot-postgres pg_dump -U penpot -d penpot > penpot-backup-$(date +%Y%m%d).sql

Restore de backup

docker compose exec -i penpot-postgres psql -U penpot -d penpot < penpot-backup-20260522.sql

Reiniciar servicios

docker compose restart

Actualizar a versión más reciente

docker compose pull docker compose up -d # Los cambios de BD se aplican automáticamente

Monitorear consumo de recursos

docker stats penpot-backend penpot-frontend penpot-postgres

Crear usuario admin desde terminal

docker compose exec penpot-backend python manage.py # Script interactivo para crear/modificar usuarios sin UI

Comparativa con alternativas

vs Figma

Penpot gana: Self-hosted, gratuito, open source, design tokens mejores. Figma gana: Más features, comunidad masiva, plugins, más polido.

vs Sketch

Penpot gana: Web-based, colaboración, gratuito. Sketch gana: Solo macOS, más plugins, comunidad macOS.

vs Adobe XD

Penpot gana: Gratuito, self-hosted, open source. XD gana: Animaciones avanzadas, prototipos complejos.

vs Webflow/Framer

Penpot gana: Design tokens, no vendor lock-in. Webflow/Framer gana: Deploy automático, más features dev.

Mejor para: Equipos que quieren alternativa Figma soberana. Self-hosted. Control. Gratis. Open source. Design-to-code fluido.

Referencias oficiales

Apoya el canal GENBYTE

Suscríbete al canal de YouTube Suscríbete a la newsletter semanal Invítame a un Ko-fi genbyte@proton.me

Sígueme en mis redes sociales

Telegram Discord YouTube GitHub Blog Twitter

Comentarios

Publicar un comentario

Entradas populares de este blog

Cómo Instalar y configurar SERVIDOR VPN WIREGUARD en MIKROTIK 🔐 #VPN #Wireguard #Mikrotik #RouterOS

-
Imagen
Wireguard en Mikrotik Breve Explicación de Wireguard ¿Qué es WireGuard VPN? WireGuard es un nuevo protocolo de VPN. No se trata de un software, sino de un conjunto de instrucciones que permite crear VPNs de forma muy sencilla. Ha sido desarrollada como una alternativa a IPsec, OpenVPN y similares VPNs, pero más rápida y sencilla de usar. En esencia, WireGuard está basado en ideas del protocolo IPsec. WireGuard es una VPN extremadamente simple, pero rápida y moderna que utiliza criptografía de última generación. Su objetivo es ser más rápido, más simple, y más versátil que IPSec, evitando al mismo tiempo el enorme dolor de cabeza (sobre todo en redes con NAT). Pretende ser considerablemente más eficaz que OpenVPN. WireGuard está diseñado como una VPN de propósito general para ejecutarse en interfaces embebidas, apto para muchas circunstancias diferentes. Se ejecuta sobre el protocolo UDP, por lo tanto es considerado un túnel de capa 3. ¿Cómo funciona Wireguard VPN? WireGuard es un proto...
Leer más

Cómo instalar y configurar DSM SYNOLOGY 7.2.2 en PC | Guía completa, instalación, RAID 1, SMB

-
Imagen
Instalación y puesta en marcha de Synology DSM 7.2.2 en PC Vídeo ACTUALIZADO, NUEVA VERSIÓN DEL ARC LOADER:  https://youtu.be/LgghogL-UCA https://genbyte.blogspot.com/2025/08/como-convertir-pc-en-synlogy-con-6-tb.html ----- Proceso de instalación y puesta en marcha de sistema operativo DSM Synology versión 7.2.2 en un PC, concretamente un HP 800 G1 EliteDesk. El PC tendrá 3 discos SSD, uno de 120 GB para el S.O. DSM, y otros dos de 240GB cada en RAID 1 para los Datos. Los 3 dicos duros conectados al PC mediante cables SATA. Lo primero que necesitamos es descargar la imagen bootloader ARC, desde el siguiente repositorio de Gothub, también necesitamos Rufus, en este momento, es la versión 4.6. Imagen ARC:  https://github.com/AuxXxilium/arc Imagen usado en el vídeo 1.1.29:  https://github.com/AuxXxilium/arc/releases/tag/1.1.29 Rufus:  https://rufus.ie/es/ Después de descargar la imagen ARC.img, conectamos nuestro primer disco SSD de 120GB por cable o conector SATA-USB y...
Leer más

Cómo INSTALAR y CONFIGURAR OpenVPN en MIKROTIK. Guía completa paso a paso.

-
Imagen
Cómo INSTALAR y CONFIGURAR OpenVPN en MIKROTIK. Guía completa paso a paso. Vídeo tutorial paso a paso en Youtube Desarrollo Ilustración: Diagrama RED Creación de Redes (Address) ----------------------------------------------- WAN 192.168.1.0/24 LAN 192.168.88.0/24 VPN 192.168.100.0/24 Creación del Rango VPN ------------------------ 192.168.100.1 - 192.168.100.100 Creación de los Certificados ------------------------------- Los certificados que vamos a crear a continuación tendrán una validez de 10 años; days-valid=3650 Crear certificado CA ---------------------- /certificate add name=CA-tpl country="" state="" locality="" organization="" unit="" common-name="CA" key-size=4096 days-valid=3650 key-usage=crl-sign,key-cert-sign /certificate sign CA-tpl ca-crl-host=127.0.0.1 name="CA" Crear certificado Server -------------------------- /certificate add name=SERVER-tpl country="" state="" locality=...
Leer más