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
Adobe a acquis Figma en 2022, il peut y avoir des changements qui remanieront le classement.Il y a 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
Tu peux utiliser les plugins de maquette Figma pour aider à montrer vos créations, convertir de vraies pages Web en conceptions Figma en utilisant des plugins, et même créer modèles principaux pour les conceptions Figma pour 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 de Figma ou en téléchargeant le 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 qu'assez pour tout designer standard, un abonnement Figma Professional vous permet de invitez des coéquipiers, travaillez à partir de bibliothèques d'équipe, accédez à un nombre illimité de fichiers Figma et à l'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 sont proposé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 toile, mais 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 le Menu principal icône - le logo Figma. Sélection du Menu principal, vous pouvez accéder à vos autres fichiers, aux actions rapides Figma, aux options de fichier typiques et à l'accès aux plugins, widgets et bibliothèques.
Ensuite, vous trouverez le Déplacer outil (V), avec le Escalader outil (K) niché 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 Région, Cadre (F), Section, et Tranche, nichés ensemble.
Dans Figma, un cadre est ce que d'autres programmes peuvent appeler un plan de travail ou une toile. Sélectionner 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é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 Forme outils, Stylo outils, et les Texte outil. Suivi, ensuite, de Ressources—Composants, Plugins, et Widget-et le Main outil de déplacement dans votre dossier. Et enfin, le commentaires outil 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 des Conception, Prototype, et 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 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 des outils d'alignement, des outils de dimensionnement, Disposition automatique, Grille de mise en page, Couche, Remplir, Accident vasculaire cérébral, Effets, et Exporter. 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 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 logiciel.
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 Couche le menu 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 Exposition, Contraste, Température, et plus.
Au fur et à mesure que vous construisez plus d'éléments dans votre projet, les calques se forment sur la gauche Couches menu à côté du Actifs languette. 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
A droite de la Conception l'option de menu est la Prototype menu. Une fois que vous avez finalisé les aspects visuels de votre conception et défini les zones d'image et le texte où ils doivent aller, vous pouvez utiliser les outils de prototype pour ajouter des animations et des transitions à vos conceptions.
Le Prototype Le menu 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 êtes faire 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 transmettre votre Figma conception à votre équipe de développement qui peut recréer vos interactions prototypes sous forme de conceptions d'animation réelles pour votre site Internet. 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.