Guide Complet pour Utiliser Figma

L'Équipe Alphorm
L'Équipe Alphorm 12e lecture en min

Êtes-vous un nouveau venu dans l’univers de Figma ou cherchez-vous à élargir vos compétences actuelles ? 

Ce guide exhaustif vous accompagne à travers chaque étape, depuis le téléchargement et l’installation jusqu’à la mise en œuvre de collaborations sophistiquées dans Figma. Vous apprendrez comment concevoir des projets, manier l’outil Plume, et bien plus encore. 

Découvrez des techniques efficaces pour maximiser votre expérience Figma et augmenter votre efficacité. 

Continuez votre lecture pour devenir un expert de Figma.

Téléchargement de Figma pour Débutants

Vous êtes prêt à commencer? Suivez ce lien pour vous diriger vers le site officiel de Figma et entamez le processus de téléchargement du logiciel. 

Interface utilisateur de Figma pour nouveaux utilisateurs

Maintenant que nous y sommes, créons un compte Figma avec les fonctionnalités de base(gratuite) mais qui nous sera amplement suffisant pour ce cours. Pour ce faire, cliquez simplement sur le bouton « Get started for free ». Une fois cela fini, vous devriez avoir ceci dans votre navigateur :

Bouton 'Design File' dans Figma pour débuter un projet

Astuce pratique : Je vous conseille d’installer la version desktop de Figma, car cela va beaucoup vous faciliter la vie si vous avez plusieurs fenêtres ouvertes dans votre navigateur.

Pour avoir la version desktop, rien de plus simple :

  • Cliquer sur ce lien pour vous rediriger vers la page de téléchargement.
  • Puis à vous de choisir « Application de bureau pour Windows », ou bien « Application bureau pour MacOS » selon votre ordinateur.
  • Suivez les étapes d’installation, et le tour est joué.

Création de Votre Premier Plan de Travail sur Figma

Dans cette partie, vous allez mettre en place votre premier plan de travail. « Mais c’est quoi un plan de travail ? » me diriez-vous. Par une simple analogie, je vous dirais que c’est votre toile si vous étiez peintre par exemple.

Processus de Création d'un Plan de Travail dans Figma

Suivez chacune des étapes suivantes pour avoir votre plan de travail :

  • Appuyer sur le bouton « Design File » situé dans le coin supérieur droit de l’interface principale.

Puis, dans l’espace de travail qui est ouvert, appuyez sur cette partie et choisissez « Frame ».

Bouton 'Frame' dans Figma pour espace de travail

Choisissez parmi les dimensions prédéfinies, sur le côté droit de l’écran.

Liste des frames dans l'interface de Figma
Liste des frames dans l'interface de Figma

Voilà, vous avez maintenant créé votre premier plan de travail totalement opérationnel !

Personnalisation de Votre Espace de Travail dans Figma

Pour personnaliser ce dernier à tout moment, modifier les valeurs en pixels de la taille ainsi que de la position directement. Ou bien utiliser votre souris pour étirer ou réduire et déplacer le plan.

C’est ici que nous allons répondre à vos questions : « Qu’est-ce que cette partie ? Qu’est-ce que cela signifie ? Où faire ceci et cela dans Figma ?». Donc pour commencer, nous allons apprendre à créer une équipe dans Figma.

Formation d'une Équipe sur Figma débutants

Section de personnalisation de l'espace de travail Figma

Il s’agit tout simplement d’inviter plusieurs personnes à travailler sur un seul projet. Pour se faire, suivez le guide suivant, tiré du site officiel :

  • Appuyer sur le bouton « Create new team » suivante :
Localisation du bouton 'Project' pour accéder aux projets
  • Entrez d’abord le nom de l’équipe, par exemple : FigmaPro.
  • Ensuite, saisissez l’adresse e-mail des membres pour les inviter à rejoindre l’équipe, ou ignorer pour les inviter plus tard.
  • Enfin, choisissez le tarif approprié.

Et voilà ! Votre équipe est prête à travailler. Pour créer un projet, cliquer sur le bouton « Project » situé sans le coin supérieur droit :

Accéder à l'espace personnel avec le bouton 'Drafts'

Optimisation de Votre Espace Personnel sur Figma pour les débutants

Vous avez des projets personnels ? Pas de problème, Figma a réservé cette espace dans la partie « Drafts » située comme suit :

Bouton 'FigJam' pour collaboration dans Figma

Vous y trouverez tous vos projets ainsi que la section « Deleted », qui est votre corbeille. Vous pourrez y récupérer des fichiers supprimés par erreur par exemple.

Utilisation de FigJam pour la Collaboration

On a vu tout à l’heure le bouton « Design File ». Maintenant, intéressons-nous à celui de « FigJam Board » situé à sa droite.

 

Illustration de l'outil post-it sur FigJam pour collaboration.

Cette partie vous aide à mettre à point votre workflow avec Figma. Figma propose déjà plusieurs modèles tels que des diagrammes, des agendas, mais je vous présente les outils les plus courants :

Les post-it

Différentes formes utilisables dans FigJam pour projets visuels.

Pour pouvoir noter des informations utiles.Ou laisser un petit message pour une personne dans votre équipe

Les formes

Utilisation de l'outil autocollant pour marquer des idées sur FigJam.

Très utiles durant les sessions de brainstorming ou des mindmap pour mieux s’organiser.

Les autocollants

Démonstration de l'outil marker sur FigJam pour souligner.

Vous pouvez par exemple laisser des réactions sur les autres figures que vous voyez.

L’outil Marker

L'outil minuteur sur FigJam aide à la gestion du temps.

Laisser libre cours à votre imagination pour dessiner tout ce que vous voulez

Le minuteur

Indication de l'emplacement du bouton 'Frame' dans Figma.

Pour donner le laps de temps à passer sur une action en particulier par exemple.

Exploitation Avancée des Fonctionnalités Figma pour les débutants

Trois boutons principaux, c’est mieux que deux, n’est-ce pas ? Eh bien, après les boutons « Design File » et « FigJam Board », nous avons le dernier : « Import ».

Comme son nom l’indique, il nous permet d’importer des fichiers comme des images et vidéos depuis votre ordinateur pour les incorporer dans votre design.

Exploration Avancée de l'Espace de Travail Figma débutants

Maintenant que vous êtes familier avec Figma, découvrons votre espace de travail en commençant par les différents outils :

Maîtriser l'Outil Frame dans Figma

Processus pour renommer un frame dans Figma.

Cet outil nous permet de créer des plans de travail comme vus précédemment. Vous pouvez les renommer à votre goût pour mieux vous repérer en cliquant sur le nom au-dessus du plan.

Localisation du bouton des formes dans Figma.

Création et Design de Formes avec Figma

Astuce pour maintenir la proportionnalité des formes dans Figma.

Ici, Figma vous donne la possibilité de dessiner des formes géométriques basiques.

Vous allez me dire : « N’exagérons rien, ce ne sont que des rectangles et des cercles. » C’est vrai, mais vous ne saviez peut-être pas qu’en webdesign, on utilise la plupart du temps que des rectangles et des cercles comme vous le dites. Vous allez le comprendre quand on va commencer notre projet.

 

Astuce pratique : Pour maintenir la proportionnalité des figures dans Figma, maintenez la touche MAJ enfoncée tout en étirant la figure que vous avez.

Emplacement du bouton plume dans l'interface de Figma.

Techniques Avancées avec l'Outil Plume de Figma

Exemple d'utilisation de l'outil plume pour tracer des formes.

Ceci est la crème de la crème des outils de conception. Vous pouvez dessiner n’importe quelle forme avec. Cet outil est très simple malgré son apparence :

  • Il vous suffit de tracer des points les uns après les autres et de les relier.
Tutoriel pour modifier les courbures avec l'outil plume dans Figma.
  • Ensuite, modifiez les courbures selon vos préférences et enregistrez le tout.
Où trouver le bouton texte dans l'interface de Figma.

Voilà, vous avez créé votre première forme avec l’outil plume.

Notez que ces figures sont des images vectorielles que vous pouvez étirer ou réduire à l’infini sans dégrader la qualité, contrairement aux images matricielles ou en pixels.

Gestion des Textes avec l'Outil Texte de Figma pour débutants

Apparence d'une zone de texte par défaut dans Figma.

Cet outil vous permet comme son nom l’indique, de créer des textes. Des simples titres comme des paragraphes entiers comme ceci :

Astuces pour rendre une zone de texte extensible dans Figma.

Pour éviter que votre texte ne saute à la ligne chaque fois qu’il atteint le bord de la zone de texte, sélectionnez votre zone de texte, puis appuyez simplement sur le bouton indiqué dans la figure suivante.

Ou sélectionner l’outil texte et faites juste un clic sur l’écran pour avoir le même résultat.

 

Localisation du bouton plugins dans Figma pour faciliter l'accès.

Amélioration des Projets avec les Plugins de Figma pour les débutants

Emplacements des boutons main et commentaire dans Figma.

Explorez les différents contenus que la communauté Figma met à votre disposition, telle que des générateurs de texte Lorem Ipsum et d’autres plugins pour vous faciliter la vie.

Interaction et Commentaires dans Figma: Outils Main et Commentaire

« Pourquoi avoir mis les deux dans le même panier ? » Eh bien, c’est parce qu’il n’y a pas grand-chose à dire sur les deux.

Pour l’outil de déplacement, vous pourriez naviguer à travers vos différents plans de travail plus facilement sans risque de modification du design. En revanche, pour l’outil de commentaire, vous pourrez noter certaines parties du design pour donner des consignes à votre équipe sur des modifications.

Étapes pour inviter des personnes à collaborer sur Figma.

Collaboration Efficace en Équipe avec Figma

L’aspect collaboratif, le travail d’équipe sont divers mots-clés pour parler du point fort de Figma. Mais comment inviter les autres à travailler sur votre projet ? Allez, je vous montre comment faire.

 

Comment changer le niveau d'accès pour chaque membre du projet Figma.

Vous pouvez copier un lien d’invitation, comme l’indique la figure 30, et l’envoyer à la personne désignée, ou bien tout simplement entrer son adresse e-mail.

Gestion des Accès aux Projets sur Figma

Pouvoir inviter des gens, c’est bien, mais il ne faut pas non plus inviter n’importe qui qui pourrait modifier votre projet. Vous pouvez gérer cela ici :

Exemple d'un commentaire laissé par un client sur Figma.

Can Edit

Pour que les personnes invitées puissent apporter leurs modifications au projet

Can View

Pour mettre les personnes invitées en mode spectateur, c’est-à-dire qu’elles peuvent uniquement laisser des commentaires

Vous pourrez ainsi partager la progression du projet et votre client peut laisser un petit commentaire parsi par là.

Exemple d'un commentaire laissé par un client sur Figma.

Très bien, nous avons enfin terminé cette partie de la formation au cours de laquelle vous avez exploré les différentes fonctionnalités de l’interface de Figma ainsi que les outils de design. Je suppose que vous êtes maintenant suffisamment prêt pour passer à la vitesse supérieure et commencer enfin notre projet de Newsletter. Rendez-vous donc dans le prochain chapitre pour commencer à mettre en pratique vos compétences.

Si vous souhaitez approfondir vos connaissances et maîtriser toutes les facettes de Figma, nous vous recommandons notre formation dédiée. Cette formation couvre tous les aspects de l’utilisation de Figma, depuis la conception des interfaces jusqu’à l’optimisation des workflows. Accédez à cette formation riche en informations dès maintenant en cliquant sur : formation Figma.

Conclusion

Vous êtes fin prêt pour embarquer dans l’univers de Figma, un outil crucial pour les novices en design qui ambitionnent de concevoir des projets visuels captivants. Pour aller plus loin et découvrir comment utiliser Figma de manière efficace, consultez notre prochain article sur les meilleures pratiques et astuces pour maîtriser Figma

Partager cet article
Par L'Équipe Alphorm Démocratiser la Connaissance Informatique pour Tous !
Suivre :
L'Équipe Alphorm, c'est la démocratisation de la connaissance informatique. Passionnés et dévoués, nous sommes là pour vous guider vers le succès en rendant la technologie accessible à tous. Rejoignez notre aventure d'apprentissage et de partage. Avec nous, le savoir IT devient une ressource inspirante et ouverte à tous dans un monde numérique en constante évolution.