Figma : Pourquoi et comment l'utiliser ?

Qu'est-ce que Figma ?

Logiciel de conception UI, Figma permet aux designers de créer facilement des interfaces graphiques. Il a été développé dans l'esprit d'un design system collaboratif. Autrement dit, Figma est un outil qui permet de réunir tous les éléments visuels et graphiques d'un projet de développement, permettant d'inclure toutes les parties prenantes. C'est d'ailleurs l'une de ses fonctionnalités les plus avantageuses.

‍

Figma est très utilisé pour ses aspects de travail collaboratif, les ressources (plug-ins, templates) et éléments graphiques qu'il permet d'exporter simplement. De plus, l'outil permet de générer le code associé aux différents éléments graphiques que composent l'interface. Cela permet de faciliter la collaboration entre designers et développeurs.

‍

Globalement, Figma permet donc de concevoir un design system, et de l'appliquer dans la conception d'interface, simplement et rapidement.

‍

Basé sur le Cloud, il propose deux versions :

• L'application web, accessible depuis votre navigateur. Vous aurez donc besoin d'une connexion internet, pour créer vos designs, les stocker en cloud et les partager à votre équipe.

• La version desktop (disponible sous Windows et MacOs), qui permet de travailler localement. Sans connexion internet, vous pouvez donc quand même profiter pleinement de toutes les fonctionnalités de Figma.

‍

Quel est le prix de Figma ?

Figma est notamment connu pour son accessibilité. Pour toutes les fonctionnalités incroyables qu'il propose, ses tarifs restent très intéressants.

• Figma Starter, permettant de tester l'outil gratuitement

• Figma Professional, 12$ / mois et par utilisateur : permet de créer un nombre de projets illimités, aussi en mode privé

• Figma Organization, 45$ / mois et par utilisateur : prend aussi en charge la gestion de branches, plugins privés ou encore identification unique

‍

Pourquoi utiliser Figma ?

Figma, l'application 4 en 1

Figma tire toute sa puissance dans ses fonctionnalités. En un seule application, il combine les fonctionnalités de 4 outils. Mais c'est notamment grâce à sa capacité à construire un Design System aussi facilement que l'outil a pris une telle ampleur. Figma a réussi à répondre à un ensemble de besoins des UI designers et développeurs web.

‍

• Conception

Figma permet d'accéder aux outils indispensables à la création d'éléments graphiques vectoriels. C'est pour cette raison qu'il est notamment utilisé pour créer des maquettes de sites web et applications mobiles. Des wireframes aux mockups, Figma permet de créer facilement un produit fini, allant jusqu'au prototypage.

‍

• Prototypage

Le prototypage permet de créer différentes interactions et animations entre les pages, ou écrans, des maquettes. Cela permet de créer tout le design system d'un projet, grâce à la création de composants. Vous l'aurez compris, c'est principalement là que l'on trouve toute la puissance de l'outil.

‍

• Présentation

Grâce à un simple lien de partage, il est possible de présenter son projet. La collaboration sur Figma est donc ultra simplifiée, jusqu'aux échanges avec les clients, ou lors de réunions UX.

‍

• Inspection

L'inspection et l'exploration du code d'interfaces permet de faciliter la collaboration entre le designer et le développeur web. Il peut s'agir du code CSS pour les sites web, ou le code iOS et Android pour les applications mobiles.

‍

Les autres avantages de Figma

• Courbe d'apprentissage rapide

La prise en main de Figma n'est pas si complexe. Surtout lorsque l'on découvre toutes les ressources d'apprentissage disponibles en ligne, gratuitement. Si vous avez déjà utilisé d'autres logiciels tels que Sketch ou Adobe Xd, vous prendrez l'outil en main très rapidement.

‍

• Travail collaboratif

Face aux autres outils de design, Figma a mis l'accent sur la collaboration. Il est possible de travailler à plusieurs en même temps, et sur un même projet. Plus besoin de faire des allers-retour entre fichiers, et d'exporter tous les nouveaux éléments dans un même fichier. Même à plusieurs sur un fichier, chaque modification est automatiquement sauvegardée. La présentation peut aussi se faire directement via Figma.

‍

Pour aller plus loin, Figma offre la possibilité d'ajouter des commentaires directement sur les maquettes. Que vous disposez de l'application ou non, vous pourrez facilement accéder à n'importe quel projet partagé.

‍

Figma a d'ailleurs aussi créé FigJam, l'outil de brainstorm (tableaux blancs virtuels, réunions, etc.).

‍

• Puissance des composants

Figma est ultra flexible. Il permet de créer et modifier des composants indépendamment des éléments. Depuis le calque de chaque instance, vous pouvez traiter chaque propriété de manière individuelle.

‍

• Design System

Figma est l'outil idéal pour créer un Design System en équipe. Vous n'avez qu'à créer une librairie partagée (Team Library), et chaque membre de l'équipe pourra accéder et récupérer les éléments dont il aura besoin.

‍

• Figma Community

La communauté Figma est très grande. Elle donne accès à un grand nombre de créations produites sur Figma et partagées par des designers. Vous pouvez vous en inspirer, les dupliquer, pour créer votre projet. Pour gagner du temps dans la conception, vous avez aussi la possibilité d'ajouter des plugins et widgets et ressources libres de droits.

‍

Comment utiliser Figma en tant que débutant ?

Voici quelques conseils et bonnes pratiques Figma.

‍

1 - Construisez votre projet avec des composants et des variants interactifs.

Cela permettra d'optimiser votre vitesse de production.

‍

2 - Créez une bibliothèque de styles.

Vous pourrez centraliser tous vos éléments design : couleurs, typographie, ombre portée, etc.

‍

3 - Utilisez l'Auto Layout pour vos composants.

Lorsque vous créez vos maquettes, l'auto layout permet d'aligner automatiquement vos éléments, sans avoir à les replacer les uns après les autres. Chaque modification sera enregistrée sur vos composants, pour éviter de revenir sur chaque élément.

‍

4 - Regroupez vos éléments et composants et la bibliothèque de style dans votre Design System.

Vous pourrez simplifier la collaboration avec le reste de votre équipe.

‍

5 - Utilisez des plugins.

Les plugins Figma permettent d'automatiser les tâches répétitives et gagner du temps.

‍

6 - Utilisez le smart animate pour vos prototypes.

En fonction du déplacement de vos éléments, vous pourrez créer des interactions logiques.

‍

7 - Formez-vous gratuitement

Consultez les cours et vidéos tutoriels en ligne gratuitement et pratiquez en même temps. Vous pourrez apprendre rapidement.

Vous pouvez aussi acheter une formation en ligne, pour débutant, ou sur un thème plus spécifique.

‍

Découvrez aussi : La comparaison complète des outils de conception Figma vs Framer.