Comment utiliser Figma : Guide du débutant

Le monde des logiciels de conception graphique est immense et a beaucoup de concurrence. Figma est un outil de conception qui se hisse au premier rang des concepteurs UX/UI du monde entier. Mais que savez-vous de cet outil intuitif ?

Bien que ce soit simple, il y a aussi une courbe d’apprentissage si vous êtes habitué à d’autres outils de conception. Regardons Figma et comment l’utiliser. Bienvenue sur Figma 101.

Qu’est-ce que Figma ?

Si vous avez travaillé comme graphiste ou concepteur de sites Web au cours des dernières années, vous avez probablement entendu parler de Figma. Vous l’avez peut-être même utilisé.

Figma est un outil de conception et il est progressivement devenu un favori pour les concepteurs numériques, survolant des options comme Adobe XD, Adobe Photoshop et Sketch, pour la conception Web et plus encore. Cependant, depuis qu’Adobe a acquis Figma en 2022, certains changements pourraient modifier le classement.

Il existe de nombreuses utilisations pour Figma. Il est principalement utilisé pour la conception numérique et vous ne pouvez pas concevoir en CMJN pour l’impression. Certaines des principales utilisations de Figma incluent :

• Prototypage
• Conception UX/UI
• Conception d’applications
• création de sites web
• Conception de la présentation

Vous pouvez utiliser les plug-ins de maquette Figma pour montrer vos conceptions, convertir de vraies pages Web en conceptions Figma à l’aide de plug-ins et même créer des modèles principaux pour les conceptions Figma afin de vous faire gagner du temps dans les types de conception répétitifs.

Combien coûte Figma ?

Vous pouvez créer un compte Figma gratuitement sur le site Figma ou en téléchargeant l’ application Figma . Un compte gratuit fournit des fonctionnalités pour tous les aspects de conception de l’application. Vous pouvez concevoir avec Figma et FigJam, l’outil de collaboration de Figma.

Si vous utilisez Figma en tant qu’amateur ou en tant qu’indépendant, la version Free Forever est presque parfaite. Vous avez toujours accès à tous les plugins, pouvez inviter des collaborateurs illimités, utiliser des fichiers personnels illimités et utiliser Figma depuis toutes les plateformes.

Alors que la version gratuite de Figma offre plus que suffisant pour tout concepteur standard, un abonnement Figma Professional vous permet d’inviter des coéquipiers, de travailler à partir de bibliothèques d’équipe, d’avoir accès à un nombre illimité de fichiers Figma et d’historique des versions, et plus encore, pour 12 $ par mois et par éditeur. Si vous êtes étudiant ou enseignant, vous pouvez obtenir Figma Professional gratuitement.

Comment utiliser Figma : les bases

Que vous utilisiez l’application Figma ou la version du navigateur, vous pouvez facilement suivre.

Lorsque vous ouvrez Figma, des options vous seront présentées pour démarrer un nouveau fichier Figma, un nouveau fichier FigJam ou importer un fichier créé dans un autre programme, comme Sketch ou Adobe XD. Si vous avez déjà utilisé Figma, vous verrez également vos projets Figma précédents sur lesquels vous pouvez ouvrir et travailler.

Naviguer dans l’espace de travail Figma

L’ouverture d’un nouveau fichier semble initialement sans intérêt. Contrairement à de nombreux autres programmes de conception, vous ne commencez pas avec votre plan de travail ou votre canevas, mais avec une page de conception totalement vierge. Mais avec un esprit plein d’inspiration, il ne restera pas longtemps un espace vide.

Le menu horizontal en haut à gauche commence par l’ icône du menu principal , le logo Figma. En sélectionnant le menu principal, vous pouvez accéder à vos autres fichiers, aux actions rapides de Figma, aux options de fichier typiques et à l’accès aux plugins, widgets et bibliothèques.

Ensuite, vous trouverez l’ outil Déplacer ( V ), avec l’ outil Échelle ( K ) niché en dessous. Ces outils permettent de déplacer des éléments ou de redimensionner des parties de votre conception vers le haut ou vers le bas. Et à droite de ces outils, vous verrez les outils Region, Frame ( F ), Section et Slice , nichés ensemble.

Dans Figma, un cadre est ce que d’autres programmes peuvent appeler un plan de travail ou une toile. Sélectionnez Cadre pour dessiner votre canevas de taille personnalisée. Lorsqu’il est sélectionné, le menu de droite présente des options de cadre prédéfinies pour les tailles d’appareils courantes : smartphones, tablettes, ordinateurs de bureau, montres intelligentes, présentations et options de médias sociaux. Vous pouvez également cliquer et faire glisser votre cadre directement pour lui donner une taille personnalisée.

De retour au menu en haut à gauche, à droite des outils Région se trouvent les outils Forme , les outils Plume et l’ outil Texte . Suivi, ensuite, de Ressources — Composants , Plugins et Widgets — et de l’ outil Main pour se déplacer dans votre fichier. Et enfin, l’ outil Commentaires qui est idéal pour prendre des notes et collaborer avec des coéquipiers.

Le menu de conception Figma

Avec un cadre dessiné, la sélection de son titre active le cadre, prêt pour la conception. Le menu de droite affiche les titres de Design , Prototype et Inspect . Comme son nom l’indique, l’option Design est le menu que vous utiliserez pour concevoir les éléments de votre cadre.

Bien que le menu Conception initial soit quelque peu simpliste, au fur et à mesure que vous ajoutez des éléments à votre conception, les options du menu évoluent. Au début, le menu s’exécute de haut en bas avec les outils d’alignement, les outils de dimensionnement, la mise en page automatique , la grille de mise en page , le calque , le remplissage , le contour , les effets et l’ exportation . Certains d’entre eux sont minimisés par défaut, mais en cliquant sur le signe + , vous pouvez ouvrir n’importe quel menu ou appuyer sur – pour le minimiser.

Une fois que vous avez dessiné votre cadre principal pour le projet, vous pouvez utiliser les outils Forme ou les outils Plume pour dessiner des formes ou ajouter des espaces réservés d’image, et vous pouvez ajouter du texte à l’aide de l’outil Texte comme vous l’avez probablement fait dans d’autres logiciels.

Une fois que vous avez des formes ou du texte sur le cadre, utilisez les différentes options du menu de droite pour modifier et concevoir ces éléments. Le menu Calque propose des modes d’opacité et de fusion ; avec Remplir , vous pouvez ajouter de la couleur ou insérer des images avec certaines fonctionnalités d’édition telles que l’ exposition , le contraste , la température , etc.

Au fur et à mesure que vous créez d’autres éléments dans votre projet, les calques se forment dans le menu Calques de gauche à côté de l’ onglet Actifs . Vous pouvez double-cliquer sur un titre de calque pour trouver l’élément, et vice versa ; vous pouvez double-cliquer sur un élément de conception pour trouver le calque en surbrillance. Double-cliquer sur les titres permet de les renommer pour une organisation optimale.

Le menu des prototypes Figma

À droite de l’ option du menu Conception se trouve le menu Prototype . Une fois que vous avez finalisé les aspects visuels de votre conception et défini les zones d’image et le texte à leur place, vous pouvez utiliser les outils de prototype pour ajouter des animations et des transitions à vos conceptions.

Le menu Prototype vous permet de connecter des cadres ou des composants ensemble en tant que transitions. Vous pouvez choisir l’ordre et la manière dont chaque image passe à une autre.

Cela fonctionne très bien si vous faites une présentation Figma qui s’anime d’une diapositive à l’autre, mais l’outil vous permet également de visualiser de manière experte des animations pour les boutons ou les menus pour la conception d’applications et de sites Web. Vous pouvez ajouter plusieurs transitions par page pour toutes les choses différentes, afin que vous puissiez voir comment les utilisateurs interagissent avec votre site Web lorsqu’il est en ligne.

Bien que l’utilisation de Figma pour concevoir un site Web ne soit pas la même chose que la création d’un site Web en direct, vous pouvez confier votre conception Figma à votre équipe de développement qui peut recréer vos prototypes d’interactions sous forme de conceptions d’animation réelles pour votre site Web. Cela signifie que vous pouvez passer d’une page à l’autre à partir des clics, du temps ou d’autres interactions.

Démarrer avec Figma est facile

Vous savez maintenant comment naviguer dans la mise en page Figma et comment fonctionnent les outils de conception et de prototype de base. Puisque Figma est si facilement accessible, il est temps d’aller bricoler avec cet outil de conception et de voir ce que vous pouvez créer.