Le monde des logiciels de conception graphique est immense et la concurrence y est rude. Figma est un outil de conception qui est en train de se hisser au premier rang des concepteurs UX/UI du monde entier. Mais que savez-vous de cet outil intuitif ?
Bien qu’il soit simple, il y a aussi une courbe d’apprentissage si vous êtes habitué à d’autres outils de conception. Découvrons Figma et comment l’utiliser. Bienvenue à Figma 101.
Qu’est-ce que Figma ?
Si vous avez travaillé en tant que 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 l’un des favoris des concepteurs numériques, dépassant des options comme Adobe XD, Adobe Photoshop et Sketch, pour la conception de sites web et autres. Cependant, depuis l’acquisition de Figma par Adobe en 2022, il se peut que certains changements viennent bouleverser le classement.
Figma a de nombreuses utilisations. Il est principalement utilisé pour la conception numérique, et vous ne pouvez pas concevoir en CMYK pour l’impression. Voici quelques-unes des principales utilisations de Figma :
- Prototypage
- Conception UX/UI
- Conception d’applications
- Design web
- Design de présentation
Vous pouvez utiliser les plugins de maquettes Figma pour mettre en valeur vos conceptions, convertir des pages Web réelles en conceptions Figma à l’aide de plugins, et même créer des modèles maîtres pour les conceptions Figma afin de gagner du temps pour 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 que hobbyiste ou en tant qu’indépendant, la version Free Forever est presque parfaite. Vous avez toujours accès à tous les plugins, pouvez inviter un nombre illimité de collaborateurs, utiliser un nombre illimité de fichiers personnels et utiliser Figma sur toutes les plateformes.
Alors que la version gratuite de Figma offre plus qu’assez 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 à l’historique des versions, et plus encore, pour 12 $ par mois et par éditeur. Si vous êtes un étudiant ou un éducateur, vous pouvez obtenir Figma Professional gratuitement.
Comment utiliser Figma : les bases
Que vous utilisiez l’application Figma ou la version navigateur, vous pouvez facilement suivre le cours.
Lorsque vous ouvrez Figma, vous avez la possibilité de lancer un nouveau fichier Figma, un nouveau fichier FigJam ou d’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 que vous pouvez ouvrir et sur lesquels vous pouvez travailler.
Naviguer dans l’espace de travail Figma
L’ouverture d’un nouveau fichier semble initialement peu inspirante. Contrairement à de nombreux autres programmes de conception, vous ne commencez pas avec votre tableau ou votre toile, mais avec une page de conception totalement vierge. Mais avec un esprit plein d’inspiration, elle ne restera pas longtemps un espace vide.
Le menu horizontal en haut à gauche commence par l’option Menu principal le logo Figma. Sélection de l’icône Menu principal, vous pouvez naviguer vers vos autres fichiers, les actions rapides Figma, les options de fichiers typiques et l’accès aux plugins, widgets et bibliothèques.
Ensuite, vous trouverez le Déplacement outil (V), avec le Échelle outil (K) nichée sous elle. Ces outils permettent de déplacer des éléments ou de mettre à l’échelle des parties de votre dessin. Et à droite de ces outils, vous verrez les outils Région, Cadre (F), Sectionet Trancheemboîtés l’un dans l’autre.
Dans Figma, un cadre est ce que d’autres programmes appellent un artboard ou un canvas. Sélectionnez Cadre pour dessiner votre toile de taille personnalisée. Lorsqu’il est sélectionné, le menu de droite présente des options de cadre préfabriquées pour les tailles d’appareils courantes : smartphones, tablettes, ordinateurs de bureau, smartwatches, 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 de la région se trouvent les outils suivants Forme outils, Stylo outils, et le Texte outil. Suivi, ensuite, par Ressources-Composants, Pluginset Widgets-et le Main pour vous 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 de Figma
Lorsqu’un cadre est dessiné, la sélection de son titre active le cadre, prêt à être dessiné. Le menu de droite montre les titres pour Conception, Prototypeet Inspecter. 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 initial de conception soit quelque peu simpliste, les options du menu évoluent au fur et à mesure que vous ajoutez des éléments à votre conception. Au début, le menu va de haut en bas avec des outils d’alignement, des outils de dimensionnement, Mise en page automatique, Grille de mise en page, Calque, Remplir, Accident vasculaire cérébral, Effetset Exportation. Certaines d’entre elles sont réduites par défaut, mais en cliquant sur l’icône + vous pouvez ouvrir n’importe quel menu ou frapper – pour le minimiser.
Une fois que vous avez dessiné le cadre principal du projet, vous pouvez utiliser les outils Forme ou Stylo pour dessiner des formes ou ajouter des espaces réservés aux images, 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 diverses options du menu de droite pour modifier et concevoir ces éléments. Le site Calque propose des modes d’opacité et de fusion ; avec Remplissage vous pouvez ajouter de la couleur ou insérer des images avec certaines fonctions d’édition telles que Exposition, Contraste, Températureet plus encore.
Au fur et à mesure que vous accumulez des éléments dans votre projet, les couches se forment dans la partie gauche de l’écran. Calques à côté du menu Actifs onglet. Vous pouvez double-cliquer sur le titre d’un 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. En double-cliquant sur les titres, vous pouvez les renommer pour une organisation optimale.
Le menu de Figma Prototype
A droite du menu Design L’option de menu est le Prototype menu. Une fois que vous avez finalisé les aspects visuels de votre conception et que vous avez placé les boîtes à images et le texte là où ils doivent aller, vous pouvez utiliser les outils de prototype pour ajouter des animations et des transitions à vos conceptions.
Le site Prototype vous permet de relier des cadres ou des composants entre eux sous forme de transitions. Vous pouvez choisir l’ordre et le mode de transition de chaque cadre vers un 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 des animations pour des boutons ou des menus pour la conception d’applications et de sites Web. Vous pouvez ajouter plusieurs transitions par page pour toutes sortes de choses, afin de voir comment les utilisateurs se comporteront avec votre site Web lorsqu’il sera 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 transmettre votre conception Figma à votre équipe de développement qui pourra recréer les interactions de votre prototype sous forme d’animations réelles pour votre site Web. Cela signifie que vous pouvez passer d’une page à l’autre en fonction des clics, du temps ou d’autres interactions.
Démarrer avec Figma est facile
Vous savez maintenant comment naviguer dans la mise en page de Figma et comment fonctionnent les outils de conception et de prototypage 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.
