Leader du marché : Pourquoi et comment utiliser Figma ?

Notre Product Designer Florian vous explique pourquoi et comment utiliser Figma, leader mondial des interfaces design.

Florian

Product Designer

Dans cet article

This is some text inside of a div block.

Pourquoi Figma est devenu le leader du marché, que fait-il de mieux que ses concurrents et quelles sont les bonnes pratiques à adopter pour l’utiliser au mieux ? C’est ce que nous vous proposons de découvrir dans cet article.

Il n’y a pas si longtemps, lorsqu’un.e Designer devait construire une maquette de site web, il/elle devait choisir son outil en se basant sur une offre de logiciels disponibles très limitée. La majorité des Designers travaillaient sur Photoshop ou Illustrator, des outils qu’on sait aujourd’hui peu adaptés pour concevoir des interfaces.

Au fil des années, les méthodes de travail et les technologies ont évolué, et de nombreux outils ont vu le jour tels que Figma, Adobe XD ou encore Sketch pour ne citer qu’eux. Face à la pluralité des offres, il peut être difficile pour un.e Product Designer de savoir comment sélectionner l’outil idéal.

Pourquoi Figma se présente aujourd'hui comme le leader du marché ? Que fait-il de mieux que ses concurrents ? On vous explique pourquoi !

Illustration issue d’une étude envoyé à 4100 Designers dans le monde

Illustration issue d’une étude envoyée à 4100 Designers dans le monde

Figma : qu'est ce que c'est ?

Figma est une plateforme web collaborative qui permet la création d’interfaces pour le web et le mobile. Disponible dans le navigateur, il peut aussi être téléchargé sous la forme d’une application standard.

Pourquoi utiliser Figma ?

En plus de posséder les patterns (dans le but de simplifier la courbe d’apprentissage) et les fonctionnalités (prototypage intéractif, composants,outils de conception, style, plugin etc...) de ses concurrents, Figma possède des features uniques inspirées du milieu du développement web. Cette singularité lui permet aujourd’hui de se distinguer nettement de ses concurrents.

Voici 5 facteurs qui font de Figma un outil unique, apprécié par les Designers

1. Un outil collaboratif par excellence

Figma propose des fonctionnalités de partage de documents et de collaboration en temps réel. Les Designers peuvent travailler en même temps sur le même document. Même si Adobe XD et Sketch permettent aujourd’hui de travailler en collaboration, ils ne sont pas aussi efficaces que Figma.

Avec Adobe XD, les collaborateurs doivent systématiquement mettre à jour leur fichier à chaque modification réalisée par un des membres de l’équipe, une tâche qui devient rapidement parasite et chronophage.

Une autre force de Figma est la possibilité de collaborer avec un Design System en versioning. Avec son système de branches principales et secondaires inspiré de github (git push, git merge etc...), il est désormais possible de diviser un fichier en plusieurs branches secondaires et ainsi solliciter une révision du design avant de fusionner des modifications sur une branche principale.

2. Un logiciel tout-en-un

Plus besoin de recourir à Illustrator, InVision, Abstract ou Zeplin, comme c’est le cas en travaillant sur Sketch. Que ce soit pour le prototypage, l’ajout de commentaire, la conception d’illustrations vectorielles ou l’inspection du code, Figma gère toutes ces features en natif.

Dernièrement, Figma a même crée “Figjam” un outil permettant de réaliser des ateliers collaboratifs à distance, un outil qui se présente comme un sérieux concurrent à Miro.

3. Un outil qui met en valeur sa communauté

Figma a créé au sein de sa plateforme un espace de partage où les Designers peuvent partager plugins, widgets, templates (mobile design et web design), Design Systems, wireframes, illustrations, icons, typography et UI kits. Cet espace s'appelle “Community”. L’entreprise a bien compris que sa communauté d’utilisateurs pouvait être vecteur de valeur pour son produit.

4. Des composants plus flexibles et plus dynamiques

Appelés symboles dans les autres outils de conception vectorielle tels que Sketch, les composants, dans Figma, sont beaucoup plus flexibles. La structure même des composants dans Figma facilite la personnalisation et la modification des différentes propriétés.

Ainsi, en combinant différents composants et avec la possibilité de personnaliser chacune des propriétés de style des instances, vous aurez besoin de moins de composants ce qui rend votre projet plus fluide et plus facile à naviguer.

5. Un outil online facilement accessible

La possibilité d’accéder à ses fichiers sur n’importe quel navigateur web doté d’une connexion internet fait de Figma un outil auquel on s’attache rapidement. Que vous soyez en déplacement, que vous travailliez à distance ou que vous soyez en réunion avec un client, vos projets sont accessibles à portée de main au contraire d’Adobe XD qui n’est accessible qu’à condition d’avoir préalablement téléchargé l’application.

Sketch, quant a lui, a tenté de proposer une web app pour accéder à son interface mais cette dernière rencontre aujourd’hui de nombreux bugs.

Comment utiliser Figma ?

Voici 12 conseils pour utiliser Figma au mieux

Travaillez avec des composants et des variants interactifs afin d’optimiser votre vitesse de travail et optimiser la vélocité de votre équipe.
Utilisez systématiquement l’Auto Layout dans la création de vos composants. Ce dernier permet d’aligner les éléments automatiquement sans devoir les replacer les uns à la suite des autres. Il est notamment possible de redimensionner les boutons avec leur texte, déplacer et réorganiser les éléments d’une liste à tout va, étirer les composants de l’Auto Layout librement pour un responsive design garanti. Bonus : l’auto layout facilite le transfert avec les Développeurs car il se traduit directement en code.
Créez une bibliothèque de styles afin de centraliser typo, couleur, ombre portée etc...
Travaillez en atomic design, imbriquez les composants les uns dans les autres avec l’auto layout pour créer atomes, molécules, organisme et templates de pages.
Regroupez les composants et la bibliothèque de style dans un Design System afin de construire une unique source de vérité pour Designers et Développeurs
Utilisez l’option smart animate lors de la réalisation d’un prototype interactif afin de créer des interactions logiques en fonction du déplacement des éléments.
Utilisez des plugins pour automatiser les tâches répétitives et optimiser votre rapidité de production.
Partagez des liens en plaçant les clients en mode spectateur afin qu’ils puissent consulter vos fichiers en direct.
Lors d’une présentation client ou lors de tests utilisateurs, utilisez le mode “aperçu” pour afficher votre prototype sur un device spécifique afin de permettre aux parties prenantes de mieux se projeter.
Pendant la conception, si vous construisez pour des écrans mobiles, téléchargez l’application Figma mirror sur votre téléphone et gardez la toujours ouverte afin d’avoir un aperçu en temps réel des écrans sur votre device final.
Proposez à vos Développeurs d’utiliser l’outil d’inspection du code afin de leur permettre de récupérer le CSS.
Utilisez la fonctionnalité “commentaire” pour communiquer efficacement avec votre équipe sur les maquettes existantes.

Cet article est un résumé condensé et une liste non exhaustive de tout ce que l’on peut faire avec Figma. Toutefois, si vous n’êtes pas encore totalement convaincu.e, la meilleure chose à faire c’est encore de l’essayer gratuitement. Et oui, l’un des avantages de Figma est aussi son offre starter gratuite qui permet d’utiliser presque toutes les features de l’application ;)