00:00:00Voici Penpot, un outil de conception open-source qui rivalise avec des outils comme Figma.
00:00:05Bon, au premier abord, ça ressemble à Figma, mais le comportement est tout autre.
00:00:10Car sous le capot, il utilise du vrai CSS, sans avoir besoin de conversion ultérieure.
00:00:15Et cela change considérablement le problème du passage de témoin.
00:00:18Laissez-moi vous montrer ce que je veux dire.
00:00:20Penpot est un outil de conception d'interface et de prototypage basé sur navigateur.
00:00:29En surface, oui, ça ressemble à Figma ou Sketch.
00:00:32Mais en réalité, voici la différence majeure.
00:00:35Penpot est 100% open-source et repose sur les vrais standards du web.
00:00:40SVG, CSS Flexbox, Grid et HTML.
00:00:43Plutôt que de concevoir dans quelque chose qu'il faut décoder et déstructurer plus tard,
00:00:49vous êtes déjà plus proche du fonctionnement réel du web.
00:00:52Vous pouvez l'auto-héberger avec Docker en une seule commande,
00:00:54ce que je vais faire dans cette vidéo, car c'est mon domaine de prédilection.
00:00:58Les versions open-source d'outils et voir comment elles se comparent.
00:01:01Avec Penpot, les designers ont toujours accès aux composants, mises en page, prototypes.
00:01:06Mais les développeurs ont la partie qui compte vraiment : une sortie qui ressemble à du vrai code.
00:01:11Il n'y a pas de couche intermédiaire étrange, pas de devinettes sur ce qui se passe.
00:01:14Et c'est gratuit.
00:01:15Fichiers illimités, collaborateurs illimités, c'est pour ça que les gens s'y intéressent.
00:01:20Si vous aimez les outils open-source et les astuces de codage pour accélérer votre flux de travail,
00:01:23assurez-vous de vous abonner à la chaîne.
00:01:25Nous publions des vidéos en permanence.
00:01:27Penpot est un outil de design.
00:01:28Alors pourquoi devriez-vous vous en soucier, surtout si vous êtes développeur ?
00:01:31Parce qu'il résout un problème très spécifique.
00:01:34La difficulté de transmettre un projet ou de convertir un design en vrai code.
00:01:39Penpot rend le design natif au web.
00:01:42Ainsi, quand vous inspectez quelque chose, vous ne devinez pas, vous lisez.
00:01:46Laissez-moi vous montrer.
00:01:48Très bien, place à une petite démonstration.
00:01:50Ceci tourne en direct sur mon instance auto-hébergée de Penpot.
00:01:54Je l'ai lancée avec une seule commande Docker Compose up en utilisant
00:01:58le fichier Docker Compose officiel que nous venons de configurer.
00:02:00C'était énorme.
00:02:02Cela a pris un peu de temps à démarrer, mais maintenant que c'est en marche, ça fonctionne très bien.
00:02:07Et nous obtenons une belle page d'accueil, un look épuré où je peux créer un nouveau projet.
00:02:12Maintenant, construisons quelque chose, juste une carte simple, rien d'extraordinaire.
00:02:16Juste un conteneur, réglez-le sur flexbox, ajoutez un peu de rembourrage.
00:02:21Je vais y ajouter un titre, du texte et un bouton.
00:02:24Peut-être en ajouter un autre ici, une autre carte, je peux copier-coller.
00:02:28Je vais faire quelques modifications rapides.
00:02:30Nous allons passer en mode inspection.
00:02:32Et c'est là la partie importante.
00:02:33Vous obtenez une structure propre dans le CSS réel, propriétés flexbox, espacement, mise en page.
00:02:39Pas une traduction approximative, c'est quelque chose que vous comprenez déjà.
00:02:42Vous pouvez copier cela et le mettre directement dans votre projet.
00:02:46Vous avez aussi des variantes, des jetons, des flux de prototypes et l'export en SVG.
00:02:51C'est ça le point clé ici.
00:02:52Cela supprime énormément de friction pour
00:02:54les équipes de développement, surtout quand vous gérez vous-même toute la pile.
00:02:58Parlons maintenant de la partie qui rend la plupart des développeurs sceptiques.
00:03:02Au début, on se dit : super, encore un outil de design.
00:03:06Mais la différence n'est pas dans l'apparence, c'est dans le fonctionnement.
00:03:09Figma simule les mises en page.
00:03:12L'auto-layout est inspiré par flexbox, mais vous finissez toujours par traduire tout ça
00:03:16dans votre tête.
00:03:17Penpot commence bien plus près du CSS réel, donc
00:03:21il y a moins de conversion mentale entre le design et le code.
00:03:25Ensuite, il y a le verrouillage, n'est-ce pas ?
00:03:26Figma utilise des fichiers propriétaires.
00:03:29Nous avons des modèles de tarification par siège.
00:03:31Penpot est open-source, vous pouvez donc l'auto-héberger.
00:03:34Vos données restent en SVG, CSS et JSON.
00:03:38Le passage de témoin est différent aussi car dans Figma, ça ressemble à une couche supplémentaire, non ?
00:03:42Mode Dev, plugins, étapes supplémentaires.
00:03:45Dans Penpot, c'est intégré directement.
00:03:47La vue d'inspection est déjà plus proche de ce dont nous avons réellement besoin.
00:03:50Et pour être juste, Figma est génial.
00:03:53Je l'utilise, c'est énorme, c'est un écosystème poli.
00:03:56Mais Penpot est clairement conçu avec les développeurs à l'esprit dès le départ.
00:04:00Alors, qu'est-ce que les développeurs aiment vraiment là-dedans ?
00:04:02Eh bien, le plus important, comme je l'ai dit, non ?
00:04:04C'est simple, le problème du passage de témoin devient plus petit.
00:04:07C'est énorme pour nous.
00:04:08Vous ne faites plus de rétro-ingénierie sur les mises en page.
00:04:11Vous lisez quelque chose qui se mappe directement en CSS.
00:04:15Cela se voit aussi dans les jetons de design.
00:04:18Couleurs, espacement, typographie, ils sont structurés d'une manière qui ressemble plus à
00:04:22la façon dont vous pensez déjà en code.
00:04:24Et l'auto-hébergement est une affaire importante pour certaines équipes.
00:04:27Si vous vous souciez de la confidentialité, des outils internes, du CI/CD, tout cela compte, n'est-ce pas ?
00:04:33Mais l'open source n'est pas parfait, aucun outil n'est parfait, même Figma, n'est-ce pas ?
00:04:37Mais Penpot peut avoir du mal avec de très gros fichiers.
00:04:40L'écosystème de plugins est beaucoup plus réduit.
00:04:43Et si vous êtes très habitué à Figma, il y aura une certaine courbe d'apprentissage,
00:04:47mais honnêtement, c'est très simple à prendre en main car c'est une manière différente de penser.
00:04:51Donc oui, moins poli dans certains domaines, mais un fossé bien plus petit entre le design et
00:04:56le développement, ce qui est honnêtement ce que beaucoup d'entre nous recherchent.
00:04:59Alors, est-ce que ça vaut le coup ?
00:05:01Je pense que oui.
00:05:02C'était très amusant.
00:05:02J'aime les outils comme celui-ci.
00:05:03Donc pour beaucoup d'entre vous, développeurs, oui.
00:05:06Si vous travaillez sur des projets secondaires ou quelque chose de lourd en développement, cela a du sens,
00:05:10surtout si vous vous souciez d'économiser de l'argent, n'est-ce pas ?
00:05:12Vous construisez un MVP, vous construisez quelque chose comme ça,
00:05:14vous essayez d'éviter le verrouillage, et
00:05:16vous voulez obtenir des designs qui se traduisent proprement en code.
00:05:19Maintenant, si vous êtes dans une grande entreprise avec des systèmes de design massifs,
00:05:23vous êtes déjà construit autour de Figma.
00:05:24Donc vous n'allez probablement pas passer à ceci, du moins pas du jour au lendemain, mais
00:05:28ce n'est pas vraiment ça le point.
00:05:29Penpot n'a pas besoin de tout remplacer pour être utile.
00:05:31Pour beaucoup d'équipes, pour beaucoup d'entre vous, il couvre la plupart de ce dont vous avez besoin,
00:05:35il accélère le développement.
00:05:36Et c'est pour ça que de plus en plus de développeurs commencent vraiment à l'essayer.
00:05:39Cela réduit tout ce temps de passage de témoin nécessaire pour transformer un design en code.
00:05:45Si vous voulez l'essayer, c'est facile.
00:05:46Allez sur Penpot app, utilisez la version cloud, ou faites ce que je fais.
00:05:50Auto-hébergez-le avec Docker si vous voulez plus de contrôle, tout comme ici.
00:05:54Si vous aimez les outils open source et les conseils de codage comme celui-ci,
00:05:57assurez-vous de vous abonner à la chaîne Better Stack.
00:05:59On se voit dans une prochaine vidéo.