Aujourd’hui, je vous invite à découvrir avec moi un outil de design que certains d’entre vous connaissent peut-être déjà : Penpot.

Si ce nom ne vous dit rien, ne vous en faites pas, je vais tout reprendre depuis le début et vous montrer pourquoi il est devenu un incontournable pour de nombreux designers et développeurs.

L’outil se présente comme une solution libre et open source que vous pouvez auto-héberger, mais qui est également accessible en ligne via votre navigateur. Conçu pour aider à la conception de designs pour les applications, les sites web et bien plus encore, il s’avère être un outil extrêmement intuitif. En quelques clics, vous placez vos éléments de design, des boutons, des images et d’autres composants, puis vous laissez Penpot générer le rendu du prototype et même le code CSS pour vous. Oui, directement du code CSS à intégrer dans vos projets web sans forcement avoir besoin de maitriser tous les paramètres de CSS.

L’une des grosses mises à jour récente de Penpot c’est son support du “flex layout”. Pour ceux qui ne sont pas familiers avec le terme, le flex layout (ou flexbox) est une norme CSS qui permet aux éléments de s’adapter automatiquement à la taille de l’écran ou de la fenêtre. Imaginez un bouton dont le texte change : au lieu de déborder, avec flexbox, le bouton s’agrandit. Penpot vous permet ainsi de créer des designs responsives, qui s’adaptent à toutes les tailles d’écran.

Evidemment, pour vous faire découvrir tout ça en détails, je vous ai concocté une vidéo tutoriel très détaillée de Flex Layout, pour que vous puissiez bien comprendre son fonctionnement et l’utiliser ensuite dans vos propres projets de sites web ou d’applications mobiles. J’espère que ça vous plaira !