Figma - Découverte
Figma fait partie des logiciels de prototypage les plus utilisés du marché. En utilisant Figma, tu pourras notamment concevoir une maquette de site et ou d'application, la transformer en prototype interactif, réaliser des présentations mais aussi brainstormer en équipe grâce à Figjam.
🤓 À la fin de cette quête tu sauras :
✅ Ce qu'est Figma ✅ Comment l'interface de Figma est organisée ✅ Quels sont les outils constitutifs d'un plan de travail sous Figma
Découverte et mise en place de Figma
Via navigateur ou application desktop
Figma est généralement utilisé sur navigateur. Il t'est également possible de télécharger une application en fonction de ton système d'exploitation (Mac, ou Windows) via cette page.
Il te suffit par la suite de te créer un compte avec l'adresse mail de ton choix, si tu n'as pas encore de compte.
Créer son compte avec le plan Education
Figma propose différents forfaits qui répondent aux besoins d'équipes et de projets de toute tailles. Le plan Education permet aux étudiants de bénéficier des mêmes fonctionnalités qu'un plan Figma Pro. En plus des fonctionnalités du forfait de base, voici ce que cela va t'offrir :
-
Design Nombre illimité de fichiers Figma Bibliothèques d'équipes Prototypage avancé
-
Dev Mode Afficher les annotations Inspection avancée Extension VS Code
-
Administration Nombre illimité de versions dans l'historique Projets partagés et privés
Pour t'inscrire avec un plan Education, rend-toi sur ce lien. Une fois que tu auras cliqué sur "Inscrivez-vous", tu devras notamment renseigner ton rôle ("student") le type de formation que tu suis (dans ton cas, "bootcamp") et indiquer l'école dont tu fais partie ("Wild Code School" est listée dans les différentes écoles proposées). D'autres informations, telles que ton domaine d'étude ainsi que l'objet de ta demande seront à renseigner. Tu peux par exemple expliquer que dans le cadre de ta formation, tu es amené à travailler en collaboration avec différentes parties prenantes sur des fichiers de design.
Une fois toutes ces informations renseignées, tu devrais automatiquement bénéficier de ces nouvelles fonctionnalités !
Ton Premier projet
En fonction de tes besoins, plusieurs options s'offriront à toi. Qu'il s'agisse de l'initialisation d'un projet, la création de petites maquettes à main levée pour faire un brainstorming, ou travailler à partir d'un projet déjà existant, les possibilités sont multiples.
Figma propose donc 3 options lorsque tu souhaites débuter un projet.
Suite à une mise à jour, il se peut que tu aies soit l'ancienne interface de Figma, soit la nouvelle. Dans les exemples donnés ci-dessous, des onglets sont à ta disposition pour te montrer à quoi ressemblent les outils en fonction de l'interface de ton Figma.
Projet
Appelé également design file, il est la version la plus commune d'un travail sur Figma. Après son initialisation, il te redirigera vers l'espace de travail de base de Figma.
Figjam
Figjam est un outil intéressant pour les concepts relatifs au brainstorming.
Il apparait sous forme d'un grand quadrillage sur lequel tu pourras travailler seul comme en équipe.
Il te sera également possible d'y ajouter différents types d'éléments graphiques, comme des formes, des autocollants, des dessins, l'import d'images, des post-it...
Import de fichiers
Il t'arrivera de travailler avec des projets déjà existants. Figma peut prendre en compte certains formats de fichiers, tels que les fichiers :
sketch(.sketch)figma(.fig)figjam(.jam)image(PNG, JPG, HEIC, or GIF)
Travail d'équipe
Figma est une plateforme axée sur le travail collaboratif. Elle permet de travailler à plusieurs sur un même projet, et ce, en temp réel.
Lorsque tu seras amené(e) à travailler en équipe, tu pourras te rendre dans le panneau latéral gauche teams ou équipes.
Dans cette section, tu auras la possibilité de créer ta première équipe, ou d'y retrouver les équipes que tu as déjà créés.
Après avoir configuré les paramètres relatifs à ton équipe, tu pourras par la suite créer un nouveau projet d'équipe.
Découverte de l'interface via un projet
Prenons le temps de voir comment se décompose notre interface lorsque nous créons un nouveau projet. Notre espace de travail comporte 3 grandes parties :
- à gauche, le panneau permettant de gérer nos calques
- au centre, notre espace de travail dans lequel nous allons mettre en forme notre projet
- à droite, un autre panneau, utilisé pour la gestion des propriétés des divers éléments constitutifs de notre projet, dans la section
design. La sectionprototypesera quant à elle utile pour mettre en place des prototypes, et ajouter de l'interactivité entre tes pages et tes composants.
Tour d'horizon des outils de base
Penchons-nous sur les outils de base de notre interface.
- Dans la version précédente, les outils se situent dans la barre supérieure de notre espace de travail.
- Dans la nouvelle version, ils se trouvent dans la barre au milieu en bas de ton espace de travail. L'accès au menu se trouve toujours à gauche cependant.
Menu Figma
Permet de te rediriger rapidement vers un travail se trouvant dans un autre projet, ou une autre catégorie.
Il donne également un accès rapide à différentes fonctionnalités que tu peux implémenter et utiliser pour ton projet (librairies, widgets, modification de texte, import de vecteurs...)
Sélection et scale
Comme son nom l'indique, la Sélection te permettra de sélectionner un ou plusieurs éléments de ton projet.
Dans cette même section, la fonctionnalité Scale te sera très utile si tu as besoin de redimensionner en même temps plusieurs éléments de ton travail de manière proportionnelle.
Sur la nouvelle version de Figma, l'outil Hand (main) est également disponible pour se déplacer au sein de ton espace de travail sans impacter les éléments au sein de cet espace.
Frame, section et slice
La frame est l'outil utilisé pour définir la taille du plan de travail sur lequel tu vas travailler. Tu peux le définir de manière libre, ou bien utiliser des formats pré existants dans ton panneau latéral droit, en fonction de tes besoins (format mobile, tablette, desktop...)
La section permet de mieux organiser les différentes parties d'un projet. Il est également possible de lier plusieurs sections entre elles, pour relier des flux entre différentes parties d'un prototype.
Slice est une fonctionnalité puissante et versatile pour l'export de fichiers. En effet, cette dernière aura pour vocation de sélectionner certains éléments ciblés de ton projet. Cela est notamment utile dans le cas où tu aurais besoin d'exporter seulement certains éléments/détails de ton travail.
Formes
Pour créer des formes géométriques simples (cercles, carrés...).
Il est également possible via la liste déroulante de cette option d'importer des images et vidéos.
Plume et crayon
Comme sur Illustrator, ces outils te seront utiles lorsque tu souhaites faire des tracés vectoriels précis, si tu utilises la plume, ou plis libres, si tu utilises le crayon.
Texte
Pour la création de nouveaux éléments textuels.
Widgets, librairies
Une bibliothèque ou librairie te permettra de réutiliser les composants et les styles dans tes projets. Tu peux également sélectionner les composants et les styles que tu souhaites partager, les publier en tant que bibliothèque et accéder à la bibliothèque à partir d'autres fichiers, dans la même idée que l'utilisation des bibliothèques sur Adobe CC.
Un widget est un élément préfait qui pourra t'aider lors de la conception de l'un de tes projets. Les déclinaisons seront multiples en fonction de tes besoins ; il peut s'agir de petites cartes, des listes à cocher, etc.
Commentaires
Comme indiqué au début de cette quête, Figma est une plateforme sur laquelle le travail collaboratif est mis à l'honneur. Avec les commentaires, il est possible de laisser des notes, commentaires, et autres remarques utiles lors d'un travail en équipe.
Figma Slides (Beta)
Nouveauté de Juin 2024, Figma Slides est une fonctionnalité de Figma qui permet de créer des présentations directement au sein de l'application. Elle est particulièrement utile pour les designers, les équipes de produit et les développeurs qui souhaitent créer des présentations visuelles sans quitter leur environnement de travail habituel.
Partage et exports
Plusieurs possibilités s'offriront à toi pour exporter et partager ton travail.
Partager son travail à d'autres contributeurs
Si tu as initialisé un projet, que tu souhaites le partager à tes collaborateurs, il te suffit de cliquer sur le bouton Share présent dans le menu supérieur droit de ton espace de travail.
Il te sera par la suite possible de définir les droits et accès de tes collaborateurs au projet, dans une fenêtre dédiée.
Partager son travail à un client
Dans le cas où tu souhaites partager ton travail à un client, notamment sous forme de planches, il t'est possible de passer via l'option de l'export.
Pour ce faire, rends toi dans ton panneau latéral via Export.
Dans ce dernier, tu pourras définir le format du fichier (PNG, PDF, JPG ou SVG).
Tu pourras également lui donner un suffixe si besoin, cibler l'export d'un ou plusieurs frames, ainsi que voir l'aperçu de ce que tu es en train d'exporter.
☝️ Résumé
Figma est un outil très puissant qui permet de créer des maquettes complexes, depuis les wireframes jusqu'aux prototypes haute fidélité.
Il faut du temps et beaucoup de pratique pour maîtriser ce genre d'outil.
Si tu veux en savoir davantage, beaucoup de vidéos et de tutoriels sont disponibles sur le site de Figma.
Par exemple, tu peux regarder ces courtes vidéos qui présentent des concepts plus avancés.