Lyon

Gérer la distinction entre composants autonomes et sous-composants dans un design system Figma

Summary: L'auteur, un designer basé à Lyon, recherche des conseils pour optimiser son design system sur Figma. Il se heurte à des défis concernant la gestion des composants autonomes, comme les boutons, et des sous-composants qui ne sont pas indépendants. Plus précisément, il est confronté au problème de gérer un composant Stepper comportant plusieurs sous-composants dont le nombre peut varier. Les solutions envisagées, comme la création de nombreuses variantes ou le réglage de la visibilité des sous-composants, pourraient alourdir le projet. L'auteur sollicite des idées pour maintenir un système de design léger, flexible et facile à gérer.
AI Summary

Voici la version révisée du message en tenant compte de ta correction :

Salut les designers de Lyon !

Je suis en pleine réflexion sur mon design system sur Figma, notamment sur la gestion des composants autonomes (comme un bouton ou un lien utilisable directement) et des sous-composants (des éléments qui sont publiés sur Figma mais qui ne fonctionnent pas tout seuls). Je pourrais créer un composant final qui intègre ces sous-composants, mais je me retrouve face à un problème pratique.

Par exemple, j’ai créé un composant pour un stepper (voir capture ci-dessous) :

Le composant Stepper Item que j’ai créé est utilisé pour chaque étape du stepper. Dans un projet, le nombre de ces sous-composants peut varier, ce qui complique les choses :

  • Soit je fais des variants pour chaque possibilité, mais ça devient vite lourd avec toutes les combinaisons.

  • Soit je prévois un nombre de sous-composants par défaut élevé et je gère la visibilité selon les besoins, mais si je fais ça avec plusieurs composants, ça peut sérieusement alourdir mes projets.

Bref, je cherche une manière plus légère et plus pratique de gérer ça. Vous avez déjà été confrontés à ce genre de défi ? Comment vous gérez ce type de situation pour garder un design system flexible et facile à maintenir ? Vos conseils et expériences m'intéressent beaucoup !

1 comment

Hello Nathan,

Quand tu dis Dans un projet, le nombre de ces sous-composants peut varier, est-ce que tu as des exemples de cas d'usage précis ?

En travaillant sur le même composant, j'avais dupliqué les variants (5 étapes x5, 4 étapes x4, 3 étapes x3, etc...) pour gérer tous nos cas (de 2 à 5 étapes). Comme toi, je trouvais ça lourd à 1ère vue mais finalement :

  • Pour les modif., avec le multi-edit c'est super rapide

  • On a max. les étapes à 5 (règle produit), sinon on perd l'intérêt d'un indicateur de progrès + pas scalable sur mobile au delà

  • Le composant a largement fait le job sans jamais être retouché, donc avec le recul ça aurait été overkill de chercher + d'optimisation

En espérant que ça t'aide, sinon n'hésite pas si tu as des questions !

Emile