Comment j’ai amélioré ma productivité en utilisant Figma

Je ne suis pas un expert en outil de design, loin de là. J’ai toujours travaillé sur Photoshop pour réaliser des maquettes de newsletters… car c’est le 1^er outil qui s’est instinctivement présenté à moi : une licence Photoshop m’a quasiment toujours été fournie au moment d’arriver dans une entreprise. Pourtant depuis peu, j’entends de plus en plus parler de Figma. Un outil que j’ai pris en main depuis plusieurs mois dont j’ai eu envie de vous parler.

Ma manière de travailler avant Figma

Chez Webedia, je l’utilise pour plusieurs tâches : la création de bannières, le détourage d’images ou le maquettage de newsletters. Ci-dessous un exemple de tâches les plus récurrentes : l’ajout d’un player sur une image pour créer une fausse vidéo dans un email.

Ce genre de tâche peut vite devenir chronophage, vous en conviendrez. Si en plus de cela, vous utilisez souvent ce player, imaginez devoir le chercher parmi vos psd : sans_titre_1.psd, player_good.psd ou encore player_good(1).psd. Pire encore si l’un de vos collègues possède ce psd mais l’a égaré sur son ordinateur. Bref, une perte de temps et de productivité, car il faut refaire un fichier équivalent. Cela s’est malheureusement déjà produit dans notre équipe.

Être bien organisé dans son équipe c’est important mais que se passe-t-il quand des personnes extérieures entrent dans le process ? En fonction de votre secteur d’activité, il arrive que ces personnes tierces veulent avoir accès à vos maquettes Photoshop. Imaginons le process avec et sans Figma.

Un cas client mené avec et sans Figma

Avec Photoshop : Une fois le brief pris et les Wireframes présentées, nous nous sommes lancés dans le maquettage des newsletters. La phase de maquettage prend le plus de temps puisqu’elle est entrecoupée d’aller-retours matérialisés sous la forme de V1, V2, V3… A chaque fois, c’est un nouvel export PDF à envoyer dans la boucle de mail (ou plus selon les demandes client). Ça alourdit le process et en plus pour la planète c’est pas top. On se retrouve avec une boucle de mail interminable comprenant des retours sur les maquettes, des screenshots et de nombreuses pièces jointes.

Avec Figma : Une fois le brief pris, nous pouvons lancer la création des wireframes et des maquettes sur Figma ! En effet vous avez la possibilité de tout avoir au même endroit, je vous conseille toutefois d’utiliser des pages différentes.

C’est parti, ouvrez un nouveau brouillon, ajoutez la frame de votre choix (desktop, mobile, autre…) et créez un premier élément.

Deux conseils avant de vous lancer tête baissé dans cet outil : cela va vous permettre de gagner un temps précieux dans la création de vos éléments.

• Commencez par vous créer une bibliothèque de couleurs dans la section Fill sur le menu de droite.

• Ensuite créez une bibliothèque de composants qui pourront être réutilisés. Groupez vos éléments (CTRL + G) et ajoutez les à la bibliothèque (CTRL + ALT + K)

Mes deux conseils sont ici illustrés localement, mais vous avez la possibilité de partager vos couleurs et composants avec les membres de votre équipe en dehors de ce document. Il faudra pour cela créer une bibliothèque partagée. En prenant le temps de bien paramétrer les couleurs et les composants, que cela soit sur une campagne One-Shot ou une série de newsletters vous allez gagner en homogénéité. (Vous vous souvenez de mon exemple en début d’article ? ????)

Petit saut dans le temps : notre maquette est terminée. Le mot d’ordre pour la suite : pas d’export. Nous allons simplement inviter le client à venir voir notre belle maquette. Il suffit de cliquer le bouton bleu en haut à droite et de partager le lien avec lui (à l’image d’un partage de google doc). Ce dernier pourra alors laisser des commentaires.

Pour avoir testé le process avec Photoshop et Figma, je peux vous dire que j’ai gagné du temps ainsi que de la clarté dans le process. Le positif s’est ressenti côté client, ravi d’avoir moins de documents (un seul lien), côté chef de projet, ravi d’avoir de la fluidité dans les échanges et côté designer qui n’a plus de d’innombrables dossiers de versions à gérer.

Intégration de la maquette

Maintenant que notre maquette est validée par le client, passons à la partie la plus fun : l’intégration. C’est subjectif, mais j’ai aujourd’hui beaucoup plus de mal à intégrer une maquette psd plutôt qu’une maquette Figma. Pourtant Figma n’invente rien : il y a la possibilité d’avoir des règles (MAJ + R) et une grille (section layout grid sur le menu de droite) tout comme sur Photoshop.

Non, ce que je préfère, c’est la simplicité d’utilisation : en cliquant sur un élément, je peux voir rapidement sa position par rapport à un autre en appuyant sur ALT ainsi que ses propriétés. Cela me permet de rapidement paramétrer l’espacement des éléments pendant l’intégration (padding, margin ou spacers). Pour des éléments de type texte, les propriétés me donnent en un coup d’œil le CSS à utiliser : pratique.

Dernier point essentiel, l’ export d’images . En cliquant sur un élément, je peux facilement l’exporter au format de mon choix grâce à la section “Export” dans le menu de droite.

Mes conclusions après quelques mois

Je n’ai abordé qu’une petite partie des possibilités qu’offre Figma, toutefois, pour ma part, il fait tout aussi bien que Photoshop. Je ne dénigre pas Photoshop tant les 2 outils n’ont pas les mêmes finalités : outil de prototypage VS outil de retouche.

Si je devais donner des points positifs à cet outil je dirai qu’il est :

• Collaboratif : plusieurs personnes peuvent travailler sur un même projet.
• Facile d’accès : En quelques heures, il est très aisé de se faire la main.
• Documenté : Parfait pour améliorer ses compétences. La documentation se trouve ici.
• Connecté : Figma possède une bibliothèque de plugins impressionnante. J’en ai utilisé quelques-uns parmi lesquels “Remove.bg” pour supprimer automatiquement l’arrière-plan d’un élément; SubstrateForText pour ajouter simplement un effet surlignage; HTMLtoFigma pour faire du rétro-design.
• Innovant : Figma possède une application afin de faire un preview de votre maquette directement sur votre Smartphone. Je trouve ça chouette et utile !

Un seul point négatif néanmoins :

• La langue : Cela peut déranger certaines personnes que l’outil soit entièrement en anglais. On s’y fait vite ????

Il existe sûrement d’autres points négatifs que je n’ai pas encore trouvé, pour autant, le plus dur sera de faire adopter un nouvel outil à vos équipes quand celles-ci possèdent déjà leurs habitudes de travail.