Beaucoup de nouveaux utilisateurs de Figma trouvent la prise en main de cet outil complexe, ce qui peut ralentir la création de designs efficaces et nuire à la collaboration en équipe.
Cette difficulté peut entraîner des erreurs, une perte de temps et une baisse de productivité, impactant négativement la qualité de vos projets et l’efficacité de votre équipe.
Dans cet article, nous simplifions le processus de démarrage avec Figma. Suivez nos étapes détaillées pour maîtriser les fonctionnalités essentielles, personnaliser vos plans de travail, et optimiser la collaboration.
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.
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 :
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é.
Formation Figma UX/UI 1/4 : Maîtriser le Design d’interfaces UX/UI
Initiez-vous au design d'interfaces et créez des expériences utilisateur intuitives !
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 ».
Choisissez parmi les dimensions prédéfinies, sur le côté droit de l’écran.
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.
Navigation et Utilisation Basique de Figma
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
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 :
- 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 :
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 :
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.
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
Pour pouvoir noter des informations utiles.Ou laisser un petit message pour une personne dans votre équipe
Les formes
Très utiles durant les sessions de brainstorming ou des mindmap pour mieux s’organiser.
Les autocollants
Vous pouvez par exemple laisser des réactions sur les autres figures que vous voyez.
L’outil Marker
Laisser libre cours à votre imagination pour dessiner tout ce que vous voulez
Le minuteur
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.
Figma Masterclass : UX/UI du Concept au Prototypage
Maîtrisez l'Art du Design Collaboratif avec Figma : Parcours d'Apprentissage Complet pour Créer, Collaborer et Innover Ensemble
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
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.
Création et Design de Formes avec 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.
Techniques Avancées avec l'Outil Plume de Figma
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.
- Ensuite, modifiez les courbures selon vos préférences et enregistrez le tout.
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
Cet outil vous permet comme son nom l’indique, de créer des textes. Des simples titres comme des paragraphes entiers comme ceci :
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.
Amélioration des Projets avec les Plugins de Figma pour les débutants
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.
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.
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 :
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à.
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.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui. Découvrez des cours variés pour tous les niveaux !
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
