Comment utiliser Figma ?
L’ordre pour la création d’un projet :
• Trello : permet de créer des Backlog et les différentes listes pour créer le projet.
• Figma : permet de créer dans un premier temps la User Map. Une User Map permet de visualiser les pages d’un site qui
peuvent être relier les une avec les autres. On ne doit mentionner que les boutons principaux que l’utilisateur va se diriger.
Par exemple, les champs ne sont pas à mettre sur les post it. On relit les post it entre elles.
• Miro : permet de créer un « brouillon » de la maquette d’un site. Il est nécessaire que ce « brouillon » soit en noir et blanc
pour ne pas influencer le client sur le choix des couleurs.
• Figma : permet de créer dans un second temps la maquette du site ou de l’application.
Figma peut être utilisé pour deux parties de la conception d’un projet avec deux fonctionnalité différentes :
• New FigJam File : permet de créer la User Map.
• New Design File : permet de créer les maquettes.
Tuto pour savoir utiliser Figma : Youtube Jessica Figma.
Comment utiliser New Design File ?
Les outils qu’on va utiliser le plus sont :
• Frame : permet de choisir notre outil de travail / sur quel « plateforme » on va travailler (soit sur un téléphone, soit sur un
ordinateur,…)
• Rectangle : permet de faire des rectangles qui peuvent nous être utile pour faire un bouton
• Text : permet de faire un text
• Plugins : ce sont différents « bibliothèque » de texte, d’icône,…
• Pour ajouter un outil de travail : cliquer sur frame, soit :
Un espace s’affiche sur la droite. Puis cliquer sur l’outil de travail qu’on veut utiliser.
• Pour renommer l’outil de travail : double clique sur le nom qui se trouve en haut à gauche de l’outil de plateforme,
soit :
Page 1 sur 6
• Pour ajouter une nouvelle page : on utilise une nouvelle page, il faut cliquer sur :
Pour renommer la page : double clique sur « Page 1 ».
• Pour insérer un bouton (comme par exemple un bouton de connexion) : cliquer sur Triangle, soit :
Puis au niveau du déroulement, cliquer sur Rectangle. Puis, à l’aide de la souris, on
forme le rectangle que l’on souhaite.
Pour modifier le rectangle, soit on le fait manuellement, soit on utilise l’espace de
droite qui s’affiche.
On peut modifier la hauteur et la longueur au niveau de « W » et « H ». L’icône
entouré en rouge permet de garder la proportionnalité du rectangle.
L’icône entouré en vert permet de d’arrondir les coins du rectangle.
Fill permet de modifier la couleur intérieur du rectangle.
Strock permet de modifier la couleur des bordures. On peut modifier la grandeur des
bordures.
Page 2 sur 6
• Pour insérer un texte dans un rectangle : cliquer sur text, soit :
Puis on forme la zone de texte où on veut le placer et la taille qu’on veut.
On peut modifier la taille, la couleur, ou la police du texte par :
Pour bloquer le texte dans le rectangle, on sélectionne les deux éléments (avec la touche majuscule) sur l’espace de gauche.
Puis, on clique droit, on sélectionne Group Sélection.
On peut également renommer : double clique sur l’intitulé du rectangle
par exemple.
On peut toujours modifier le texte ou le rectangle même si les deux sont
bloqués ensemble.
• Pour insérer un Plugins : clique droit sur le rectangle, puis descendre jusqu’à Plugins, puis sélectionner soit Content
Réel pour insérer des images, soit Iconify pour insérer une icône, ou soit Lorem Ipsum pour insérer du paragraphe.
Par exemple, quand on rajoute une icône, il est possible que celle ci se mette « derrière » le rectangle. Pour éviter cela,
sélectionner l’icône et clique droit, puis appuyer sur Bring to Front. Pour la remettre derrière le rectangle, sélectionner l’icône,
clique droit et appuyer sur Send to Back.
Page 3 sur 6
• Pour insérer une image qui est sur l’ordinateur : cliquer sur Rectangle, former le, puis appuyer de nouveau sur
rectangle et sélectionner Place Image. Sélectionner l’image sur l’ordinateur puis cliquer sur le rectangle pour l’insérer
dedans.
• Pour dupliquer le même rectangle : sélectionner le rectangle, appuyer sur la touche du clavier option et déplacer le
duplicata du rectangle.
• Pour partager le projet avec d’autre personne : appuyer sur Share ->
• Pour ajouter un variant d’un bouton : on doit créer une autre page où on inséra tous les variants de chaque bouton.
Pour en ajouter un : on copie le bouton que l’on souhaite et on le colle sur la page variant. On sélectionne le bouton et on
appuie sur :
Cela va créer le bouton « parent » qui sera représenté comme ça :
Ensuite pour ajouter un variant on utilise l’espace de droite et appuyer sur
le + pour ajouter autant de variant que l’on souhaite.
Cela sera représenté comme ça sur l’espace de gauche. (Default
est le bouton principal / de base ).
Par exemple, si on veut modifier le texte du variant, on doit
sélectionner, sur l’espace de gauche que le texte
« CONNEXION » (celui de la sous partie du variant). Et ensuite, il
faut se redirigé vers l’espace de droite pour modifier le texte
comme on le veut.
Important : quand je modifie mon bouton principal car il ne me
plait plus, comme par exemple agrandir le rectangle, je dois
également modifier un à un tous les variants. Les variants ne
vont pas se modifier automatiquement.
Page 4 sur 6
Un exemple, je modifie la longueur de mon rectangle mais l’écriture n’est plus centré au rectangle.
Pour recentrer l’écriture je dois d’abord sélectionner le
variant et / ou le bouton principal tout entier sur l’espace de
gauche. Ensuite, sur l’espace de droite je sélectionne : (rond
rouge).
Puis, je sélectionne, sur l’espace de gauche, que le texte du
variant et / ou du bouton principal.
Ensuite, j’appuie sur : (rond vert). L’écriture va se mettre
automatiquement au centre du rectangle.
• Pour ajouter des effets sur un variant : on appui sur, l’espace de gauche, le bouton principal en entier. Sur l’espace de
droite on va dans Prototype. On appuie sur le + Interactions. Un rond bleu apparaît sur le côté droit du bouton principal.
Appuyez dessus et former la flèche jusqu’au variant. Une page apparait et à partir de là vous pouvez sélectionner l’effet
que vous voulez.
Page 5 sur 6
Enfin, quand tous les variants sont fait, il faut sélectionner le bouton
principal et faire un bouton « enfant » qui sera représenté comme ça :
Pour faire le bouton « enfant » sélectionner le bouton principal option et
déplacer le bouton avec la souris.
Faire un copié collé sur le bouton « enfant » et le placer sur la première page.
Page 6 sur 6
