Dans beaucoup d’équipes produit, la maquette vit dans un outil et le code dans un autre, et chaque écran passe par une traduction manuelle entre les deux : marges recalculées, couleurs recopiées, composants refaits à la main. Penpot part de ce constat. Édité par Kaleidos, une société madrilène, c’est un outil de design d’interfaces dont les fichiers reposent sur des standards du web (CSS, HTML, SVG et JSON) et dont le code source est ouvert sous licence MPL-2.0.
Quel problème Penpot règle, et pour qui
Penpot répond à trois besoins que les outils de design propriétaires couvrent mal. Le premier est la souveraineté des données : vous pouvez l’installer sur vos propres serveurs, y compris dans un environnement coupé d’Internet, ce qui intéresse les administrations, les banques ou les éditeurs soumis à des politiques de sécurité strictes. Le deuxième est le passage de relais entre design et développement : les mises en page reprennent la logique de CSS Flexbox et Grid, et le code est consultable par tous les membres d’une équipe. Le troisième est le coût, avec un plan cloud gratuit et une version auto-hébergée gratuite elle aussi.
Le public visé va du designer indépendant aux grandes organisations qui gèrent plusieurs équipes. Les développeurs front-end sont explicitement dans la cible, tout comme, depuis le lancement du serveur MCP, les équipes qui veulent faire travailler des agents IA directement dans leurs fichiers de design. Si vous comparez plusieurs outils, notre sélection d’alternatives à Figma situe Penpot parmi les autres options.
Comment s’organise le travail dans Penpot
Penpot s’ouvre dans le navigateur, sur design.penpot.app ; l’éditeur recommande Chrome ou Firefox et prend aussi en charge Safari. Un compte se crée avec une simple adresse e-mail. Le tableau de bord range les fichiers par équipes et par projets, et chaque équipe distingue propriétaire, administrateurs, éditeurs et lecteurs.
Dans un fichier, la barre latérale droite porte trois onglets qui structurent le travail :
- Design pour dessiner les écrans, régler les mises en page Flex ou Grid, créer des composants et leurs variantes.
- Prototype pour relier les écrans entre eux : on choisit un déclencheur (clic, entrée ou sortie de la souris, délai) et une action (naviguer, ouvrir ou fermer une superposition), puis on lance le prototype en mode présentation.
- Inspect pour consulter mesures, distances et propriétés, et copier des extraits de code CSS, HTML ou SVG sans risque de modifier la maquette.
À gauche, le panneau des tokens sert à créer des design tokens nommés (par exemple dimension.small), à les référencer entre eux et même à les calculer avec des opérations mathématiques. Ils suivent le format du groupe de travail W3C DTCG, s’importent et s’exportent en JSON et se partagent entre fichiers par une bibliothèque commune. Les fichiers eux-mêmes s’exportent au format .penpot, une archive ZIP qui contient les images et une structure JSON lisible.
Pour étendre l’outil, Penpot propose un gestionnaire de plugins (raccourci Ctrl + Alt + P), une API accessible par jetons d’accès personnels et des webhooks déclenchés par des événements comme la création d’un fichier ou l’ajout d’un commentaire. Le serveur MCP, gratuit, relie Claude, Cursor, Visual Studio Code ou Codex à vos fichiers, en version hébergée par Penpot ou installée chez vous. Notre retour sur l’intégration entre Figma et Claude Code montre ce que ce type de passerelle change dans un flux de travail.
Cas d’usage par profil
- Designer UI en agence : maquettes et prototypes cliquables pour faire valider un parcours au client, partagés par lien avec des lecteurs illimités.
- Équipe design system : composants avec variantes, tokens organisés en thèmes (clair, sombre, marques) et exportés en JSON vers le dépôt de code.
- Développeur front-end : lecture des espacements et des propriétés dans l’onglet Inspect, copie du CSS d’un bloc entier et export des icônes en SVG.
- DSI d’un grand compte : instance auto-hébergée sous Docker, Kubernetes ou OpenShift, avec SSO et permissions centralisées sur le plan Enterprise.
Pour cadrer la démarche en amont de la maquette, notre guide des méthodes d’UX design rappelle les étapes de recherche et de test qui précèdent le prototype.
Penpot face à Figma, Sketch et Adobe XD
Figma reste la référence du design d’interfaces collaboratif, avec un écosystème de plugins et de ressources plus fourni ; c’est un logiciel propriétaire hébergé par son éditeur. Penpot se distingue par son code ouvert, l’auto-hébergement possible et un onglet d’inspection ouvert à tous les rôles. Sketch vise surtout les designers sur Mac avec une application native, là où Penpot fonctionne dans n’importe quel navigateur. Adobe XD, enfin, figure parmi les outils dont Penpot facilite explicitement la sortie, avec une page de comparaison dédiée et des partenaires de migration. Pour un tour d’horizon plus large, consultez notre comparatif des logiciels pour faire des maquettes.
Migrer depuis Figma
Penpot estime que la plupart des designers venant de Figma ou d’Adobe XD sont productifs en deux à trois heures. Son guide de migration recommande d’auditer d’abord les fichiers critiques, puis d’utiliser le plugin Penpot Exporter pour Figma, qui transfère fichiers, composants, variantes, styles, variables et bibliothèques. Comptez un nettoyage des mises en page, l’Auto Layout de Figma devenant du Flex ou du Grid. L’exportateur sert à une migration ponctuelle, pas à une synchronisation continue : testez sur un fichier représentatif avant de généraliser.
Les limites à connaître
- La version cloud gratuite limite l’équipe à 8 membres (lecteurs illimités), le stockage à 10 Go et l’historique des versions à 7 jours.
- Le SSO, la console d’administration et les permissions avancées sont réservés au plan Enterprise ; le choix de la région d’hébergement et la liste blanche d’adresses IP à Private Server.
- L’interface existe en français, mais la traduction est communautaire. La documentation et le site sont en anglais.
- L’auto-hébergement demande un serveur Linux, des compétences Docker, et 50 à 100 Go de stockage pour une dizaine d’éditeurs d’après Penpot.
- Aucune application de bureau officielle : Penpot s’utilise dans le navigateur.
Quel plan choisir
Pour un indépendant ou une petite équipe, le plan Professional suffit : il donne accès à toutes les fonctions de design et de prototypage. Dès que l’équipe dépasse 8 membres ou que vous voulez un mois d’historique, Unlimited prend le relais, avec une facture plafonnée qui le rend avantageux pour les grandes équipes. Enterprise se justifie quand la DSI exige SSO et contrôle des droits ; si vous avez les compétences pour l’héberger, la version auto-hébergée gratuite reste une alternative solide pour une équipe qui n’a pas besoin de gouvernance. Ceux qui cherchent plus largement à sortir des outils payants trouveront d’autres pistes dans notre liste d’alternatives à la suite Adobe.