L’utilisation des Slots dans notre Design System

Le contexte de scale et l’arrivée de nouveaux designers qui en découle nous permet d’avoir de nombreux retours sur l’organisation de Flipper, notre Design System, et ainsi de mettre l’emphase sur certains éléments qui se révèlent parfois difficiles à prendre en main.

Depuis quelques mois, un sujet revient souvent sur la table : l’utilisation des slots dans nos composants.

Tout d’abord, qu’est ce qu’un slot ?

Voyons un composant “main” comme une commode. Dans ce composant, nous avons placé d’autres composants slots, tous identiques, que l’on peut qualifier de tiroirs. Lorsque l’on a besoin d’utiliser un slot, nous ouvrons ce tiroir, et nous pouvons à ce moment là faire appel à un layout prédéfini (boutons, message d’alerte, liste, champ de recherche, etc…), ou appeler un layout composé en local. L’ouverture de ces différents tiroirs nous permet ainsi de structurer notre composant “main”, en gardant une cohérence par rapport aux autre composants construits de la même manière.

Pourquoi utilisons nous des slots et comment les utilisons-nous ?

Tout d’abord, contextualisons un peu. A l’origine, chaque composant de Flipper était composé d’un header, d’un body et d’un footer. Avec ce fonctionnement, quand nous avions besoin de créer un état différent d’une modale, nous étions obligés de dupliquer le composant, le détacher, puis créer un nouveau composant body qui contenait presque la même chose que le précédent. On créait ainsi de gros blocs avec des contenus très spécifiques qui n’étaient pas réutilisables ailleurs.

A ce moment là, Figma a sorti la vidéo Building flexible components using the “slot” method et la méthode nous a semblé beaucoup plus adaptée à notre usage que la précédente, et surtout plus maintenable. Nous avons donc créé des composants avec plusieurs slots, ce qui a donné lieu à notre fonctionnement actuel.

Nous avons aussi customisé ces slots, de manière à ce que l’on ait pour chacun un padding au choix et un spacing prédéfini entre les slots. Ainsi, nous pouvions garder une unicité entre les composants, et faire en sorte que les changements effectués dans le DS soient répercutés sans chercher à comprendre si les éléments sont liés ou non.

Quels sont les inconvénients rencontrés lors de cette utilisation ?

La principale friction à l’utilisation de ce système de multi-slots est la réorganisation des éléments. Il est en effet impossible de changer l’ordre des composants à l’intérieur du composant principal. Lors des itérations, s’il faut changer de place un slot, il faut les éditer un par un. C’est chronophage et sujet aux erreurs.

Prenons pour exemple un cas concret que nous rencontrons régulièrement : l’ajout d’un nouveau filtre dans une liste déjà existante. Pour cela, nous allons importer le composant Dropdown composé de slots qui appellent chacun une entrée de filtres (icône + label du filtre).

Imaginons que nous souhaitions ajouter dans la dropdown ci dessous un filtre “Mémo” permettant de trier les opérations contenant ou non un mémo.

Les filtres étant classés par ordre de fréquence d’utilisation, nous ne pouvons dans un premier temps que spéculer sur le placement de ce filtre parmi les autres. Si nous décidons de rajouter ce filtre entre “Montant” et “Statuts”, la solution la plus simple serait de dupliquer le slot “Montant”, le renommer “Mémo”, et de modifier l’icône ainsi que le label. Cependant, ce n’est pas possible de dupliquer un composant placé dans un composant sur Figma.

Ce système de multi-slots nous oblige donc à remplacer “Statuts” par “Mémo”, puis de rajouter un slot préalablement masqué en dessous (s’il en reste un) qui correspondrait à l’entrée “Statuts”, ce qui est plus chronophage.

Si une fois les datas d’utilisations collectées nous orientent vers un placement entre “Type d’opérations” et “Catégories”, nous devons de nouveau tout changer slot par slot, au lieu de simplement déplacer le slot “Mémo”.

Quels seraient les avantages et les inconvénients à l’utilisation d’un seul et unique slot par composant ?

L’utilisation d’un slot unique a 3 avantages :

• une réorganisation facile : chaque élément peut être changé de place très facilement au niveau du composant local.
• un gain de flexibilité
• un gain en poids de fichier : on se retrouve avec moins de slots masqués, et donc des fichiers moins lourds. Un slot utilise 0.05Gb de mémoire, et un side panel comportant plusieurs slots en utilise 0.11Gb.

En parallèle, les inconvénients sont :

• un potentiel manque d’unicité des composants dans le DS : on a tendance à créer beaucoup de composants locaux qui sont donc moins réutilisables entre les projets.
• des erreurs potentielles : on n’est pas à l’abri des erreurs type spacing entre les composants
• le temps que cela nécessiterait : en effet les composants que nous utilisons aujourd’hui sont utilisés dans de nombreux écrans. Il faudrait refaire une dropdown, une modale, et tous les composants comprenant des slots, et les remplacer dans les maquettes existantes, ce qui serait très chronophage.

Les actions prises suite à cette réflexion

Nous avons décidé de privilégier la cohérence entre composants en restant sur ce système de multi-slots et en trouvant quelques astuces pour limiter les pain points :

• utiliser un slot sur 2, pour en avoir toujours un sous la main si besoin. Cette technique peut s’avérer pratique dans certains cas, mais souvent elle ne fait que repousser la difficulté rencontrée. En plus, ça fait utiliser 2 fois plus de slots qu’en temps normal, et donc alourdit le fichier.
• Garder un slot et masquer les autres. Ce slot devient le body et on n’a plus le problème de réorganisation.

Dans un monde idéal, il faudrait qu’une prochaine mise à jour de Figma permette de réorganiser les composants inclus dans un composant principal. Ce serait pour nous un game changer dans notre organisation, et ça nous permettrait d’utiliser pleinement le potentiel du système multi-slots qui malgré tout a beaucoup d’avantages.

Si tu as aimé cet article, n’hésite pas à le clap et à le partager. N’hésite pas également à nous dire en commentaire si tu utilises ce système de slots dans ton Design System, et si oui comment. Nous serions également ravis d’en discuter.

Si tu as des questions, tu peux me contacter via LinkedIn. Pour finir, si tu es intéressé·e par rejoindre une équipe design qui s’entraide, collabore et remet en question quotidiennement sa façon de travailler, tu peux postuler ici.