Penpot, l'outil de design crée un concours de plugins

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$).

Qu'est ce que Penpot ?

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 ?

Open source

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.

• Il est possible de [contribuer] pour ajouter une fonctionnalité ou corriger un problème que l'on trouverait sur l'application. Il est possible de jeter un oeil au code sur le Github Penpot et différents guides sont disponible pour ceux qui souhaiterait aider au développement du logiciel.
• La possibilité d'auto-héberger l'application permet de s'assurer que l'on reste maitre de ses données. Là où une solution fermée peut changer les règles à tout moment et rendre tout son travail inaccessible... Un guide détaillé explique d'ailleurs comment on peut héberger l'outil (via docker par exemple).

Un outil collaboratif

Vu que penpot fonctionne en ligne il est possible de collaborer a plusieurs sur un même design.

• Plusieurs designers peuvent travailler en même temps sur un fichier.
• Un système de révision permet a un collaborateur d'ajouter des commentaires et de voir les changements effectués par le designer en temps réel. Ce qui s'avère bien pratique pendant un call par exemple.
• Les développeurs peuvent aussi ajouter des commentaires et on accès à un inspecteur permettant d'obtenir les informations clefs sur un calque (on peut aussi générer du code CSS/HTML pour avoir une base de travail rapide).

Un outil évolutif

Penpot évolue rapidement et de nouvelles fonctionnalités clefs sont ajoutées fréquemment. Par exemple, un système de grille a été 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.

Concours de plugin Penpot

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.

Fonctionnement

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.

Ma participation

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.