Ça sert à quoi un composant ?

Le meilleur logiciel de design de la planète (aka Figma) nous donne la possibilité de créer des composants. Un composant, c’est un élément référent que nous allons créer et que nous allons pouvoir dupliquer sur l’ensemble des maquettes sous forme d’instances. Le fonctionnement est très puissant, si vous apportez des modifications au composant référent, toutes ses instances seront automatiquement modifiées.

Un exemple assez simple

Imaginez que vous souhaitiez concevoir un bouton sur votre logiciel de design. Vous allez le créer une première fois, puis le dupliquer partout, là ou vous avez besoin d’intégrer un bouton. Chaque bouton est indépendant et peut être modifié sans impacter les autres.

Reprenons le même exemple en intégrant la notion de composants.

Imaginez que vous souhaitiez concevoir un bouton sur votre logiciel de design. Vous allez créer le bouton une première fois et le convertir en composant, puis le dupliquer partout, là ou vous avez besoin de l’intégrer. Chaque bouton dupliqué est donc dépendant du composant créé initialement. Si je viens rajouter une icône dans mon composant bouton, alors l’ensemble des boutons dupliqués sur la maquette se modifieront automatiquement.

Si on creuse un peu plus dans le fonctionnement d’un composant, on peut voir qu’il est possible de lui assigner des propriétés. Ces propriétés vont nous permettre de personnaliser chaque élément contenu dans le composant. Ainsi, on va associer des propriétés au composant référent, qui vont venir s’appliquer sur chacune des instances et vont donc permettre de les personnaliser en quelques clics.

Reprenons notre exemple de bouton avec son icône. Nous avons ajouté des propriétés à notre composant. Ces propriétés vont permettre de le personnaliser. On peut par exemple définir une propriété texte qui va être liée au texte du bouton, ou une propriété booléenne qui va être lié à l’icône. Ainsi, tous les boutons dupliqués gardent les propriétés du composant initial, mais sont indépendants. On pourra donc afficher l’icône sur ce bouton, la cacher sur un autre, et potentiellement intégrer des textes différents.

Une réflexion qui gravite autour de l’Atomic Design

L’idée de cet article n’est pas de découvrir l’Atomic Design (merci Brad Frost 🙌), mais cette approche fait partie intégrante de notre processus de conception de composants personnalisables.

Cette approche utilise les composants en tant qu’éléments vivants et évolutifs, et peut s’apparenter à vos cours de chimie au lycée ! Pour vulgariser et essayer d’être le plus simple possible, l’idée finale est que chaque élément puisse être combiné à un autre afin de fonctionner.

On part donc de la création de simples composants que l’on va appeler les atomes, que nous allons assembler entre eux et convertir en composant pour créer des molécules, que nous allons pouvoir fusionner entre elles, toujours sous forme de composants afin de créer des organismes, et toujours dans le même processus, arriver à la création de templates et de pages. On part donc des composants les plus petits que l’on va combiner jusqu’à créer des composants plus gros, puis créer des vues.

Reprenons, encore et encore, l’exemple de notre bouton et son icône. Si on suit cette approche, on peut imaginer que le bouton est une molécule, composée de plusieurs atomes assemblés : le texte et l’icône. Puis nous allons créer un bouton primaire et un secondaire qui ensemble vont former un organisme. Vous avez compris le processus !

Tout ça pour vous dire que nous avons créé notre kit de composants pour wireframes ! 🎁

Sur la base des deux points évoqués précédemment, nous avons donc cherché à lister l’ensemble des éléments récurrents d’un projet à l’autre, dans leur forme et dans leur fonction. L’objectif est simple, prendre du temps à les identifier et à les créer, pour être plus productif sur nos projets et consacrer notre de temps sur des parcours plus complexes.

🚨 Attention, nous parlons bien ici d’un kit utilisé sur nos wireframes qui nous permettent de concentrer sur la structure et le contenu d’un produit, et non sur l’UI Design où Manu préfère partir d’une feuille blanche et laisser exprimer sa créativité.

Si ce dernier en est à ses prémices, il est amené à évoluer continuellement dans les mois à venir, au fil des projets, de nos observations, de nos besoins et de nos apprentissages. Nous voyons ce kit comme évolutif, à partager, et personnalisable autant que possible.

Des avantages en veux-tu en voilà !

Selon nous, il existe de nombreux avantages à créer son kit de composants. On a décidé de vous lister les plus évidents, selon notre expérience :

Gain de temps : imaginez le confort de lancer un nouveau projet et d’avoir son espace prêt à l’emploi. Pas besoin de refaire - encore et encore - l’ajout de styles comme les couleurs, tailles de typo, grilles, etc… Vous n’avez plus qu’à vous exprimer et concevoir votre maquette.

Mises à jour régulières : ce kit est mis à jour continuellement. Un nouvel élément, un nouveau fonctionnement ? Nous l’intégrerons au fil des projets grâce à nos apprentissages et notre expérience. Aujourd’hui composé d’éléments, nous avons la possibilité demain d’y ajouter des templates de pages assez classiques et d’arriver sur un espace assez conséquent.

Ne pas réinventer la roue : notre métier ne consiste pas à réinventer la roue. Un champ de formulaire est un champ de formulaire, un bouton est un bouton. Certes, ils peuvent avoir des propriétés différentes, des variantes, mais dans le fond, ils vont réaliser la même action sur l’ensemble de nos projets. Si vous concevez 10 sites avec des formulaires, sur vos wireframes, les champs des 10 sites fonctionneront de la même manière, donc autant ne les créer qu’une seule fois et les réutiliser.

Souplesse et adaptabilité : l’ajout des propriétés de composants par Figma permet de personnaliser chaque instance d’un composant. Une modification à apporter, il suffit de modifier le composant principal, de lui affilier des propriétés, et hop, toutes ces instances sur l’ensemble des pages en hériteront.

Nous vous partageons très prochainement la publication de notre kit sur Figma Community, restez à l’écoute ⏳ Cet article est le premier d’une série axée sur les composants, les propriétés, l’Atomic Design et l’évolution de notre kit de composants pour wireframes.