Le tuto Figma gratuit de Petit Hack
Dans ce premier chapitre vous allez apprendre les bases pour pouvoir créer votre prototype sur Figma. Les détails seront pour plus tard !
En ce qui concerne le format d'apprentissage, vous retrouverez dans cet article et les suivants, du texte explicatif combiné à des captures d'écran pour que vous puissiez suivre également pas à pas les différentes étapes afin de réussir à prototyper votre site web.
Des vidéos seront aussi disponible.
La première chose à faire est de vous créer un compte sur Figma si vous n'en avez pas déjà un. Retrouvez la vidéo explicative pour vous permettre de vous créer un compte :
Sinon, suivez les étapes suivantes :
Une fois que vous avez crée votre compte, vous allez devoir commencer par vous créer vos wireframes ainsi que vos composants. Mais qu'est-ce que les wireframes et les composants ?
Un wireframe c'est la maquette de votre site web. En quelques mots, il représente votre site web avec le positionnement des différents éléments qu'il y aura. A cette étape, vous ne désignez pas encore vos boutons, vous n'intégrez pas non plus vos images, ni vos textes.
Vous choisissez uniquement leur emplacement en les représentant par des carrés colorés pour vos images, et par des zones de texte pour les mots que vous emploierez. Vous choisirez aussi la police de votre texte et le style. Vous vous intéressez ici à la forme, schématisez votre futur site web sans réfléchir encore à ce que vous allez dire.
Ok et sinon les composants dans tout ça ?
Les composants sont des groupes qui vous permettront de créer une seule fois un élément de votre page pour le réutiliser par la suite. Par exemple, votre menu devra être un composant, votre footer aussi, ainsi que vos calls-to-action.
Il s'agit de vous éviter de refaire ces éléments à l'infini. Vous le ferez une seule fois, et vous n'aurez qu'à modifier le texte à l'intérieur.
En plus, l'intérêt de faire des composants, c'est que si vous en changez le composant "parent" (celui que vous avez crée en tout premier), tous les composants "enfants" (les duplications) changeront. Vous n'aurez pas besoin de repasser sur chacun d'entre eux si vous souhaitez en modifier leur couleur par exemple.
Il est tout à fait possible si vous n'avez pas envie de vous prendre la tête d'utiliser les templates de Figma déjà pré-conçus avec les composants déjà préparés. Vous n'aurez plus qu'à réutiliser les composants en faisant des glissés-déposés.
C'est vraiment pratique si vous n'avez pas de temps à perdre.
Aussi, vous pouvez vous inspirer de ceux créé par la communauté Figma. Si jamais vous êtes en manque d'inspiration, n'hésitez pas à y faire un tour.
Ici ce qui nous intéresse c'est d'être 100% autonome et d'apprendre à créer son prototype de A à Z. Alors, les templates, ce sera pour plus tard.
Pour créer les composants, il va falloir que vous créez une nouvelle page avec une nouvelle frame. Cette page sera uniquement dédiée à vos composants parents que vous pourrez par la suite, par action de glissé-déposé, les ajouter autant de fois que vous le souhaitez sur votre protypage de votre page web.
Créer des composants vous fera gagner du temps. En modifiant seulement votre composant parent, la modification effectuée se répercutera sur tous les composants enfants que vous aurez glissé-déposé.
Si vous souhaitez modifier uniquement un seul composant enfant c'est tout à fait possible en effectuant les modifications directement sur lui.
Voici comment créer un composant :
Sur cette page intitulée "composants", nous allons créer un bouton. Pour cela :
Pour utiliser vos composants sur votre espace de travail vous n'avez plus qu'à :
Vous savez désormais comment créer des composants. À vous de jouer et de créer votre page web comme vous le souhaitez en utilisant les composants pour votre menu, footer et autres éléments que vous réutiliserez plus d'une fois.
Une fois que vous avez maquetté les différentes pages de votre site web, vous n'avez plus qu'à créer votre prototype en repositionnant tous les éléments au bon endroit et en y ajoutant les détails.
Vos blocs d'images doivent être remplacés par vos images finales, vos blocs de texte par le texte final et ainsi de suite.
Votre prototypage doit être la représentation exacte de ce qu'il doit y avoir sur votre site une fois live.
Mais on ne va pas vous laisser seul pour autant. Il reste encore quelques petites choses à vous montrer dans ce chapitre dont l'importation de vos images.
Suivez les étapes enregistrées regardant la vidéo :
Sinon, suivez les étapes suivantes :
Cet article fait partie de la formation Figma.
Découvrez le chapitre suivant en cliquant ici.