Penpot

Espace de travail avec le panneau des tokens de couleur, un composant à variantes et le CSS généré dans l'onglet Code.

Maquettes web décrites en SVG, CSS et HTML

Penpot est une plateforme de design et de prototypage d'interfaces qui s'utilise dans le navigateur, sur le cloud de l'éditeur ou sur son propre serveur. Les maquettes reposent sur des formats ouverts (SVG, CSS, HTML, JSON). Le projet répond à deux besoins : rapprocher la maquette du produit livré, et garder l'outil de design sur une infrastructure qu'on maîtrise. L'édition se fait à plusieurs en temps réel, ou seul.

Grilles CSS, tokens W3C et onglet Inspect

  • Les plans de travail se mettent en page en CSS Grid (depuis la version 2.0) et en Flex : une maquette responsive se comporte comme du code dès le départ.
  • L'onglet Inspect affiche le SVG, le CSS et le HTML de l'élément sélectionné.
  • Les tokens de design sont natifs, au format W3C, et s'appliquent aux composants comme à leurs variantes.
  • Un serveur MCP ouvre les maquettes aux agents IA, en lecture comme en création.
  • L'API à jetons d'accès, les webhooks et les plugins raccordent l'espace de travail à la chaîne de développement.

Face à Figma : huit conteneurs, cœur MPL et couche payante

Positionnement : l'alternative open source à Figma. C'est le titre de la page de comparaison avec Figma publiée par l'éditeur. Elle oppose l'onglet Inspect, gratuit dans toutes les offres, au Dev Mode de Figma, et décrit la migration : export des fichiers depuis Figma avec le plugin Penpot Exporter, puis import dans Penpot.

Contrainte : huit conteneurs dans le compose officiel. Frontend, backend, exportateur, serveur MCP et console d'administration, plus PostgreSQL 15, Valkey 8.1 et Mailpit. Mailpit ne fait que capter les mails : la production demande un vrai serveur SMTP. La documentation recommande fortement HTTPS, sans lequel certaines API du navigateur ne fonctionnent pas.

Contrainte : des appels sortants activés par défaut. Le compose active la télémétrie anonyme, et le Nginx du frontend relaie des requêtes vers GitHub (bibliothèques et modèles) et vers Google (polices). Le drapeau enable-air-gapped-conf coupe ces relais, et avec eux le catalogue de bibliothèques et les Google Fonts.

Cible : des équipes produit, avec un dimensionnement par éditeur. Le README vise les équipes qui construisent des produits numériques à grande échelle. Les réglages recommandés comptent 4 CPU et 16 Go de RAM côté serveur pour des milliers d'utilisateurs, et une base de 50 à 100 Go jusqu'à dix éditeurs, plus environ 5 Go par éditeur supplémentaire. Penpot sollicite beaucoup le navigateur : la doc demande des postes puissants et conseille la dernière version stable de Chrome.

Licence : cœur MPL-2.0, administration propriétaire. La FAQ de la page des tarifs le dit ainsi : toutes les fonctions de base sont open source, et l'offre Enterprise ajoute une couche propriétaire de sécurité et d'administration (organisations, console d'administration, modules payants). Sur le cloud, Professional est gratuit, Unlimited coûte 7 $ par éditeur et par mois (plafonné à 175 $) et Enterprise 25 $ par membre et par mois. Le README range le SSO dans Enterprise ; la documentation de configuration décrit pourtant la connexion OIDC, LDAP, Google, GitHub ou GitLab sur une instance auto-hébergée.

État : version 2.18.5, publiée le 26 octobre 2026. Une version mineure sort tous les un à deux mois (2.16.0 en juin, 2.17.0 en juillet, 2.18.0 le 23 septembre), suivie de correctifs rapprochés : cinq pour la 2.18 en octobre. Les images Docker suivent de peu la mise à jour du SaaS. La doc conseille de monter de version par petits paliers et prévient que la console d'administration, ajoutée au compose avec la 2.18, deviendra obligatoire dans une version future.