Penpot self-hosted : alternative Figma open-source — déploiement Coolify + Postgres 2026

📍 Article principal de la série : Productivité PME en self-hosted : la stack open-source 2026

Cet article fait partie de la série « Productivité self-hosted ». Pour la vue d’ensemble, commencez par le guide général.

Introduction

Le rachat de Figma par Adobe en 2022, finalement annulé fin 2023 sous pression réglementaire européenne, a brutalement réveillé une partie de la communauté design sur la question de la dépendance à un outil unique. Les designers, agences et équipes produit du monde entier ont compris qu’ils avaient construit toute leur chaîne de production sur un service propriétaire dont les conditions commerciales pouvaient changer du jour au lendemain. Cette prise de conscience a propulsé Penpot, l’alternative open-source à Figma, vers une adoption massive : plus de deux millions d’utilisateurs en 2025, des entreprises comme Decathlon, IBM ou Banco Santander qui l’évaluent activement.

Penpot offre désormais (en 2026) la quasi-totalité des fonctionnalités essentielles de Figma : édition vectorielle collaborative en temps réel, prototypage interactif, design system avec components, plugins, export multi-format, intégration avec le pipeline développeur via SVG natif. La version self-hosted permet à votre équipe design de bénéficier de ces fonctionnalités sans dépendre d’un service tiers, sans facturation par utilisateur, et avec la garantie que vos maquettes sensibles (interfaces clients, brand books confidentiels) restent sur votre infrastructure. Ce guide vous accompagne dans le déploiement de Penpot via Coolify, en utilisant une instance PostgreSQL dédiée.

Prérequis

• VPS : Hetzner CX31 (4 vCPU, 8 Go RAM) recommandé — Penpot exporte beaucoup en SVG
• Coolify installé et opérationnel sur le VPS
• Nom de domaine : sous-domaine prêt (par exemple design.votre-pme.sn)
• Service SMTP : pour les invitations d’équipe et la récupération de mot de passe
• Niveau requis : intermédiaire — Coolify simplifie mais Docker est utile à comprendre
• Temps estimé : 1 à 1 h 30
• Stockage : prévoir 30 Go libres pour la base et les fichiers exportés

1. Penpot vs Figma : où en est-on en 2026

La question de la parité fonctionnelle est légitime. Penpot a énormément progressé en deux ans, mais reste en retrait sur quelques fonctionnalités très avancées de Figma. Voici un état des lieux honnête en 2026 :

Le grand atout de Penpot, au-delà de l’économie, est son adoption native du standard W3C Design Tokens. Vos design tokens (couleurs, espacements, typographies) sont stockés dans un format ouvert directement consommable par les outils développeurs, sans plugin payant. Pour une PME qui veut industrialiser sa cohérence visuelle entre maquettes et code, c’est un avantage significatif sur Figma qui requiert encore le plugin payant Figma Tokens (devenu Tokens Studio).

2. Architecture Penpot

Penpot est composé de plusieurs services qui travaillent ensemble. Comprendre cette architecture vous évitera de mauvaises surprises lors du déploiement et facilitera le diagnostic en cas de problème.

• penpot-frontend : application web ClojureScript compilée en JavaScript, servie par nginx interne
• penpot-backend : API en Clojure, gère l’authentification, les opérations CRUD sur les fichiers, la collaboration temps-réel
• penpot-exporter : service Node.js dédié à la génération d’exports (PNG, PDF, SVG batch) — séparé du backend pour ne pas le ralentir
• postgres : base de données (PostgreSQL 16) — stocke utilisateurs, équipes, projets, fichiers
• redis : cache et pub/sub pour la collaboration temps-réel

Cette architecture en cinq services donne une excellente performance mais requiert une orchestration soignée. Coolify gère cela très bien grâce au support natif Docker Compose, qui permet de lancer toute la stack avec un seul fichier de configuration upstream.

Étape 1 — Préparer la base PostgreSQL dans Coolify

Penpot peut tourner avec sa propre instance PostgreSQL embarquée dans le compose, mais l’isoler permet de mieux gérer les sauvegardes et les mises à jour. Créez d’abord la base, puis vous l’utiliserez dans la configuration Penpot à l’étape suivante.

# Dans Coolify :
# 1. Project > New Resource > Databases > PostgreSQL
# 2. Version : 16-alpine
# 3. Database name : penpot
# 4. Username : penpot
# 5. Password : générer avec : openssl rand -base64 32
#
# Coolify expose l'URL de connexion interne automatiquement.
# Notez-la, elle sera utilisée à l'étape 2.

Si votre VPS a moins de 4 Go de RAM, vous pouvez choisir de mutualiser la base PostgreSQL avec d’autres services Coolify (Cal.com, Affine, etc.) pour économiser des ressources. Dans ce cas, créez plusieurs bases logiques (penpot, calcom, affine) dans une seule instance PostgreSQL partagée. Cette approche est très répandue en production légère et reste parfaitement performante pour des PME ayant moins de 100 utilisateurs cumulés sur l’ensemble des services.

Étape 2 — Déployer Penpot via Docker Compose dans Coolify

Penpot fournit un fichier docker-compose.yaml de référence pour le self-hosting. Plutôt que de réinventer la configuration, on utilise celle maintenue upstream et on l’adapte via les variables d’environnement.

# Dans Coolify :
# Project > New Resource > Docker Compose > Public Repository
# Repository : https://github.com/penpot/penpot
# Branch : main
# Compose file : docker/images/docker-compose.yaml
# Domain : https://design.votre-pme.sn

# Variables d'environnement essentielles :
PENPOT_PUBLIC_URI=https://design.votre-pme.sn
PENPOT_DATABASE_URI=postgresql://postgres-shared-host:5432/penpot
PENPOT_DATABASE_USERNAME=penpot
PENPOT_DATABASE_PASSWORD=<mot_de_passe_genere_etape_1>
PENPOT_REDIS_URI=redis://redis-host:6379/0
PENPOT_FLAGS=enable-registration enable-login disable-onboarding-questions

# SMTP pour les invitations d'équipe
PENPOT_SMTP_DEFAULT_FROM=design@votre-pme.sn
PENPOT_SMTP_HOST=smtp-relay.brevo.com
PENPOT_SMTP_PORT=587
PENPOT_SMTP_USERNAME=votre-login-brevo
PENPOT_SMTP_PASSWORD=votre-clef-smtp
PENPOT_SMTP_TLS=true

La variable PENPOT_FLAGS contrôle finement les fonctionnalités activées. enable-registration autorise les nouveaux comptes à s’inscrire (à désactiver une fois votre équipe constituée pour empêcher les inscriptions sauvages), enable-login active la connexion classique, disable-onboarding-questions évite le questionnaire intrusif au premier login. Pour activer Google ou GitLab OAuth en complément, ajoutez enable-login-with-google ou enable-login-with-gitlab et configurez les credentials correspondants.

Étape 3 — Lancer le déploiement et suivre la progression

Cliquez sur « Deploy » dans Coolify. La première fois, le build des images peut prendre 10 à 15 minutes — Penpot compile son frontend ClojureScript, ce qui est long. Patience et café. Heureusement, les déploiements suivants sont incrémentaux et beaucoup plus rapides (1 à 2 minutes).

# Suivre la progression depuis Coolify > Deployment Logs
# Ou en SSH direct :
ssh deploy@<IP_VPS>
docker ps | grep penpot
docker logs -f $(docker ps -q -f name=penpot-backend) --tail 50

# Une fois sain, tester l'accès :
curl -I https://design.votre-pme.sn

# Le backend doit répondre HTTP/2 200 sur la racine
# Si erreur 502, attendre 30s (Coolify proxy se met en place après le démarrage backend)

Le statut « Healthy » dans Coolify n’apparaît qu’une fois que tous les services articles connexes (backend, frontend, exporter) sont opérationnels et répondent aux health checks internes. Si après 5 minutes vous voyez « Unhealthy », inspectez les logs backend en priorité — la cause est généralement une connexion à la base PostgreSQL qui échoue (mot de passe incorrect, hostname non résolvable, port non ouvert).

Étape 4 — Création du premier compte et configuration de l’équipe

Au premier accès, créez votre compte administrateur. Penpot ne désigne pas automatiquement le premier compte créé comme admin global — la notion d’admin existe au niveau des « teams ». Vous créerez ensuite votre équipe et vous y serez automatiquement Owner.

# Workflow initial :
# 1. https://design.votre-pme.sn > "Create account"
# 2. Entrer email + mot de passe fort
# 3. Vérifier l'email reçu (lien de validation)
# 4. Une fois connecté, créer une "Team" :
#    Sidebar gauche > "+ New team" > Nom : "Design ITSkillsCenter"
# 5. Inviter les membres :
#    Settings de l'équipe > Members > Invite
#    Saisir email + rôle (Owner / Admin / Editor / Viewer)
#
# Désactiver les inscriptions une fois l'équipe constituée :
# Modifier la variable PENPOT_FLAGS dans Coolify :
# Retirer "enable-registration" puis redéployer

L’organisation par équipes est le concept central. Une équipe contient des projets, qui contiennent des fichiers de design. Vous pouvez avoir plusieurs équipes (par client, par marque, par département) avec des membres différents dans chacune. Les permissions par fichier sont possibles mais simples : Editor (modifie) ou Viewer (consulte uniquement). Pour une gestion plus fine, vous segmenterez plutôt en projets distincts.

Étape 5 — Importer un fichier Figma existant

Penpot propose un import de fichiers Figma natif (format .fig) depuis fin 2024. Cet import préserve la grande majorité des éléments : layers, components, styles, auto-layout, prototypage simple. Quelques fonctionnalités Figma très avancées (variables complexes, Smart Animate, certains plugins) ne sont pas portées et nécessitent une recréation manuelle.

# Workflow d'import :
# 1. Dans Figma : File > Save local copy → fichier .fig téléchargé
# 2. Dans Penpot : ouvrir un projet > "+ New file" > "Import file"
# 3. Sélectionner le fichier .fig
# 4. Patienter pendant l'import (5-30 secondes selon taille)
# 5. Vérifier le résultat : layers, composants, styles
# 6. Adapter les éléments non-portés (logs d'import disponibles)

# Pour des bibliothèques de composants partagées entre fichiers,
# importer d'abord la bibliothèque, puis publier comme "Shared library"
# depuis Settings du fichier > "Publish as library"

L’import n’est pas parfait à 100% — comptez 10 à 15% de retouches manuelles sur des fichiers complexes. C’est néanmoins suffisant pour migrer rapidement votre design system existant et continuer à travailler sur Penpot sans repartir de zéro. Pour les nouveaux projets démarrés directement dans Penpot, vous bénéficiez de la pleine puissance du format natif sans aucune limitation.

Adaptation au contexte ouest-africain

Penpot self-hosted apporte plusieurs avantages spécifiques aux PME et agences créatives francophones d’Afrique de l’Ouest. Premièrement, le coût : une équipe de cinq designers sur Figma Pro coûte 60 USD par mois, soit environ 36 000 FCFA. Sur Penpot self-hosted, le même usage coûte environ 5 200 FCFA mensuels (VPS Hetzner partagé avec d’autres services). L’économie annuelle dépasse 370 000 FCFA, soit largement de quoi financer une formation Penpot pour toute l’équipe la première année.

Deuxièmement, la performance sur les connexions limitées. Penpot est techniquement plus lourd que Figma à charger initialement (premier chargement de 4 à 5 Mo), mais une fois en mémoire, il est très réactif et fonctionne en local : la collaboration ne nécessite que des messages WebSocket courts pour synchroniser les modifications. Sur une connexion 4G stable, l’expérience est fluide. Sur une connexion 3G saturée, le premier chargement est lent (15-30 secondes) mais l’utilisation après chargement reste correcte.

Troisièmement, la souveraineté des maquettes clientes. Les agences digitales travaillant pour des clients sensibles (banques, télécoms, gouvernements) ont des obligations contractuelles de confidentialité. Pouvoir affirmer que les maquettes sont stockées sur un VPS européen (Hetzner Allemagne ou Finlande), sans tiers américain, est un argument commercial souvent décisif sur les appels d’offres administration ou finance régulée. Cette autonomie est impossible avec Figma cloud, où les données passent obligatoirement par les serveurs américains.

Erreurs fréquentes

Sauvegarde minimale

Vos maquettes sont des actifs précieux — la perte d’une bibliothèque de composants représente des semaines de travail. Penpot stocke tout dans PostgreSQL et dans le système de fichiers (uploads images). Sauvegarder les deux est indispensable.

#!/bin/bash
DATE=$(date +%Y%m%d-%H%M)
BACKUP_DIR=/var/backups/penpot
mkdir -p $BACKUP_DIR

# Dump PostgreSQL
docker exec $(docker ps -q -f name=postgres-shared) \
  pg_dump -U penpot penpot | gzip > $BACKUP_DIR/db-$DATE.sql.gz

# Snapshot uploads (volume Docker)
docker run --rm \
  -v penpot_assets:/data:ro \
  -v $BACKUP_DIR:/backup \
  alpine tar czf /backup/assets-$DATE.tar.gz -C /data .

# Sync vers Storage Box Hetzner
rsync -az $BACKUP_DIR/ \
  u123456@u123456.your-storagebox.de:/penpot/

# Conserver 30 jours sur le VPS
find $BACKUP_DIR -mtime +30 -delete

Programmez ce script en cron quotidien à 3 heures du matin, hors heures de travail. Pour les agences avec plusieurs designers actifs simultanément, envisagez aussi une sauvegarde incrémentale en milieu de journée pour limiter la perte potentielle. La fréquence de sauvegarde doit refléter votre tolérance à la perte de données : pour une équipe créative très active, perdre 24 heures de travail peut représenter une catastrophe commerciale.

Articles connexes

• AppFlowy self-hosted : alternative Notion open-source — déploiement Docker 2026
• Cal.com self-hosted : agenda en ligne open-source — déploiement Hetzner VPS 2026
• Excalidraw self-hosted : tableau blanc collaboratif — déploiement Caddy 2026

Workflow équipe en pratique

Une fois Penpot déployé et l’équipe constituée, le passage de Figma à Penpot demande quelques ajustements de workflow quotidien. Le plus visible concerne les liens partagés : sur Figma, vous aviez l’habitude de copier-coller un lien vers une frame précise dans Slack ou un commentaire de PR GitHub. Penpot supporte aussi cette pratique avec des URL stables au format /projects/<id>/files/<id>?page-id=<id>&page-frame=<id>. Documentez la convention équipe : toujours partager le lien direct vers la frame, jamais vers le projet entier, pour éviter de faire perdre du temps au reviewer.

Le workflow de revue design bénéficie particulièrement du mode commentaires de Penpot. Chaque collègue peut épingler un commentaire sur un point précis d’une frame, déclenchant une notification email pour les autres membres du projet. Pour une équipe de cinq designers et trois product managers, cette boucle de feedback structuré remplace très avantageusement les threads Slack qui se perdent. Quelques règles simples à mettre en place : résoudre les commentaires une fois traités (Penpot les masque alors), utiliser les emojis de réaction pour signaler « vu » sans alourdir la conversation, et marquer les commentaires bloquants avec un préfixe convenu (par exemple « BLOCKER: ») pour faciliter le tri.

Pour les développeurs qui consomment les maquettes, le mode Inspect de Penpot permet d’extraire directement le CSS, le SVG ou les valeurs des design tokens sans installer de plugin. C’est une amélioration concrète par rapport au mode équivalent Figma qui nécessite le plan Dev payant. Donnez aux développeurs un compte Viewer dans le projet design : ils peuvent inspecter sans modifier, et leur charge cognitive est réduite par cette continuité d’outil avec leurs designers.

FAQ

Penpot peut-il vraiment remplacer Figma à 100% ?
Pour 90% des cas d’usage agence et PME, oui. Les fonctionnalités essentielles (édition vectorielle collaborative, components, prototypage, design tokens, export multi-format) sont toutes là et stables. Pour quelques workflows très avancés (Smart Animate complexe, plugins très spécialisés), Figma garde une avance.

L’import depuis Figma est-il fiable pour migrer un gros design system ?
Oui, à 85-90%. Comptez quelques heures de retouche pour aligner les composants après import d’un design system mature de 100+ composants. Les pertes typiques concernent les variables Figma complexes et les animations Smart Animate.

Combien d’utilisateurs un VPS CX31 peut-il supporter ?
Pour 5 à 15 designers actifs simultanément, un CX31 est confortable. Au-delà, basculez sur un CX41 ou externalisez la base et le service exporter sur des conteneurs séparés.

Penpot fonctionne-t-il hors-ligne ?
Non, Penpot exige une connexion internet active pour fonctionner — la collaboration et le rendu se font côté serveur. Pour du travail purement local, l’application desktop Penpot Beta (en cours de développement en 2026) sera la solution.

Comment intégrer Penpot dans le workflow développeur ?
Penpot expose un mode « Inspect » qui génère le CSS, HTML, SVG des éléments sélectionnés. Couplé à l’export des design tokens au format W3C, il s’intègre nativement dans les pipelines Tailwind, Style Dictionary ou Storybook.

Pour aller plus loin

• 🔝 Retour au guide général : Productivité PME en self-hosted : la stack open-source 2026
• Documentation officielle Penpot : help.penpot.app
• Dépôt GitHub : github.com/penpot/penpot
• Documentation self-hosting : help.penpot.app/technical-guide

Mots-clés : penpot self-hosted, alternative figma open-source, design system pme, coolify deploy, w3c design tokens, agence digitale afrique de l’ouest.