Penpot vs Figma : ce que l'alternative open-source change vraiment
Figma et Penpot partagent le même paradigme : design vectoriel dans le navigateur, collaboration temps-réel, composants réutilisables et handoff développeur intégré. La différence fondamentale est dans le modèle de données : Figma stocke tout sur ses serveurs en format propriétaire ; Penpot utilise SVG standard comme format natif, ce qui signifie que vos fichiers de design sont lisibles par n'importe quel éditeur SVG et ne dépendent d'aucun vendor. Pour une équipe qui auto-héberge son code sur Gitea, sa documentation sur Docmost et sa communication sur Mattermost, héberger aussi son outil de design sur ServOrbit est la conclusion logique.
Ce que Penpot offre hors de la boîte
- Design vectoriel temps-réel — plusieurs designers simultanément sur le même fichier, curseurs visibles, commentaires contextuels sur les calques.
- Composants et bibliothèques partagées — créez des design systems, publiez-les dans des bibliothèques partagées entre projets.
- Handoff développeur natif — inspecteur CSS live, export des assets, annotations, guides de spacing générés automatiquement depuis les designs.
- Prototypage interactif — liez des frames avec des transitions, simulez la navigation dans le prototype sans quitter l'outil.
- Grilles flexibles & contraintes — layouts auto, grilles CSS natives, contraintes de redimensionnement identiques à celles de Figma.
- Format SVG ouvert — vos fichiers sont portables, importables dans Inkscape, Illustrator ou tout éditeur vectoriel.
- Intégration MCP — connectez Penpot à votre assistant AI pour générer des composants depuis des descriptions textuelles (v2.17).
Architecture : 6 conteneurs, un seul point d'entrée HTTP
Penpot est une stack moderne composée de : penpot-postgres (PostgreSQL 15, persistance des projets et users), penpot-valkey (Valkey 8, cache de sessions et pub/sub temps-réel), penpot-backend (Clojure, API et logique métier), penpot-exporter (moteur d'export PNG/PDF/SVG via headless browser), penpot-mcp (serveur MCP pour l'intégration AI) et penpot-frontend (proxy HTTP sur le port 9001, sert l'app React et route les requêtes vers le backend). L'architecture est pensée pour l'exposition via un reverse proxy : un seul port 9001 suffit, le frontend fait office de routeur interne. Sur un VPS ServOrbit de 4 Go de RAM, la stack complète consomme environ 800 Mo au repos — le reste est disponible pour vos autres services.
Déploiement en 6 étapes
Commandez un VPS ServOrbit
2 Go de RAM est le minimum absolu ; 4 Go est recommandé en production pour que l'export de fichiers complexes (PDF, PNG haute résolution) ne sature pas le conteneur exporter. Ubuntu 24.04 LTS est le template par défaut.
Pointez un sous-domaine vers votre VPS
Créez un enregistrement A pour
design.yourdomain.comvers l'IP du VPS. Le provisioner ServOrbit génère un certificat Let's Encrypt automatiquement. Penpot désactive les cookies de session sécurisés en HTTP — un domaine HTTPS est requis pour la collaboration multi-utilisateur en production.Installez depuis le marketplace
Dans la console ServOrbit : Marketplace → Collaboration → Penpot → Déployer. Le job AWX démarre les 6 conteneurs, génère
APP_SECRETet configurePENPOT_PUBLIC_URIsur votre domaine. L'interface est accessible surhttps://design.yourdomain.comen 2-3 minutes.Créez le premier compte admin
L'enregistrement est ouvert par défaut (
enable-registration). Naviguez vershttps://design.yourdomain.com, créez votre compte — le premier utilisateur créé obtient les droits admin. Depuis le panneau admin (/api/rpc/command/get-profile), vous pouvez ensuite désactiver les inscriptions publiques et inviter vos collaborateurs par e-mail.Importez vos fichiers Figma
Penpot importe nativement les fichiers
.fig(export depuis Figma). Dans un projet Penpot, cliquez sur Import → Figma file, sélectionnez votre export. Les frames, composants et styles sont convertis en éléments Penpot — attendez quelques pertes mineures sur les plugins Figma spécifiques, mais la structure générale est préservée.Se connecter la première fois
Ouvrez l'URL et cliquez sur « Créer un compte » : l'inscription est ouverte et la vérification par e-mail désactivée, votre compte est donc actif immédiatement. Faites-le tout de suite.
Intégrer Penpot dans votre workflow Git
Le format SVG natif de Penpot ouvre des possibilités que Figma ne peut pas offrir : vos designs sont des fichiers texte versionables. Exportez un composant en SVG, commitez-le dans votre repo Gitea, et votre pipeline CI peut détecter les régressions visuelles via des diffs SVG. Les développeurs de l'équipe peuvent inspecter les changements de design dans une PR comme n'importe quel code. Cette approche « design-as-code » est particulièrement puissante pour les design systems : une modification de token de couleur dans Penpot génère un SVG diff immédiatement lisible dans Gitea.
Penpot MCP : générez des designs depuis votre assistant AI
Depuis v2.17, Penpot embarque un serveur MCP (penpot-mcp) qui expose vos projets à n'importe quel client MCP-compatible. Configurez votre assistant (Claude, Cursor, Continue) avec l'URL MCP de votre instance Penpot, et vous pouvez demander « crée un bouton primaire 40px, couleur #6765A2, border-radius 8px » — l'assistant génère directement le composant dans votre fichier de design ouvert. C'est la boucle design→code la plus courte disponible en self-hosted.
