L’Open Source rencontre les outils de conception avec Penpot —

Penpot est un outil de conception gratuit et open source qui permet une véritable collaboration entre concepteurs et développeurs. Les concepteurs peuvent créer des prototypes interactifs et des systèmes de conception à grande échelle, tandis que les développeurs bénéficient d’un code prêt à l’emploi et rendent leur flux de travail simple et rapide, car il est construit avec les technologies Web, fonctionne dans le navigateur et a déjà réussi. 33K démarre sur GitHub.

L’interface utilisateur semble intuitive et facilite la réalisation des tâches, même pour quelqu’un qui n’est pas un concepteur (coupable d’avoir été accusé !). Vous pouvez faire avancer les choses de la même manière et avec la même qualité qu’avec d’autres outils plus populaires et à code source fermé comme Figma.

Pourquoi l’Open Source est important

En tant que personne qui travaille quotidiennement avec l’open source commercial, j’y crois fermement comme un moyen d’être plus proche de vos utilisateurs et d’accéder au niveau supérieur de livraison. Le fait d’être open source crée un tout nouveau niveau de responsabilité et de flexibilité pour un outil.

Les développeurs sont une race d’utilisateurs différente. Lorsque nous rencontrons une bizarrerie ou une lacune dans l’UX, notre premier réflexe est de jouer au détective et de comprendre pourquoi ce schéma est apparu comme un mauvais pouce à ce que nous avons fait. Lorsque le code est open source, il n’est pas rare que nous sautions dans la source et créions déjà un problème avec une proposition sur la façon de le résoudre. Du moins, c’est le rêve.

De plus, être open source vous permet, à vous et à votre équipe, de auto-hébergeurvous offrant une couche supplémentaire de confidentialité et de contrôle, ou du moins une solution plus rentable si vous avez le temps et les compétences nécessaires pour tout personnaliser.

Lorsque les cartes sont bien jouées et que l’équipe est en mesure d’en tirer des avantages à long terme, l’open source commercial est une stratégie gagnant-gagnant.

Présentation : Système de plug-in Penpot

En parlant de l’extensibilité de l’open source, Penpot a le PenpotHub la maison de l’open source modèles et le nouveau sorti plugin galerie. Alors maintenant, s’il manque une fonctionnalité, vous n’avez pas besoin de passer immédiatement à la base de code : vous pouvez créer un plugin pour obtenir ce dont vous avez besoin. Et vous pouvez même le servir depuis localhost !

Création de plugins Penpot

Concernant les plugins, en créer un est extrêmement ergonomique. Premièrement, il y a déjà défini modèles pour quelques frameworks, et j’en ai créé un pour SolidJS dans ce PR — la puissance de l’open source !

Lors de l’utilisation Viteles plugins sont des applications à page unique ; si vous avez déjà créé une application Hello World avec Vite, vous avez ce qu’il faut pour créer un plugin. En plus de cela, l’équipe Penpot propose quelques packages qui peuvent vous donner une longueur d’avance dans le processus :

npm install @penpot/plugin-styles

Cela vous permettra d’importer avec un chargeur CSS ou une importation CSS depuis @penpot/plugin-styles/styles.css. L’API JavaScript est disponible via l’objet window, mais si votre plugin est en TypeScript, vous devez l’apprendre :

npm add -D @penpot/plugin-types

Avec ces types dans votre node_modulesvous pouvez afficher le tsconfig.json et ajoutez le types au compilerOptions.

{
  "compilerOptions": {
    "types": ["@penpot/plugin-types"]
  }
}

Et voilà, maintenant, le fournisseur de services de langage dans votre éditeur et le compilateur TypeScript accepteront que penpot est un espace de noms valide, et vous aurez la saisie semi-automatique pour les API Penpot tout au long de votre projet. Par exemple, la définition de votre plugin ressemblera à ceci :

penpot.ui.open("Your Plugin Name", "", {
  width: 500,
  height: 600
})

La dernière étape consiste à définir un manifeste de plugin dans un manifest.json et assurez-vous qu’il se trouve dans le répertoire outpot de Vite. Le manifeste indiquera où se trouve chaque actif et quelles autorisations votre plugin a besoin pour fonctionner :

{
  "name": "Your Plugin Name",
  "description": "A Super plugin that will win Penpot Plugin Contest",
  "code": "/plugin.js",
  "icon": "/icon.png",
  "permissions": [
    "content:read",
    "content:write",
    "library:read",
    "library:write",
    "user:read",
    "comment:read",
    "comment:write",
    "allow:downloads"
  ]
}

Une fois la configuration initiale effectuée, la communication entre l’API Penpot et l’interface du plugin se fait avec un système de messagerie bidirectionnel, pas si différent de ce que vous feriez avec un Web-Worker.

Ainsi, pour envoyer un message de votre plugin à l’API Penpot, vous pouvez procéder comme suit :

penpot.ui.sendMessage("Hello from my Plugin");

Et pour le recevoir en retour, vous devez ajouter un écouteur d’événement au window objet (la portée de niveau supérieur) de votre plugin :

window.addEventListener("message", event => {
  console.log("Received from Pendpot::: ", event.data);
})

Un conseil rapide sur les performances: Si vous créez un plugin plus complexe avec des vues différentes et peut-être même des itinéraires, vous devez disposer d’une logique de nettoyage. La plupart des frameworks offrent une ergonomie décente pour ce faire ; par exemple, React le fait via leurs déclarations return.

useEffect(() => {
  function handleMessage(e) {
    console.log("Received from Pendpot::: ", event.data);
  }
  window.addEventListener('message', handleMessage);
  
  return () => window.removeEventListener('message', handleMessage);
}, []);

Et Solid a onMount et onCleanup aides pour cela :

onMount(() => {
  function handleMessage(e) {
    console.log("Received from Penpot::: ", event.data);
  }
  window.addEventListener('message', handleMessage);
})

onCleanup(() => {
  window.removeEventListener('message', handleMessage);
})

Ou avec le @solid-primitive/event-listener bibliothèque d’assistance, elle sera donc automatiquement supprimée :

import { makeEventListener } from "@solid-primitives/event-listener";

function Component() {
  
  const clear = makeEventListener(window, "message", handleMessage);
  
  // ...
  return (<span>Hello!</span>)
}

Dans la documentation officielle, il y a un guide étape par étape qui vous guidera tout au long du processus de création, de test et de publication de votre plugin. Cela vous aidera même.

Alors, qu’est-ce que tu attends ?

Concours de plugins : Imaginez, construisez, gagnez

Eh bien, peut-être que vous attendez un coup de pouce de motivation. Le Pot à stylo l’équipe y a pensé, c’est pourquoi ils lancent un Concours de plugins!

Pour ce concours, ils veulent un plugin entièrement fonctionnel ; il doit être open source et inclure une documentation complète. Détaillant ses fonctionnalités, son installation et son utilisation. Le premier prix est de 1 000 $ US et les critères sont l’innovation, la fonctionnalité, la convivialité, les performances et la qualité du code. Le concours se déroulera du 15 novembre au 15 décembre.

Pensées finales

Si vous décidez de créer un plugin, j’aimerais savoir ce que vous construisez et quelle pile vous avez choisie. S’il vous plaît laissez-moi savoir dans les commentaires ci-dessous ou sur Ciel bleu!

(ouais)