Comment faire un prototype sur Figma ?
Source image de couverture : dribbble.com
Si vous souhaitez créer un site web ou procéder à sa refonte dans le respect des principes de l’UX design, trouvez dans cet article pourquoi vous devez utiliser Figma et comment le faire. Un outil facile, complet et accessible à tous, Figma offre des fonctionnalités variées adaptées à un travail collaboratif réussi.
Que vous soyez UX designer ou développeur web, vous connaissez certainement Figma. Il s’agit d’une application qui vous permet de créer des interfaces digitales. Elle offre également des solutions de prototype qui vous permettent d’identifier les interactions avec les clients et / ou développeurs.
Cet article se propose de vous éclairer sur plusieurs questions, notamment le prototypage ainsi que sur l’utilisation de Figma.
Pour rappel, lire : Les possibilités de Figma
Le maquettage UX : base de la création de votre interface
Toute interface digitale, que ce soit d’un site web, d’une application ou d’un logiciel SaaS, a besoin d’une concrétisation graphique. Il s’agit du design de votre page et c’est ce qu’on nomme, plus techniquement, le maquettage.
Il est primordial que le maquettage soit conçu de façon bien réfléchi vu qu’il permet de garantir l’harmonie des différentes composantes de l’interface digitale.
D’autre part, le maquettage englobe trois parties, complémentaires et indissociables, qui sont le wireframe, la maquette et finalement, le prototype.
Nous vous proposons, à travers cet article, de vous éclairer sur toutes les phases et vous expliquer leur importance dans le processus de création de votre site web. Mais d’abord, pourquoi le maquettage est-il très important pour l’optimisation de l’expérience utilisateur ?
Quand nous visitons un site, nous accordons une très grande importance à son esthétique mais également, à la facilité de son utilisation. Ces deux aspects attirent les utilisateurs ou les potentiels clients et rendent leur visite sur votre site web, plus agréable. Par ailleurs, les différentes phases du maquettage assurent le bon fonctionnement graphique ainsi que la fondation UX, en atténuant les éventuelles erreurs.
Le wireframe
Pour le wireframe, il s’agit tout simplement d’une « maquette fonctionnelle », un schéma réalisé afin de définir les contours d’une interface digitale utilisateur ainsi que les onglets qu’elle contiendra. Le wireframe est un outil très important et déterminant, principalement lors de la refonte de votre application ou de votre site web. Cette maquette donne en effet une visualisation des emplacements des contenus textuels et visuels.
Le wireframe est utile dans tout projet web. Il permet de mettre en place ses idées, de faciliter le processus de la création et de faciliter la communication entre toutes les parties prenantes du projet.
Créer des WIREFRAMES RAPIDEMENT, FACILEMENT sous FIGMA
La maquette
La maquette, deuxième phase du maquettage, va permettre de visualiser les premières versions du design graphique du site web ou de l’application. Durant celle-ci, les professionnels UX sont amenés à choisir les couleurs correspondantes, le style et le meilleur design pour le rendu final de l’interface.
Cette étape permet également d’identifier les points de l’utilisateur et par la suite, les améliorations à effectuer sur l’interface. C’est aussi une étape cruciale, car c’est à ce moment précis que l’avis des utilisateurs est pris en compte, et qu’on commence à qualifier l’expérience utilisateur. Après cette phase vient le prototype.
Projet UX : qu’est-ce qu’un prototype ?
Pourquoi faire un prototype de site web ?
Le prototype est une des phases (la 3ème) du maquettage. C’est l’étape de la simulation du rendu final qui vous permet d’avoir un visuel « réel » de votre site web et de tester les éventuelles interactions qu’y auront lieu.
Cette dernière phase vous permet de vérifier l’utilisabilité du site, d’un point de vue visiteur et voir les impacts des fonctionnalités sur l’expérience utilisateur. C’est aussi la dernière étape avant le développement de votre site ou application web.
Un prototype statique ou interactif ?
Le prototype est apprécié car il peut être testé avant d’être mis en avant. On peut avoir un prototype interactif (cliquable) ou encore, un prototype statique. Avec ce dernier, il n’y a pas d’interaction. Les réponses données lors des tests ne sont que celles relatives au concepteur de l’interface, en temps réel.
Quant au prototype interactif, comme son nom le dit, c’est le design qui fournit une réponse aux différentes interactions. L’utilisateur clique (d’où le nom de prototype cliquable), et le changement s’effectue directement, sans l’intervention du concepteur.
Figma Tutorial: Prototyping
Figma : qu’est-ce que c’est ?
Figma est un éditeur de graphiques et un outil de prototype. Les fonctionnalités de Figma sont utilisées dans la conception des interfaces digitales, en mettant en avant l’interaction et la collaboration en temps réel. C’est donc un outil de design en ligne. Grâce à la simplicité de son utilisation et de son accessibilité, Figma n’est pas limité seulement aux UX/UI designers mais à un public plus large.
Figma en 40 minutes
Les points forts de Figma
Figma est un outil avec des codes très simples et très accessibles. Un de ses premiers points forts est le fait qu’il soit un dispositif facile à utiliser et complet en termes de fonctionnalités. L’utilisateur de Figma peut recourir à plusieurs outils, comme le stylo qui permet de créer très facilement des arcs ou d’autres symboles.
Figma est aussi un outil qui se distingue en matière de réalisation de prototype grâce à son approche multi-OS et son orientation autour d’un travail très collaboratif. Il permet à plusieurs personnes de travailler, en même temps et en temps réel, sans poser de contraintes, ce qui accentue la contribution de chaque intervenant et favorise une meilleure collaboration.
C’est une caractéristique très pratique, qui permet aux designers de donner leur avis en temps réel, notamment sur la maquette, de discuter et de jeter un coup d’œil sur le travail de ses collègues. Cette accessibilité garantit également un brainstorming en termes d’apports et d’éventuelles idées UX, ce qui améliore la qualité du prototype fourni.
Figma a été conçu dans l’esprit d’un Design System. En effet, il propose une bibliothèque qui regroupe un ensemble de symboles et de signes qui peuvent être partagés et réutilisés dans différents projets.
Avec Figma, vous pouvez aussi télécharger un ensemble de plugins, qui sont réalisés par des designers.
Sachez que, contrairement à d’autres outils, la version gratuite de Figma offre tout ce dont vous avez besoin pour commencer votre site et avec une petite équipe à taille moyenne. Il a un grand dynamisme vu les mises à jour très fréquentes et promet de grandes performances pour les années à venir, une raison de plus pour l’utiliser.
Les étapes pour créer votre prototype sur Figma
Lorsque vous souhaitez faire la création ou la refonte de votre site, vous devriez passer par plusieurs étapes, dont le wireframe et le prototypage via Figma. Le prototype, comme expliqué ci-dessus, est la troisième phase de la conception, ou de la refonte. C’est la construction de la maquette du site d’une manière proche du réel et du rendu final.
- Tout d’abord, il faut penser à réaliser les grilles correctement car elles vont être utilisées lors de la conception. Mais il est possible de créer, sur Figma, votre propre grille, sans oublier de la coder. Il faut que toutes vos créations soient comprises, notamment par les développeurs.
- Maintenant, il faut passer au remplissage du contenu pour la maquette. Il ne s’agit pas de rajouter des images ou de modifier les couleurs, mais d’avoir du texte. Durant cette étape, on aura une idée sur la conception du site, en temps réel.
- Ensuite, vous pouvez commencer à superposer vos onglets et sections, comme le « à propos », ou des fonctionnalités du site web. Vous pouvez étiqueter et / ou nommer les sections et les définir, avec leurs couleurs et arrière-plan, ce qui vous permettra de les reconnaître et de les modifier facilement. C’est aussi un travail préparatoire, qui facilitera, plus tard, le travail de la conception.
- Surtout, veillez lors de l’avancement sur le projet UX, à ce que le premier prototype ne devienne pas une maquette complète pour la conception d’un site. Le but étant qu’on puisse continuer à planifier le développement du site web.
- Les problèmes sont plus facilement repérables lors des premières étapes de la planification. Prenez du temps et assurez-vous de ne pas dépasser aucune étape même celle qui semble insignifiante.
- Finalement, la dernière étape est le rassemblement de tous vos éléments et le remplissage de toutes les cases.
Conseils pour utiliser Figma
Vous souhaitez savoir comment utiliser Figma ? Vous utilisez Figma mais vous souhaitez vous améliorer ? Voici nos conseils afin de mieux l’utiliser dans vos travaux et projets.
Connaître tous les raccourcis
Un des meilleurs conseils d’utilisation de Figma, est d’être en capacité de reconnaître les raccourcis que vous offre la plateforme. Afin de gagner du temps, vous pouvez utiliser votre clavier au lieu de la souris et / ou du trackpad. Il suffit de cliquer sur le bouton en bas à droite de votre fenêtre «?». Vous pouvez trouver tous les raccourcis dont vous avez besoin, et dans notre cas, appuyez sur « keyboard shortcuts ».
Bien nommer vos calques
En utilisant Figma, il faut toujours nommer les calques. En effet, si vous avez plusieurs documents, vous allez vous retrouver avec des dizaines de calques non identifiés, et vous trouverez plus de difficultés à vous en sortir. Mais Figma vous aide à vous organiser ! Vous pouvez choisir plusieurs calques et les nommer de manière incrémentale avec ⌘+R.
Copier et coller le style graphique
Si vous souhaitez utiliser le même style graphique d’un élément à un autre, il y a une méthode simple et qui ne vous fait pas perdre de temps. Vous pouvez sélectionner l’élément que vous voulez copier en faisant ⌘+⌥+C.
Ensuite, sélectionnez l’élément auquel vous souhaitez appliquer ce style graphique et faites ⌘+⌥+V.s
Suivez les performances de votre page
Si votre document bug, ou qu’il met beaucoup de temps à télécharger, vous devriez aller voir les performances de votre page. Pour ce faire, vous devriez aller dans le menu « Burger » en haut à gauche, puis taper « ressources », et choisir « ressources use ». Vous aurez toutes les informations concernant votre document, ce qui vous permettra de l’améliorer et de l’optimiser.
La sélection des couleurs :
Pour sélectionner une couleur, vous devez sélectionner un élément graphique, et appuyer sur (Control)+C afin de lui attribuer la couleur choisie. Vous avez également la possibilité de tester les nuances de couleurs pendant la phase de création et de changer les teintes comme vous le souhaitez. Il suffit de sélectionner une teinte de gris et de cliquer dans le champ hexadécimal. Puis, appuyer sur les flèches afin de pouvoir changer les teintes. Vous avez également la possibilité d’accentuer la modification en ajoutant le ⇧.
Les erreurs à éviter sur Figma :
Tout au long de cet article, nous avons pu voir toutes les opportunités que Figma peut vous offrir pour la conception et le prototypage des expériences numériques et avoir des retours clients et utilisateurs.
Voici quelques erreurs à éviter en travaillant sur Figma :
- Premièrement, il ne faut pas avoir des images dont la taille est très grande. C’est un facteur de ralentissement du temps de chargement. Vous pouvez trouver sur Figma un outil qui vous permet, d’ailleurs, de juger la rapidité de votre fichier.
- Deuxièmement, il faut absolument éviter les calques masqués. Pensez à la création de différents composants sous différents états !
- Finalement, ne mettez pas les maquettes et les composants dans un même fichier, mais pensez à les séparer et favoriser une librairie externe de composants.
Le mot de la fin
Avec une bonne compréhension du système de Figma et une bonne conscience des opportunités qu’il peut vous offrir, vous pouvez effectuer vos projets dans les règles de l’art.
Cet outil facile et très accessible, vous permet d’évaluer les parcours utilisateurs, d’avoir une vision en temps réel et d’identifier les défauts de votre conception.
Figma est incontournable si vous pensez à la création ou à la refonte de votre site web.
Lire aussi :
- Les possibilités de Figma
- Sketch Vs Figma Vs Adobe XD
- Quels outils pour un prototypage ?
- Les outils utiles pour travailler sur un projet UX
Pour aller plus loin :
by 
