Pourquoi Figma est le meilleur outil de design system ?

Pourquoi Figma est le meilleur outil de design system ?

L’accompagnement des designers n’a jamais été aussi fourni depuis que des dizaines d’outils sont disponibles sur la toile. Ceci dit, certains logiciels sont plus performants que d’autres, en particulier en matière de design system.

Dans cette catégorie, un outil sort du lot et qui, malgré son jeune âge, réussit à fédérer les grands spécialistes de l’UI design. Il s’agit de Figma, l’outil qui prône le design collaboratif clé en main.
Alors qu’il est toujours mis en comparaison avec Sketch, Figma a de quoi se démarquer.

Dans cet article, nous vous expliquons pourquoi on considère techniquement Figma comme le meilleur outil de design system.

Comment définir le design system ?

La conception de systèmes, traduction du terme « design system », définit l’ensemble des éléments graphiques destinés à la conception d’un produit. Assimilé à une charte graphique, le design system est plus large puisqu’il s’agit d’une bibliothèque qui regroupe à la fois les références visuelles et les éléments explicatifs pour designer et créer une interface (application, site, logiciel, etc.).

Le design system est créé sur la base de l’image de marque de l’entreprise et ses besoins en UI design. Son contenu dépend donc de l’écosystème qui entoure son acteur. Il est partagé entre les différents collaborateurs sur un même projet et constitue, ainsi, une plateforme de contact entre les parties prenantes (designers, développeurs, chef de projet, etc.).

A l’opposé de la charte graphique, le design system est régulièrement mis à jour par les différents intervenants, d’où l’importance de le concevoir avec un outil adéquat avec ce besoin d’accessibilité et de facilité de modification. Ainsi, si autant de designers entreprennent de se former à Figma, c’est ce que dernier à l’air de répondre parfaitement à ce besoin.

Qu’est-ce qui distingue Figma en matière de design system ?

Figma est un éditeur graphique vectoriel qui permet de créer des prototypes et des interfaces à multiples usages (applications, sites web, logiciels, etc.). C’est un logiciel 100% en ligne disposant de fonctionnalités supplémentaires pour travailler hors ligne. Figma propose une solution dynamique et fluide pour mettre en avant le design collaboratif.

Partant de ces principes de base, Figma a trouvé son succès auprès des designers puisqu’il leur permet de travailler simultanément sur le même projet et de communiquer entre eux, le tout en ligne sans rien télécharger, ni installer sur ordinateur. Difficile de faire mieux en matière de gain de temps, surtout si on ajoute que Figma est un outil gratuit.

Figma simplifie le design system
Antoni Shkraba – Pexels
Figma simplifie le design system

Ces arguments viennent s’ajouter à la qualité intrinsèque de l’outil qui propose des ressources et des éléments graphiques variés que le concepteur peut utiliser, puis enregistrer sur le cloud. Pour créer ainsi le design system parfait, il suffit de comparer la valeur ajoutée technique proposée par Figma à celle de Sketch – logiciel historique en la matière – pour avoir le cœur net.

Les outils de dessin vectoriel

Bien que Figma ou même Sketch n’offrent pas beaucoup d’options de dessin vectoriel comme peut en offrir un logiciel dédié (Illustrator), ils disposent tous deux d’outils puissants pour relever la grande majorité des défis de conception.

Là encore, c’est Figma qui se distingue, notamment au niveau des réseaux vectoriels. Alors que l’outil vectoriel de Sketch oblige les designers à enchaîner les points, les réseaux vectoriels de Figma prennent en charge les courbes entre n’importe quel ensemble de points. Par conséquent, les concepteurs peuvent relier plusieurs lignes en un seul point au lieu de créer deux chemins distincts.

L’utilisation des composants au lieu des symboles

Le design system, par définition, est un regroupement de plusieurs éléments servant au prototypage et la création d’interfaces. Avec Sketch, on conçoit cette bibliothèque à base de symboles, alors qu’on parle de composants pour Figma. Ces derniers s’avèrent plus flexibles, du fait qu’ils permettent plus de liberté au designer, en particulier pour apporter des modifications aux dits éléments.

Illustration : si vous souhaitez modifier un détail avec les symboles de Sketch (taille, bordure, arrière-plan, etc.), vous devez vous détacher du symbole en question et créer une autre version différente. Au mieux, vous pouvez créer de base une version imbriquant toutes les variations dans un seul symbole. Si vous travaillez sur un grand projet, bonne chance pour vous retrouver avec toutes ces variations.

Avec Figma, vous pouvez accéder et modifier les propriétés de n’importe quelle couche d’un composant sans le détacher. Il en va de même pour les composants imbriqués. Une fois les composants retouchés, la modification s’applique sur tous les éléments désirés.

Figma favorise donc une prise en main plus souple et plus rapide. En effet, la conception avec les composants est plus simple, et cela commence dès la création de la structure de base. L’accès aux composants dans Figma est beaucoup plus facile que l’accès aux symboles dans Sketch. Une fois encore, vous n’avez pas à réfléchir à une structure de dénomination pour naviguer dans un menu imbriqué de noms de symboles. Au lieu de cela, vous pouvez trouver les composants sous la forme d’une liste de vignettes. Pour ajouter un composant à un écran ou pour échanger une structure, il suffit de le faire glisser et de le déposer sur le canevas. Vous pouvez également copier-coller le composant principal pour créer une nouvelle structure. Dans Sketch, vous ne pouvez même pas faire cela sans créer un nouveau symbole.

Un autre aspect qui facilite la conception avec des composants est que dans Figma vous pouvez modifier le composant principal directement sur la même page, alors qu’il faut en créer une autre si vous voulez faire la même chose sur Sketch, puis revenir à la page principale pour voir si les changements opérés sont conformes.

La comparaison entre les outils de conception d’interfaces est tributaire aussi des goûts de chacun. Toutefois, Figma dispose de tous les atouts pour aider même les plus novices du domaine. Quoi qu’il en soit, le logiciel est gratuit et il ne suffit que d’une simple formation pour le maîtriser de fond en comble.