Je vous propose aujourd'hui de découvrir Penpot, un logiciel de design d'interface OpenSource en ligne. La version 2.3 vient de sortir et propose une fonctionnalité que j'attendais avec impatiente : les plugins. A l'occasion de cette sortie Penpot organise un concours pour inciter à la création d'extension avec un prix de 1000$ (et 20 mentions honorables de 200$).
De mon côté j'ai découvert Penpot lors de l'annonce du rachat de Figma par Adobe et je n'avais pas forcément était séduit à l'époque. Cependant, j'ai eu l'occasion de le tester à nouveau dans le cadre du redesign d'un site et j'ai été agréablement surpris par les évolutions de l'outil (au point d'en faire mon logiciel de design principal). Mais pourquoi utiliser Penpot plutôt qu'autre chose ?
Un des aspects que je trouve intéressant est le fait que l'outil soit open source et qu'il puisse être auto-hébergé si besoin (il faudra tout de même un certaine compétence technique avec docker pour cela). Ce côté open source apport des avantages importants pour un logiciel de ce type.
Vu que penpot fonctionne en ligne il est possible de collaborer a plusieurs sur un même design.
Penpot évolue rapidement et de nouvelles fonctionnalités clefs sont ajoutées fréquemment. Par exemple, un système de grille a été ajouté dans les dernières versions (proche de ce que l'on connait en CSS) et permet de placer des éléments facilement.
La dernière mise à jour (2.3) intègre un système de plugins qui permet aux développeurs de rajouter facilement des fonctionnalités au sein de penpot sans avoir à créer un fork complet de l'outil. Le système de plugin permet un accès à l'API interne pour générer du contenu ou détecter des évènements particuliers. Une simple URL suffit pour charger un plugin et il est donc possible de se créer des plugins même pour un usage spécifique à un client.
A l'occasion de la sortie du nouveau système de plugin, Penpot propose un concours (jusqu'au 15 décembre) avec un prix de 1000 $ (et 20 mentions honorables de 200$). Aussi si vous avez une idée d'extension intéressante n'hésitez pas à participer.
Si vous souhaitez vous lancer un guide complet est disponible et détaille les différentes étapes pour la création de votre première extension.
Tout d'abord un fichier manifest.json
permet de définir les informations de l'extension (icône, titre, permissions...)
{
"name": "Mon extension",
"description": "",
"code": "/plugin.js",
"icon": "/icon.png",
"permissions": ["content:write", "content:read"]
}
Le fichier JavaScript sera exécuté lors du chargement de l'extension de l'interface. On pourra utiliser le code pour ouvrir un panneau qui contiendra l'interface de notre extension.
penpot.ui.open("Icons", `/?theme=${penpot.theme}`, {
width: 250,
height: 350,
});
La page chargée dans le panneau pourra envoyer des évènements pour interagir avec le design. Pour cela, on peut écouter les évènements et interagir avec la maquette.
penpot.ui.onMessage((message: PluginMessageEvent) => {
if (message.type === "create-svg") {
penpot.createShapeFromSvg(message.content);
}
});
L'interface de notre extension sera chargée dans une iframe et pourra communiquer avec l'extension à l'aide d'un système de message.
window.parent.postMessage(
{
type: "create-svg",
title: item.title,
content: "......",
},
"*",
);
Après, il n'y a plus qu'à imaginer des fonctionnalités intéréssantes et soumettre une extension pour participer au concours. Si vous voulez commencer encore plus rapidement des templates sont disponibles sur github.
De mon côté j'ai essayé de participer au concours avec une extension qui permet de charger une icône depuis plusieurs librairies d'icônes : Icon finder. Vous pouvez vous jeter un coup d'oeil au code source si cela vous intéresse. J'ai aussi commencé à développer une seconde extension pendant un stream Twitch.