Penpot 2.0 : l'outil de design open source adopte la grille CSS et refond ses composants

2024-04-09 · Éditeur : Penpot · Domaine : Design, UX et UI

L'alternative libre à Figma publie sa version majeure : mise en page CSS Grid, bibliothèques de composants refondues, interface redessinée et export HTML.

Ce qui change

  • La mise en page CSS Grid produit directement du code exploitable par les développeurs.
  • Les bibliothèques de composants reposent sur une nouvelle structure de données.
  • L'interface est redessinée avec un mode clair et sombre et une navigation au clavier.
  • Penpot reste auto-hébergeable, un argument pour les organisations soumises à des contraintes de souveraineté.

### Contexte Le **9 avril 2024**, la société espagnole **Kaleidos** publie **Penpot 2.0**, version majeure de son outil de conception d'interfaces open source fonctionnant dans le navigateur. L'abandon du rachat de Figma par Adobe, fin 2023, avait relancé l'intérêt pour des alternatives libres. ### Caractéristiques - Prise en charge de la **mise en page CSS Grid** (lignes et colonnes), qui s'ajoute au Flex Layout existant. - **Bibliothèques de composants** reconstruites sur une nouvelle structure de données, pensée pour les grands design systems. - **Interface redessinée** : barre d'outils en haut, thèmes clair et sombre, meilleur contraste, navigation au clavier. - Inspection du code enrichie : **balisage HTML** en plus du SVG et du CSS. - Penpot revendiquait alors, selon It's FOSS, **plus de 600 000** professionnels et **120 000** équipes. ### Pourquoi c'est important Penpot décrit son modèle comme du « design as code » : les fichiers s'appuient sur des standards du web, ce qui réduit l'écart entre maquette et implémentation. Sa licence libre et son auto-hébergement en font une option crédible pour les administrations et les entreprises qui ne veulent pas confier leurs maquettes à un service américain. ### À retenir Avec la 2.0, Penpot atteint un niveau fonctionnel qui permet de l'évaluer sur de vrais projets de design system, et plus seulement comme curiosité open source.

Liens

Tags : Open Source, Design system, CSS Grid