Figma : relire la maquette de son site sans être graphiste

Votre prestataire vous écrit : « La maquette est prête, voici le lien Figma. » Vous cliquez et découvrez un immense tableau gris, parsemé de rectangles et entouré de menus de graphiste. Figma intimide au premier regard, mais relire une maquette ne demande que quelques gestes, et les commentaires sont la seule chose que vous aurez à manipuler.

Ce que vous avez sous les yeux

Figma est un outil de conception que les graphistes et les web designers utilisent dans leur navigateur. Le lien reçu ouvre un fichier : un grand plan de travail où chaque page du futur site est dessinée dans un rectangle appelé cadre, ou frame en anglais. Vous y voyez en général :

• les cadres de la page d'accueil et des pages intérieures, souvent en deux versions, ordinateur et mobile ;
• à gauche, la liste des pages et des éléments du fichier, qui sert de sommaire ;
• à droite, des réglages techniques (couleurs, polices, dimensions) destinés au graphiste, que vous pouvez ignorer ;
• des pastilles de commentaire, si quelqu'un a déjà écrit sur la maquette.

Une maquette dessine le futur site avant sa construction : des textes provisoires, des photos d'attente et l'absence d'animations sont normaux à ce stade.

Se déplacer sans rien déplacer

Les droits d'accès déterminent ce que vous pouvez faire. Avec un accès en lecture, vous regardez tout et vous pouvez commenter sans rien modifier ; avec un accès en modification, un glisser-déposer de travers déplace un bouton, et l'erreur passe inaperçue. Demandez donc de préférence un accès en lecture. Si l'on vous donne l'édition, retenez que Ctrl+Z (Cmd+Z sur Mac) annule le dernier geste.

Pour naviguer, faites défiler à la molette ou avec deux doigts sur le pavé tactile, et zoomez en maintenant Ctrl (ou Cmd) pendant que vous tournez la molette. Un clic sur le nom d'une page ou d'un cadre dans la liste de gauche vous y emmène directement, et le menu de zoom propose d'afficher tout le fichier d'un coup. Avec un accès en modification, un double-clic sur un texte l'ouvre en édition : appuyez sur Échap et passez à autre chose.

Ordinateur, mobile et prototype

Les deux tailles d'écran

Ouvrez d'abord le cadre mobile : c'est sur téléphone que beaucoup de vos clients découvriront le site. Le cadre est plus long que l'écran, ce qui est normal : il représente la page entière, de l'en-tête au pied de page. Regardez ce qui apparaît tout en haut : votre nom, votre activité, votre ville et le bouton principal. Passez ensuite au cadre ordinateur, et vérifiez que les mêmes informations s'y retrouvent.

Le mode prototype

Le bouton en forme de triangle, dans la barre du haut, ouvre le prototype : la maquette devient cliquable, et vous passez d'une page à l'autre comme sur le futur site. Ce parcours reste une simulation. Seuls les liens que le graphiste a reliés fonctionnent, et les formulaires ou les réservations ne marchent pas. Un bouton qui ne répond pas n'est donc pas forcément un oubli : signalez-le dans un commentaire et laissez le graphiste préciser s'il est prévu.

Pour parcourir le prototype sur votre téléphone, installez l'application Figma, ou demandez à votre prestataire un export des écrans en images pour juger de la taille réelle.

Laisser des commentaires utiles

Pour commenter, activez le mode commentaire avec l'icône en forme de bulle dans la barre d'outils (ou la touche C), cliquez à l'endroit concerné, écrivez, puis validez. Figma peut vous demander de vous connecter : créez un compte avec votre adresse professionnelle, afin que le prestataire reconnaisse l'auteur des remarques. Le commentaire reste accroché à l'élément, ce qui évite de décrire « le bouton en bas à droite, sous la troisième photo ».

Appliquez la méthode de l'article sur la validation d'une maquette de site : un élément, un problème, la raison, sans imposer la solution. Précisez si la remarque bloque votre accord ou s'il s'agit d'une suggestion. Quand le graphiste a corrigé, il répond ou marque le fil comme résolu ; vérifiez, puis laissez-le fermé ou rouvrez-le. Si vous êtes plusieurs à relire, désignez une seule personne qui commente pour tous, afin d'éviter les remarques contradictoires.

Valider une version précise

Le lien Figma est vivant : le graphiste continue de travailler pendant que vous relisez, et la maquette de jeudi n'est plus tout à fait celle de mardi. Avant de valider, demandez une version figée. Figma garde un historique : le graphiste y enregistre une version nommée, que vous retrouvez ensuite en accès en lecture, et il peut aussi exporter les écrans en PDF. Écrivez ensuite votre accord en citant cette version, par exemple « version Accueil v2 ».

Si vous avez dessiné un croquis avant la maquette, comme l'explique l'article sur le wireframe, gardez-le à côté et comparez : chaque bloc prévu doit se retrouver sur la maquette, ou avoir une raison d'avoir disparu. Ne diffusez pas le lien en dehors de l'équipe du projet : il peut contenir vos prix, des textes non publiés et vos photos.

Quand le lien arrive dans votre boîte

1. Demandez un accès en lecture, qui permet déjà de commenter, et la liste des pages à relire.
2. Parcourez le cadre mobile, puis le prototype, puis le cadre ordinateur, en notant vos remarques dans des commentaires.
3. Validez par écrit une version nommée avant le début de la construction. Pour chiffrer un projet avant toute maquette, le configurateur de devis donne un prix fixe selon les pages et les options choisies.