Comment installer Penpot sur Saplo : alternative gratuite à Figma

Figma dans le plan Professional coûte 16 dollars par mois pour un poste complet d'éditeur avec paiement annuel, et 20 dollars pour un paiement mensuel. En euros, cela fait environ 14 € par mois pour chaque personne qui conçoit. Une équipe de cinq créateurs paie donc environ 68 € par mois, soit environ 818 € par an, et ce montant augmente avec chaque nouvel éditeur. Penpot est un éditeur open source pour la conception d'interfaces et la création de prototypes, qui fait la même chose dans le navigateur, mais installé sur ton propre serveur ne facture pas de frais par poste. Voici un guide complet : ce qu'est Penpot, quand il peut vraiment remplacer Figma, et quand ce n'est pas le cas, combien de ressources il nécessite et comment l'installer sur Saplo pas à pas.

Qu'est-ce que Penpot

Penpot est un outil de design UI/UX développé par la société espagnole Kaleidos en tant que projet open source. Il fonctionne entièrement dans le navigateur, comme Figma, donc le designer n’a rien à installer sur son ordinateur. La différence technique principale : Penpot enregistre les projets dans des standards ouverts du web, c’est-à-dire en SVG, et la disposition des éléments est basée sur CSS Flexbox et CSS Grid. Pour une équipe, cela signifie que le design est plus proche de ce que le développeur mettra ensuite dans le code.

Ce que tu obtiens concrètement :

• maquettes et designs d’écrans, avec calques, groupes, masques, texte et graphismes vectoriels,
• composants et bibliothèques partagées, c’est-à-dire boutons, champs de formulaire et cartes définis une fois et utilisés dans plusieurs fichiers,
• layouts Flex et Grid, qui fonctionnent comme leurs équivalents en CSS, donc un design responsive n’est pas qu’un dessin,
• prototypes cliquables avec transitions entre écrans, à montrer au client ou pour des tests utilisateur,
• l’onglet Inspect, où le développeur lit dimensions, couleurs, espacements et le code CSS ou SVG prêt à l’emploi,
• export en PNG, PDF et SVG, géré par un conteneur d’export dédié,
• édition collaborative en temps réel, quand plusieurs personnes travaillent sur le même fichier simultanément, avec curseurs et commentaires visibles.

Une description complète de l’application et un bouton d’installation sont disponibles sur la page Penpot dans le catalogue Saplo.

Penpot ou Figma : un comparatif honnête

Penpot n'est pas un clone exact de Figma, et il ne sert à rien de faire semblant que c'en est un. Avant de migrer ton équipe, vérifie si ton travail correspond à ce que Penpot fait bien.

Critère	Figma (Professional)	Penpot sur Saplo
Prix	env. 14 € par mois pour chaque éditeur	prix fixe du Box, sans frais par poste
Nombre d'éditeurs	chaque éditeur payant séparément	illimité, limité uniquement par la mémoire du serveur
Où sont stockés les projets	cloud de Figma, serveurs aux USA	ton Box dans un centre de données en Allemagne
Format des fichiers	format fermé de Figma	standards ouverts, SVG et CSS
Disposition des éléments	Auto Layout (modèle propriétaire)	Flex et Grid conformes au CSS
Édition collaborative en direct	oui	oui
Prototypes	très avancés, avec animations	basiques et intermédiaires
Plugins	énorme écosystème	plus petit, mais en croissance
Fonctions IA	intégrées, payantes à crédit	absentes dans l'installation standard

Quand Penpot suffit amplement : tu conçois des sites et applications web, tu crées des maquettes pour des clients, tu construis une bibliothèque de composants, tu remets les projets aux développeurs. C'est la majorité du travail dans les petites agences et équipes produit.

Quand rester sur Figma : l’équipe dépend fortement de certains plugins spécifiques à l’écosystème Figma, elle crée des prototypes très complexes avec des micro-animations ou le client exige la fourniture de fichiers au format .fig. Penpot n’ouvre pas directement les fichiers Figma. Migrer des projets existants demande un travail séparé, donc il est raisonnable de commencer les nouveaux projets dans Penpot et de terminer les anciens là où ils ont été créés.

Combien ça coûte : un calcul précis

Figma facture par personne. Box sur Saplo facture par serveur. Avec un seul designer, la différence est faible, mais elle devient importante avec une équipe.

Équipe	Figma Professional annuel	Penpot sur Box L annuel
1 designer	env. 164 €	136 €
3 designers	env. 491 €	136 €
5 designers	env. 818 €	136 €
10 designers	env. 1 636 €	295 € (Box XL)

Les montants pour Figma sont calculés à partir de 16 dollars par mois avec paiement annuel, au taux d'environ 0,85 € pour un dollar. En paiement mensuel, Figma coûte un quart de plus. Les prix Saplo correspondent aux prix catalogue des Box, la première année coûte autant que le renouvellement.

Il y a un autre point qui n'apparaît pas dans le tableau : sur le même Box, tu peux installer d'autres outils pour ton équipe. Un disque partagé, un gestionnaire de mots de passe ou un tableau de tâches s'installent à côté de Penpot sans coût supplémentaire, tant que la mémoire suffit.

Exigences : quel Box choisir

Penpot est l’une des applications les plus lourdes du catalogue Saplo. L’installation se compose de cinq conteneurs Docker qui fonctionnent ensemble :

• frontend, c’est-à-dire l’éditeur dans le navigateur, le seul conteneur exposé à l’extérieur,
• backend, qui stocke les projets et gère l’édition collaborative ; il tourne sur une machine virtuelle Java, donc il aime la mémoire,
• exporter, qui génère les exports PNG, PDF et SVG en lançant un navigateur en interne,
• PostgreSQL 15, une base de données dédiée uniquement à Penpot,
• Redis, mémoire cache et file d’attente pour l’édition collaborative.

Les exigences sont donc :

• minimum 4 Go de RAM libre et 15 Go d’espace disque,
• Box avec Docker, le moteur l’active automatiquement lors de l’installation depuis le catalogue,
• domaine ou sous-domaine *.saploapp.pl, que tu obtiens gratuitement avec chaque plan.

Concrètement, cela signifie :

• Box S (1 Go) et Box M (2 Go) ne suffisent pas. Penpot ne tient pas sur ces configurations.
• Box L (6 Go RAM, 60 Go SSD, 136 € par an) est un minimum raisonnable pour une équipe de quelques personnes. Il reste un peu de mémoire pour une ou deux applications légères en plus, et les sauvegardes des 7 derniers jours sont incluses dans le prix.
• Box XL (12 Go RAM, 150 Go SSD, 295 € par an) choisis-le si une quinzaine de personnes travaillent simultanément sur les projets, si les fichiers comprennent des centaines d’écrans ou si tu souhaites héberger plusieurs outils de l’équipe sur le même serveur.

Tu n’as pas besoin d’acheter ni de configurer une base de données séparée. PostgreSQL et Redis font partie de la configuration et tournent dans le même ensemble de conteneurs que Penpot.

Installation pas à pas

1. Connecte-toi au panneau Saplo et va dans le Catalogue d'applications. Tu y trouveras Penpot dans les outils. Tu peux aussi commencer depuis la page Penpot et cliquer sur le bouton de déploiement.
2. Choisis le Box sur lequel l’éditeur doit être installé. Si le Box n’a pas assez de mémoire libre, le panneau te l’indiquera avant l’installation, et non après une tentative échouée.
3. Indique l’adresse. La plus simple est une sous-domaine de type projects.saploapp.pl. Si tu préfères un domaine personnalisé, par exemple design.votreentreprise.fr, configure-le lors de l’installation, et le certificat SSL sera généré automatiquement.
4. Confirme l’installation. Le moteur installe Docker, télécharge les images Penpot, PostgreSQL et Redis, génère des mots de passe aléatoires pour la base et une clé de session, puis lance les cinq conteneurs.
5. Patiente. Les trois images Penpot pèsent plus d’un gigaoctet au total, donc le premier téléchargement sur un Box vierge prend plus de temps que pour des applications légères. L’installation se termine uniquement lorsque l’éditeur répond effectivement à ton adresse.
6. Quand le Statut devient actif, ouvre l’adresse dans ton navigateur.

Première utilisation : compte et équipe

Penpot ne dispose pas d'un mot de passe administrateur généré automatiquement. Tu crées ton compte toi-même lors de ta première visite sur le site :

1. Sur l'écran de connexion, choisis Create an account.
2. Fournis ton e-mail, mot de passe et nom. La confirmation par e-mail est désactivée dans cette installation, donc le compte est actif immédiatement.
3. Penpot crée automatiquement ta première équipe. Dans cette équipe, tu crées des projets, et dans les projets, des fichiers avec les écrans.

Les détails de l'installation, y compris les noms des conteneurs et les commandes pour consulter les logs, sont enregistrés dans le fichier PENPOT-SETUP.txt dans le répertoire de l'application sur la Box. Le panneau Saplo t'affichera son contenu quand tu en auras besoin.

Important lors de l'inscription : puisque le formulaire est ouvert et la confirmation par e-mail désactivée, n'importe qui connaissant l'adresse peut créer un compte. Pour une petite équipe sur un sous-domaine peu connu, ce n'est généralement pas un problème. Cependant, si l'adresse devient publiquement connue, une fois que tous les comptes de l'équipe sont créés, il est conseillé de désactiver l'inscription, comme expliqué plus bas.

Comment travaille l'équipe : invitations sans mail

Les invitations pour l'équipe Penpot sont envoyées par mail. L'installation standard sur Saplo n'a pas de serveur mail connecté, donc le mail d'invitation ne partira pas. Il y a deux solutions :

• la plus simple : chaque membre de l'équipe crée son propre compte à ton adresse, puis tu le ajoutes à l'équipe ou tu lui partages le projet,
• la complète : tu relies un serveur SMTP, par exemple la boîte professionnelle que tu as déjà. Tu fais cela via SSH, en ajoutant le flag enable-smtp et les variables PENPOT_SMTP_* dans le fichier docker-compose.yml dans le catalogue d'applications, puis tu lances docker compose up -d. À partir de ce moment, les invitations, réinitialisations de mot de passe et notifications fonctionnent normalement.

L'accès via SSH est disponible dans chaque Box à partir du plan M, donc sur Box L et XL tu y as accès immédiatement, avec un sudo complet.

Sécurité et réglages à modifier

Voici quelques actions à effectuer dès la première semaine :

• Désactive l'inscription après avoir créé le compte équipe. Ajoute le flag disable-registration à la variable PENPOT_FLAGS dans docker-compose.yml pour le frontend et le backend, puis redémarre les conteneurs. Tu pourras alors inviter de nouvelles personnes par invitation, à condition que le SMTP soit configuré.
• Utilise ton propre domaine pour tes clients. Un prototype envoyé au client à l'adresse projects.votreentreprise.fr semble bien plus professionnel qu'un lien vers un cloud tiers.
• N’oublie pas les sauvegardes. Box L inclut une sauvegarde sur 7 jours, Box XL sur 14 jours. En plus, exporte régulièrement les fichiers les plus importants de Penpot au format .penpot, pour en avoir une copie indépendante du serveur.
• Effectue les mises à jour avec précaution. La recette utilise les dernières images de Penpot. Avant une mise à jour majeure, vérifie la liste des changements du projet et assure-toi d’avoir une copie récente.

Les projets de tes clients ne quittent pas ton Box et ne sont pas transférés vers des serveurs aux États-Unis. Pour les agences qui signent des accords de confidentialité avec leurs clients ou travaillent dans des secteurs sensibles, c’est souvent un argument plus fort que le prix lui-même.

Problèmes fréquents

L'éditeur met du temps à se charger lors de la première utilisation. Le backend en Java se chauffe après le démarrage des conteneurs. Le premier lancement après un redémarrage est parfois plus lent, les suivants sont déjà rapides.

L'export en PDF ou PNG ne fonctionne pas ou prend beaucoup de temps. L'exporteur lance un navigateur en interne et consomme beaucoup de mémoire. Si plusieurs applications tournent simultanément sur une Box, la RAM peut manquer. Vérifie les logs du conteneur exporteur, et si la mémoire est constamment insuffisante, passe à un plan supérieur.

L'invitation à rejoindre l'équipe n'est pas arrivée. C'est le comportement par défaut, car sans SMTP Penpot n'envoie pas d'emails. Soit tu configures un SMTP, soit tu demandes à la personne de créer un compte et tu l'ajoutes manuellement.

Je ne peux pas me connecter après avoir changé l'adresse. Penpot enregistre son adresse publique dans la configuration. Modifier le domaine après l'installation nécessite de mettre à jour la variable PENPOT_PUBLIC_URI et de redémarrer les conteneurs. Le plus simple est de choisir l'adresse finale dès le début.

Résumé

Penpot est particulièrement pertinent là où Figma pose le plus de problèmes : dans une équipe de plusieurs designers, chacun ayant un coût mensuel individuel. Avec un Box L à 139 € par an, tu peux installer un éditeur pour toute l'équipe, avec édition collaborative en temps réel, bibliothèques de composants, prototypes et export, le tout hébergé sur ton serveur. Avant de migrer toute ton équipe, crée un nouveau projet dans Penpot et vérifie si l'absence de certains plugins Figma te gêne. Si ce n'est pas le cas, les chiffres parlent d'eux-mêmes.

Commence par la page Penpot dans le catalogue Saplo, et si tu n'as pas encore de Box, compare les offres dans le prix.