Comment utiliser Figma ?
Nombreux sont les outils de conception qui servent à réaliser un prototype d’une interface numérique. Parmi ces outils, il y a le fameux Figma. Après quelques années de son lancement, cet outil de design collaboratif est considéré comme l’un des plus efficaces parmi les outils de design et de prototypage des interfaces UI/UX. Figma rend la conception un processus simplifié et offre plusieurs fonctionnalités de personnalisation et d’automatisation.
Figma pour réaliser les maquettes UX/UI
Figma est un outil de conception qui permet aux UX/UI designers de créer de la manière la plus facile des interfaces graphiques pour tous leurs projets digitaux. Figma fonctionne sur les PC exécutant avec les systèmes d’exploitation Windows ou Linux, mais également sur les MacOS. La capacité de construire un Design System collaboratif entre les différentes parties prenantes d’un projet digital est la fonctionnalité la plus intéressante de Figma.
Outre son logiciel desktop, Figma est disponible sur Cloud avec un plan gratuit sur lequel l’utilisateur peut créer et stocker trois projets actifs à la fois.
Qui utilise Figma ?
Tous les membres de l’équipe UX/UI peuvent utiliser Figma, que ce soient les UX designers, les UI designers, les développeurs, les chefs de produit ou encore le Lead UX Designer. Ils peuvent ainsi contribuer et enrichir la bibliothèque avec des composants visuels.
Figma permet aux UX et UI designers de créer :
- Les Designs Systems qui aident à réaliser les maquettes d’une interface web, mobile ou digitale, et à créer une bibliothèque d’éléments qui sont réutilisables et personnalisables.
- Les maquettes fonctionnelles (wireframes) qui servent à concevoir des interfaces web et mobile tout en permettant aux UX/UI designers de se focaliser sur l’expérience.
- Les prototypes inactifs et personnalisés, tout en donnant la possibilité de créer une connexion entre les différentes interfaces digitales.
Pourquoi choisir Figma ?
Le principal avantage de Figma, c’est qu’il regroupe toutes les fonctions dont une équipe UX/UI a besoin, à savoir la conception, le prototypage, la présentation et l’inspection de code. Petit plus non négligeable : l’utilisation est gratuite pour 3 projets et 2 éditeurs, avec toutes les fonctionnalités essentielles pour le service en ligne.
L’autre avantage de cet outil de design collaboratif par rapport aux autres outils de prototypage et de maquettage réside dans le travail collaboratif. En effet, plusieurs designers peuvent travailler en même temps sur un seul et même fichier. Plus besoin de se partager des fichiers VXX ou de fusionner des éléments dans un document final. Tout ce que les membres de l’équipe font est automatiquement sauvegardé et visualisable en temps réel. Cela assure une certaine transparence entre les membres de l’équipe.
D’ailleurs, il est possible qu’une personne de l’équipe laisse des commentaires directement sur les maquettes, ce qui permet aux designers de donner leur avis en temps réel, de discuter et de jeter un coup d’œil sur le travail de leurs collègues. Cette accessibilité sert à améliorer la qualité du prototype fourni.
Il est également possible de partager un projet entier, une page, ou seulement un artboard via le partage au moyen d’un seul et unique hyperlien. De plus, la communauté de designers peuvent trouver un espace de partage où ils peuvent partager des widgets, des plugins, des wireframes, des templates (mobile design et webdesign), des icônes, des Design Systems, des illustrations, des typography ou encore des UI kits.
Apprenez à utiliser Figma
- Accéder à la plateforme de Figma et s’inscrire
Pour commencer, il suffit d’accéder au service en ligne de Figma à travers le lien www.figma.com et de s’inscrire rapidement via votre compte Google ou en créant un compte Figma gratuit. Ensuite, vous pouvez créer des équipes, et notamment des espaces partagés. Dans ces espaces partagés, vous pouvez collaborer en tant qu’équipe sur des fichiers et les organiser en projets. Vous pouvez choisir entre une équipe “Starter” disponible en version gratuite ou une équipe “Professionnelle” payante.
- Inviter des personnes à votre équipe
Figma est connu pour ses possibilités de travail collaboratif, son accessibilité ainsi que le partage et le prototypage interactif rapide. Ainsi, une fois le compte et l’équipe sont créés, vous pouvez par la suite inviter des membres à collaborer. Cela va leur donner l’accessibilité à tous les fichiers et les projets et de votre équipe/projet. A noter que vous pouvez choisir le niveau d’accès de chaque membre de l’équipe.
- Les composantes de Figma
Menu : les menus de Figma peuvent être trouvés par une simple clique sur le bouton hamburger en haut à gauche de l’écran. Assurez-vous de prendre au moins une minute pour parcourir ces menus et les découvrir. Vous pouvez aussi rechercher la commande spécifique dont vous avez besoin.
Outils : dans cette zone, vous pouvez accéder facilement aux outils que vous êtes susceptible d’utiliser le plus souvent comme les cadres, les formes, le texte…
Option : vous pouvez trouver des options supplémentaires pour l’outil que vous avez sélectionné. Si aucun objet n’est sélectionné, Figma vous affiche le nom du fichier, et si un objet est sélectionné, des options contextuelles apparaissent automatiquement.
Couches : chaque élément du fichier est répertorié et organisé en cadres et groupes.
Toile : dans cette zone, vous pouvez créer et réviser tout votre travail.
Inspecteur : il affiche toutes les informations contextuelles et tous les paramètres pour tout objet sélectionné. Maintenant que vous avez trouvé votre chemin, vous pouvez commencer à créer des interfaces digitales avec Figma.
- Conception UX/UI : par où commencer sur Figma ?
Pour créer un nouveau projet sur Figma, cliquez sur “new draft”. Vous obtenez à gauche les différents calques, et à droite, vous avez les paramètres liés à la zone de travail. Ensuite, vous pouvez commencer par créer un écran sur lequel vous allez concevoir votre interface. Pour le faire, cliquez sur l’outil “frame”. Figma vous propose des résolutions qui sont déjà préconçues. Afin de sauvegarder votre projet, cliquez sur “File” puis “Save as figs”, un fichier qui contient toutes les informations. Ce point figues peut être, par la suite, utilisé dans d’autres logiciels.
- Créer un cadre
Le cadre est considéré comme un conteneur pour d’autres éléments. Pour créer un cadre, il suffit de cliquer sur l’icône de l’outil “Cadre” dans le panneau “Options” en haut de la fenêtre de l’interface de Figma. Vous pouvez, soit cliquer et faire glisser dans la zone de canevas, soit sélectionner une taille de cadre prédéfinie dans l’inspecteur sur le côté droit de la fenêtre.
- Zoomer et dézoomer
Dans Figma, vous vous retrouverez probablement à devoir zoomer et dézoomer, surtout une fois que vous commencerez à travailler avec plusieurs cadres. Les commandes de zoom standard sont accessibles avec⌘+et⌘-, mais, ces commandes se concentreront uniquement sur le centre de votre vue actuelle.
Il existe d’autres commandes de zoom disponibles telles que :
- Maj ⇧2 qui sert à zoomer sur la sélection actuelle
- Maj ⇧1 qui va zoomer pour montrer toute la toile.
Assurez-vous de sélectionner le cadre en cliquant sur son nom, ensuite alternez ces commandes pour basculer entre la sélection et l’ensemble du canevas.
- Créer un calque de texte
Pour créer un calque de texte, cliquez sur J pour sélectionner l’outil “Texte”, ensuite cliquez sur n’importe où dans le cadre de votre espace de travail afin de créer un calque de texte. Cela vous permettra d’ajouter du texte dans les éléments de votre interface (les boutons d’appel à l’action, un paragraphe de présentation, les champs de formulaires…).
Une fois le calque de texte sélectionné, vous pouvez également accéder aux paramètres de l’inspecteur pour modifier la police, ainsi que l’épaisseur, la taille et la couleur de la police.
- Créer un rectangle et disposer les calques
Pour créer un rectangle, cliquez sur R pour sélectionner l’outil “Rectangle”, puis faites glisser un rectangle en forme de bouton autour du texte que vous venez de créer.
Si le texte est masqué sous le rectangle, vous devez utiliser les commandes “Arranger” de Figma. Tout en cliquant sur le panneau “Calques” à gauche de la fenêtre, sélectionnez le calque de texte “Connexion”, puis cliquez avec le bouton droit de la souris (PC/Mac) ou ctrl-clic (Mac) afin d’afficher une liste d’options. Cliquez ensuite sur “Mettre au premier plan”, et le texte sera placé automatiquement au-dessus du rectangle.
- Aligner le texte et le rectangle
Si vous voulez que les formes de texte et de rectangle soient centrées l’une par rapport à l’autre, Figma dispose d’un ensemble de commandes “Aligner” qui vous permettent de le faire facilement. Tout d’abord, assurez-vous que l’outil “Déplacer” est sélectionné en appuyant sur “Échapper”, puis faites glisser un « rectangle de sélection » (une sélection rectangulaire) autour du texte et du rectangle.
Vous pouvez accéder aux commandes “Aligner” dans l’inspecteur qui est la zone d’interface à droite de la fenêtre. Cliquez sur “Aligner les centres horizontaux” et “Aligner les centres verticaux” pour que les deux objets soient bien alignés. Vous aurez besoin de ces fonctionnalités pour créer vos boutons d’appel à l’action, par exemple.
- Ajouter des coins arrondis au rectangle et changer de couleur
Pour créer des coins arrondis au niveau de vos rectangles, commencez par sélectionner la forme de rectangle que vous voulez créer. Il existe un paramètre appelé “Corner Radius” dans l’inspecteur qui vous permet d’arrondir les angles de n’importe quelle forme. Tapez le nombre de pixels dont vous voulez que chaque coin soit arrondi.
Pour maximiser les coins et créer des demi-cercles à chaque extrémité du rectangle, entrez un nombre supérieur à la moitié de la hauteur de l’objet.
En ce qui concerne les paramètres de couleur, vous pouvez les trouver au niveau de l’inspecteur aussi. Assurez-vous de choisir une couleur qui respecte la charte graphique de votre marque, tout en optant pour des palettes intéressantes qui captent l’attention des utilisateurs.
Vous avez trouvé votre chemin dans l’interface de Figma ? La dernière chose à faire est de nommer votre fichier. Pour le faire, il suffit de désélectionner tous les objets, et cliquez là où il est écrit “Sans titre” en haut de la fenêtre. Tapez ensuite le nom de votre projet et Figma stockera tous vos fichiers sur le cloud.
Conseils pour utiliser Figma
- Comprendre tous les raccourcis de Figma
Afin de mieux utiliser Figma, il faut être en capacité de reconnaître les raccourcis que vous offre la plateforme. En tant que designer, vous pouvez utiliser votre clavier au lieu de la souris et du trackpad, car cela peut vous aider à gagner du temps. Il suffit donc de cliquer sur le bouton en bas à droite de votre fenêtre «?» où vous trouverez tous les raccourcis dont vous avez besoin, en appuyant sur « keyboard shortcuts ».
- Bien nommer les calques sur Figma
Il est indispensable de toujours nommer les calques sur Figma car si vous avez plusieurs documents, vous allez vous retrouver avec des dizaines de calques non identifiés, ce qui rend difficile à organiser votre projet, par la suite. Afin de vous aider à vous organiser, Figma vous donne la possibilité de choisir plusieurs calques et de les nommer de manière incrémentale avec ⌘+R.
- Copier et coller le style graphique
Si vous souhaitez utiliser le même style graphique d’un élément à un autre, vous pouvez miser sur une méthode qui est très simple et qui ne vous fait pas perdre de temps : il suffit de sélectionner l’élément que vous voulez copier en tapant sur ⌘+⌥+C. Puis sélectionnez l’élément auquel vous voulez appliquer ce style graphique et tapez ⌘+⌥+V.s.
- Assurer le suivi des performances de la page que vous avez créé
Afin de vérifier les performances d’une page, il suffit d’aller dans le menu en haut à gauche, ensuite taper « resources » et choisir « resources use ». Vous aurez toutes les informations que vous avez besoin concernant votre document, et cela vous aidera à l’améliorer et à l’optimiser.
Les erreurs à éviter en utilisant Figma
Comme pour tout outil, certaines erreurs doivent être éviter pour optimiser son utilisation :
- Il ne faut pas avoir des images dont la taille est très grande car il s’agit d’un facteur de ralentissement du temps de chargement de la file. Sur Figma, vous trouverez un outil qui vous permet de juger la rapidité de votre fichier.
- Il ne faut pas mettre les maquettes et les composants dans un même fichier. Il faut les séparer tout en favorisant une librairie externe de composants.
- Il faut éviter les calques masqués et penser à créer de différents composants sous différents états.
Mot de la fin
Figma est un logiciel de conception UX/UI qui permet de créer des maquettes pour tous vos projets digitaux. Disponible en version desktop ou Cloud, il est facile à utiliser et donne la possibilité d’évaluer les parcours utilisateurs, d’avoir une vision en temps réel et de relever les défauts de votre conception pour l’améliorer par la suite. Avec une bonne compréhension de Figma, vous pouvez créer des interfaces digitales dans les règles de l’art et profiter des éventuelles opportunités offertes par l’outil. C’est pourquoi, n’hésitez pas à vous appuyer sur ce guide avant de vous lancer !
by 
