xpenpot scaled

– Article en partenariat avec Penpot –

Après vous avoir présenté les Flex Layout, les CSS Grid Layout et les composants dans Penpot, je suis ravi de vous faire découvrir aujourd’hui une nouvelle fonctionnalité qui va vraiment changer votre façon de concevoir des interfaces : les Design Tokens. Ce qui est particulièrement remarquable, c’est que Penpot est le premier et unique outil de design à intégrer les design tokens de façon native !

Les Design Tokens sont, ce qu’on pourrait appeler, des décisions de design centralisées. Il s’agit d’un système de paires clé-valeur qui définissent les caractéristiques visuelles de vos interfaces telles que les couleurs, dimensions, espacements, arrondis, etc. De plus, Penpot suit l’approche la plus standardisée disponible pour les design tokens (W3C DTCG), ce qui garantit la compatibilité avec de nombreux outils et technologies !

Cette approche vous permet de :

  • Centraliser vos choix de design
  • Maintenir une cohérence entre tous vos projets
  • Modifier rapidement l’apparence de vos interfaces
  • Exporter et importer facilement ces paramètres entre différents projets
  • Adapter vos designs à différentes plateformes
  • Gérer les versions de vos décisions de design
  • Harmoniser les projets multi-marques et supporter les systèmes de design à grande échelle

Comme ça, fini les incohérences de design et les décisions redondantes ! Avec les Design Tokens, vous définissez une fois pour toutes vos standards visuels et les appliquez de manière uniforme sur l’ensemble de vos interfaces.

Dans Penpot, les Design Tokens s’organisent autour de deux concepts clés :

  1. Les thèmes : ils vous permettent de créer différentes variations visuelles (thème clair, thème sombre, thème mobile, etc.)
  2. Les sets : ils vous aident à organiser vos tokens par catégories (boutons, titres, cartes, etc.)

Et pour le moment, Penpot propose 8 types de tokens :

  • Border Radius : pour l’arrondissement des coins
  • Colors : pour les couleurs
  • Dimensions : pour les tailles
  • Opacity : pour les niveaux d’opacité
  • Rotation : pour l’orientation des éléments
  • Size : pour les dimensionnements
  • Spacing : pour les espacements
  • Stroke Width : pour l’épaisseur des traits

L’utilisation des Design Tokens est vraiment intuitive. Je vous montre d’ailleurs tout ça dans cette vidéo :


Les Design Tokens de Penpot représentent donc une jolie avancée pour tous ceux qui cherchent à créer des interfaces cohérentes et facilement maintenables. Bien sûr, cette fonctionnalité, encore récente, est appelée à s’enrichir avec le temps (J’attends notamment la prise en charge de la typographie et des couleurs de texte avec impatience !).

Bref, si vous n’avez pas encore testé Penpot, c’est le moment idéal pour vous y mettre ! C’est libre, open source, disponible directement via votre navigateur à l’adresse penpot.app.

Bon design à tous !


Source link

Categorized in:

Technologie