Comment tirer parti des variantes de composants dans Penpot –

Depuis que Brad Frost a popularisé l’utilisation des systèmes de conception dans la conception numérique en 2013ils sont devenus une ressource inestimable pour les organisations – et même les particuliers – qui souhaitent créer des modèles de conception réutilisables qui semblent cohérents.

Mais Brad n’a pas seulement popularisé les systèmes de conception ; il nous a également donné un cadre pour les structurer, et bien que nous ne soyons pas obligés de suivre exactement ce cadre (la plupart des gens l’adaptent à leurs besoins), une partie particulièrement importante de la plupart des systèmes de conception est le variantesqui sont variantes de composants. Les variantes de composants permettent de concevoir des composants identiques aux autres composants, mais différents, de sorte qu’ils soient immédiatement compris par les utilisateurs, tout en apportant de la clarté pour un contexte unique.

Cela rend les variantes de composants tout aussi importantes que les composants eux-mêmes. Ils garantissent que nous ne créons pas trop de composants qui doivent être gérés individuellement, même s’ils ne diffèrent que légèrement des autres composants, et comme les variantes de composants sont regroupées, ils garantissent également l’organisation et la cohérence visuelle.

Et maintenant nous pouvons les utiliser dans Pot à stylol’outil de conception Web open source dans lequel la conception est exprimée sous forme de code. Dans cet article, vous découvrirez les variantes, leur place dans systèmes de conceptionet comment les utiliser efficacement dans Penpot.

Étape 1 : Mettez de l’ordre dans vos jetons de conception

Pour l’essentiel, ce qui différencie une variante d’une autre est la jetons de conception qu’il utilise. Mais qu’est-ce qu’un jeton de conception exactement ?

Imaginez la couleur d’une marque, disons une valeur de couleur égale à hsl(270 100 42) en CSS. Nous l’enregistrons sous forme de « jeton de conception » appelé color.brand.default afin que nous puissions le réutiliser plus facilement sans avoir à nous souvenir du plus encombrant hsl(270 100 42).

À partir de là, nous pourrions également créer un deuxième jeton de conception appelé background.button.primary.default et réglez-le sur color.brand.defaultles rendant ainsi égaux à la même couleur, mais avec des noms différents pour établir une séparation sémantique entre les deux. Cette référence à la valeur d’un jeton à partir d’un autre jeton est souvent appelée « alias ».

Cette configuration nous donne la possibilité de modifier la valeur de la couleur à l’échelle du document, de modifier la couleur utilisée dans le composant (peut-être en passant à un alias de jeton différent) ou de créer une variante du composant qui utilise une couleur différente. En fin de compte, l’objectif est de pouvoir apporter des modifications à plusieurs endroits à la fois plutôt qu’un par un, principalement en modifiant les valeurs des jetons de conception plutôt que la conception elle-même, à des portées spécifiques plutôt que de nous limiter à des modifications tout ou rien. Cela nous permet également de faire évoluer notre système de conception sans contraintes.

Dans cet esprit, voici une idée approximative de quelques jetons de conception liés aux couleurs pour un bouton principal avec des états de survol et désactivé :

Nom du jeton	Valeur du jeton
color.brand.default	hsl(270 100 42)
color.brand.lighter	hsl(270 100 52)
color.brand.lightest	hsl(270 100 95)
color.brand.muted	hsl(270 5 50)
background.button.primary.default	{color.brand.default}
background.button.primary.hover	{color.brand.lighter}
background.button.primary.disabled	{color.brand.muted}
text.button.primary.default	{color.brand.lightest}
text.button.primary.hover	{color.brand.lightest}
text.button.primary.disabled	{color.brand.lightest}

Pour créer un jeton de couleur dans Penpot, passez à l’onglet « Jetons » dans le panneau de gauche, cliquez sur le plus (+) à côté de « Couleur », puis spécifiez le nom, la valeur et la description facultative.

Par exemple:

• Nom: color.brand.default,
• Valeur: hsl(270 100 42) (il y a un sélecteur de couleurs si vous en avez besoin).

C’est à peu près le même processus pour les autres types de jetons de conception.

Ne vous inquiétez pas, je ne vais pas vous expliquer chaque jeton de conception, mais je vais vous montrer comment créer un jeton de conception. alias. Répétez simplement les étapes ci-dessus, mais pour la valeur, remarquez comment je viens de référencer un autre jeton de couleur (assurez-vous d’inclure les accolades) :

• Nom: background.button.primary.default,
• Valeur: {color.brand.default}

Désormais, si la valeur de la couleur change, l’arrière-plan des boutons changera également. Mais aussi, si nous voulons dissocier la couleur des boutons, tout ce que nous avons à faire est de référencer un jeton ou une valeur de couleur différente. Mikołaj Dobrucki donne beaucoup plus de détails dans un autre Article fracassantmais il convient de noter ici que les jetons de conception Penpot sont indépendants de la plate-forme. Ils suivent les normes Format W3C DTCGce qui signifie qu’ils sont compatibles avec d’autres outils et s’exportent facilement vers toutes les plateformes, y compris le Web, iOS et Android.

Dans les prochaines étapes, nous allons créer un composant bouton et ses variantes tout en insérant différents jetons de conception dans différentes variantes. Vous verrez pourquoi cela est si utile et comment l’utilisation de jetons de conception dans les variantes profite aux systèmes de conception dans leur ensemble.

Étape 2 : créer le composant

Vous devrez créer ce qu’on appelle un composant « principal », qui est celui que vous mettrez à jour selon vos besoins à l’avenir. Les autres composants – ceux que vous insérerez réellement dans vos conceptions – seront des copies (ou « instances ») du composant principal, ce qui est en quelque sorte le point, n’est-ce pas ? Mettez à jour une fois et les modifications se répercutent partout.

En voici un que j’ai réalisé plus tôt, sans les couleurs :

Pour appliquer un jeton de conception, assurez-vous que vous êtes sur l’onglet « Jetons » et que le calque approprié est sélectionné, puis sélectionnez le jeton de conception que vous souhaitez lui appliquer :

Peu importe la variante que vous créez en premier, mais vous souhaiterez probablement utiliser celle par défaut comme point de départ, comme je l’ai fait. Dans tous les cas, pour transformer ce bouton en composant principal, sélectionnez l’objet bouton via le canevas (ou l’onglet « Calques »), faites un clic droit dessus, puis choisissez l’option « Créer un composant » dans le menu contextuel (ou appuyez simplement sur Ctrl / ⌘ + K après l’avoir sélectionné).

N’oubliez pas de nommer également le composant. Vous pouvez le faire en double-cliquant sur le nom (également via le canevas ou l’onglet « Calques »).

Étape 3 : créer les variantes de composant

Pour créer une variante, sélectionnez le composant principal et appuyez sur le bouton Ctrl / ⌘ + K raccourci clavier, ou cliquez sur l’icône qui révèle l’info-bulle « Créer une variante » (située dans l’onglet « Conception » du panneau de droite).

Ensuite, pendant que la variante est toujours sélectionnée, apportez les modifications de conception nécessaires via l’onglet « Conception ». Ou, si vous souhaitez échanger des jetons de conception contre d’autres jetons de conception, vous pouvez le faire de la même manière que vous les avez appliqués au départ, via l’onglet « Jetons ». Rincez et répétez jusqu’à ce que toutes vos variantes soient conçues sur la toile :

Après cela, comme vous l’avez peut-être deviné, vous souhaiterez nommer vos variantes. Mais évitez de faire cela via le panneau « Calques ». Au lieu de cela, sélectionnez une variante et remplacez « Propriété 1 » par une étiquette décrivant la propriété différenciatrice de chaque variante. Étant donné que mes variantes de bouton dans cet exemple représentent différents états du même bouton, j’ai nommé cet « État ». Ceci s’applique à toutes les variantes, vous ne devez donc le faire qu’une seule fois.

À côté du nom de la propriété, vous verrez « Valeur 1 » ou quelque chose de similaire. Modifiez cela pour chaque variante, par exemple, le nom de l’état. Dans mon cas, je les ai nommés « Par défaut », « Survol » et « Désactivé ».

Et oui, vous pouvez ajouter plus de propriétés à un composant. Pour ce faire, cliquez sur le plus à proximité (+) icône. Cependant, je parlerai davantage des variantes de composants à grande échelle dans une minute.

Pour voir le composant en action, passez à l’onglet « Actifs » (situé dans le panneau de gauche) et faites glisser le composant sur le canevas pour en initialiser une instance. Encore une fois, n’oubliez pas de choisir la bonne valeur de propriété dans l’onglet « Conception » :

Si vous possédez déjà un Système de conception Penpotcombiner plusieurs composants en un seul composant avec des variantes est non seulement facile et sans erreur, mais vous pourriez déjà être prêt à y aller si vous utilisez un système de dénomination de propriétés robuste qui utilise des barres obliques (/). Penpot a mis en place un guide très simplemais le schéma ci-dessous le résume assez bien :

Comment fonctionnent les variantes de composants à grande échelle

Les jetons de conception, les composants et les variantes de composants – la triple menace des systèmes de conception – fonctionnent ensemble, non seulement pour créer des systèmes de conception puissants mais flexibles, mais aussi des systèmes de conception durables et évolutifs. Ceci est plus facile à réaliser en anticipant, en commençant par des jetons de conception qui séparent le « quoi » du « pourquoi » à l’aide d’alias de jetons, même si cela peut paraître verbeux au premier abord.

Par exemple, j’ai utilisé color.brand.lightest pour la couleur du texte de chaque variante, mais au lieu de brancher directement ce jeton de couleur, j’ai créé des alias tels que text.button.primary.default. Cela signifie que je peux modifier la couleur du texte de n’importe quelle variante ultérieurement sans avoir à me plonger dans la variante réelle sur le canevas, ni à forcer une modification. color.brand.lightest cela pourrait avoir un impact sur un tas d’autres composants.

Car rappelez-vous, même si le composant et ses variantes nous permettent de réutiliser le bouton, les jetons de couleur nous permettent de réutiliser les couleursqui pourrait être utilisé dans des dizaines, voire des centaines, d’autres composants. Un système de conception est comme un écosystème vivant et respirant, dont certaines parties sont connectées, d’autres ne le sont pas, et certaines parties sont ou ne sont pas connectées mais pourraient devoir l’être plus tard, et nous devons être prêts pour cela.

La bonne nouvelle est que Penpot rend tout cela assez facile à gérer à condition de planifier un peu à l’avance.

Considérez les éléments suivants :

• Les jetons de conception que vous réutiliserez (par exemple, les couleurs, les tailles de police, etc.),
• Où les alias des jetons de conception seront réutilisés (par exemple, boutons, titres, etc.),
• Organiser les jetons de conception en ensembles,
• Organiser les décors en thèmes,
• Organiser les thèmes en groupes,
• Les différents composants dont vous aurez besoin, et
• Les différentes variantes et propriétés de variantes dont vous aurez besoin pour chaque composant.

Même les boutons que j’ai conçus ici aujourd’hui peuvent être étendus bien au-delà de ce que j’ai déjà modélisé. Pensez à toutes les variantes possibles qui pourraient survenir, comme une couleur de bouton secondaire, une couleur tertiaire, une couleur de confirmation, une couleur d’avertissement, une couleur annulée, des couleurs différentes pour les modes clair et sombre, sans parler de plus de propriétés pour plus d’états, tels que les états actif et focus. Et si nous voulions toute une matrice de variantes, comme où les boutons dans un état désactivé peuvent être survolés et où tous les boutons peuvent être concentrés ? Ou lorsque certains boutons ont des icônes au lieu d’étiquettes de texte, ou les deux ?

Les conceptions peuvent devenir très compliquées, mais une fois que vous les avez organisées en jetons de conception, composants et variantes de composants dans Penpot, elles sembleront en fait assez simples, surtout une fois que vous pourrez les voir sur le canevas, et encore plus une fois que vous aurez apporté un changement significatif en quelques secondes seulement sans rien casser.

Conclusion

C’est ainsi que nous faisons fonctionner les variantes de composants à grande échelle. Nous bénéficions des avantages de réutilisabilité tout en gardant le flexibilité pour développer n’importe quel aspect de notre système de conception, grand ou petit, sans en sortir. Et les outils de conception comme Penpot permettent non seulement d’établir un système de conception, mais également d’exprimer ses jetons et styles de conception sous forme de code.