Que vaut Figma, cet outil de design numérique récent et ultra-collaboratif ? Quelles sont les avantages face à Sketch ou Adobe XD ? Quelles sont ses contraintes ? Comment le prendre en main rapidement pour se faire son propre avis ?
Chez Sirup lab, cela fait plus de 2 ans que nous utilisons Figma intensément. Nous avons dépassé la période de lune de miel et si nous en apprécions les avantages, nous avons aussi dû en contourner les inconvénients.
Voici notre retour d'expérience pour vous aider à vous faire votre avis.
Lors de la conception il arrive souvent que 2 designers aient besoin d’intervenir sur la même maquette.
Certains logiciels le permettent en partageant les fichiers communs via le cloud.
Cela provoque rapidement des conflits de version difficiles à résoudre. C'est une perte de temps et un risque d'incohérence du design.
Il y a aussi la possibilité de travailler chacun sur un document séparé mais c’est dangereux car il est possible de partir dans des directions opposées.
Figma se démarque car il permet de travailler en même temps sur un même fichier.
À l’image de Google doc, chaque contributeur du projet peut intervenir sur le même fichier. Il existe plusieurs types de compte : les éditeurs (souvent les designers) et les viewers (le client, les développeurs). Tous peuvent interagir au moins en mettant des commentaires. Cela permet d’avancer en équipe et beaucoup plus rapidement.
Pour gagner du temps sur la création d’une application, il est recommandé de faire intervenir les développeurs dans la phase de conception.
Ils regardent et analysent les designs pour évaluer la faisabilité de chaque composant d’un écran.
Cela permet de gagner du temps sur la phase de développement et de respecter le budget du client lors de la phase de développement.
Chez Sirup lab nous travaillons en itération, c’est-à-dire que nous développons les fonctionnalités une par une.
La collaboration en temps réel avec tous les développeurs permet de partager le design en travaillant déjà sur la prochaine itération.
Comme ils travaillent tous sur le même fichier, les développeurs sont tenus au courant des dernières versions du fichier.
Figma est un logiciel très puissant pensé pour les développeurs et pour les designers contrairement à d’autres. Il propose des outils adaptés aux designers qui facilitent aussi le travail du développeur. Chacun des acteurs du projet a toutes les informations en temps réel pour l'intégration (layout, interaction et asset).
Proposant plusieurs types de compte, Figma permet de donner une licence aux clients qui peuvent donc également suivre la création.
Le client peut commenter les maquettes directement pour que nous fassions les corrections plus rapidement. C’est un atout qui permet de valider les designs efficacement, d’éviter les nombreux allers-retours et les pertes de temps considérables.
Le design peut aussi être livré sous forme de prototype. Cela permet au client de se faire une idée plus claire de l'expérience du produit et aide à identifier des ajustements plus tôt.
Nouveau sur le marché, Figma se confronte à Sketch, logiciel encore très utilisé. Très similaires, ces deux logiciels ont cependant quelques différences et en particulier la collaboration qui reste aujourd’hui impossible en simultané sur Sketch.
Ayant beaucoup utilisé les deux logiciels, voilà, pour nous, les avantages de Figma sur Sketch :
Figma est une application web. Elle est donc disponible sur Mac, sur PC alors que Sketch n'est disponible que sur Mac. Elle n'a pas besoin d'installation. Ceci aide beaucoup la collaboration.
Figma permet la collaboration en temps réel. Il est donc beaucoup plus facile de faire collaborer une équipe de design là au Sketch demande à mettre en place des systèmes de gestion de version.
Figma intègre les commentaires, les assets pour les développeurs, et le prototype. Il nous a permis de remplacer 4 outils par un seul.
Le prix est également une des forces de Figma.
La licence starter permet de créer 3 projets gratuitement. Ensuite la suite la licence ne coûte que 12$ par mois et par poste premium.
Sirup lab ne possède que 3 comptes premium, 1 pour le product manager, 1 pour le designer et 1 pour le directeur technique, ce qui représente une dépense de 45$ par mois. Tous les autres comptes sont gratuits car ils sont simplement en viewer pour les développeurs ou encore les clients.
Un partage en lecture seule permet encore aux développeurs de faire les exports d'éléments graphiques et de voir les positions des éléments.
Il est possible d'ajouter ou de supprimer des licences au mois selon les besoins.
Bien qu’étant une application web, Figma affiche des performances très impressionnantes. Nos propres fichiers peuvent contenir plus d’une dizaine de pages, plus d’une centaine de frames par page, plusieurs centaines de composants … et Figma s’en sort !
Ces performances sont possibles car Figma va charger une bonne partie du fichier en RAM.
Si vous êtes comme nous et si vous aimez produire plusieurs variations pour les écrans clés, ajouter des captures d’écrans du produit existant ou des sources de référence, vous allez rapidement vous trouver avec des fichiers très volumineux.
Outre le temps initial de chargement, vous risquez d’observer des ralentissements de l’interface. Chaque copier-coller va vous couter plusieurs dizaines de secondes.
Sur un Macbook pro avec 8Mb de RAM, il n’est pas rare de voir une dialogue nous avertissant que nous n’avons plus de mémoire.
Notre contournement ? Un peu de ménage régulièrement.
Chaque design qui n’est plus nécessaire (explorations non retenues, benchmarks ou audits) sont déplacés chaque semaine dans une page “archives”.
Chaque mois, les archives sont déplacées dans un fichier séparé d’archive pour le projet.
La collaboration en temps réel de Figma vient avec un problème de taille : comment voir ce qui change ? Ceci est d’autant plus impactant si nous utilisons des composants.
En effet, changer un simple bouton peut modifier une centaine d’écrans. Aucun système ne permettra de voir ce qui a changé par rapport à la version précédente. Un développeur aura donc des difficultés à mettre à jour son développement en conséquence.
Quid de la gestion de version ? S’il est possible de figer une version dans le temps, cela ne semble pas non plus être une solution. Ces versions ne peuvent plus être éditées, et l’avantage de l’édition simultanée est totalement perdu. Il ne sera pas possible de voir les différences entre la version courante et une version précédente spécifique.
Notre contournement ? Aujourd’hui nous allons utiliser les commentaires. Il s’agit d’informer les développeurs des modifications réalisés sur un design en cours de production. Nous allons aussi être prudent sur les mises à jour de composants, et ne le faire qu’une fois une exploration approuvée par tous.
Figma intègre un système simple et utile de commentaire.
Chaque contributeur peut placer une petite bulle sur le design, écrire un message, mentionner une personne. Un commentaire peut se transformer en fil de discussion.
Cela est très pratique pour gérer les demandes de correction ou les demandes d’informations par les développeurs. Ces messages sont vite très précieux.
Il est cependant très facile de les perdre !
Si un commentaire est placé sur autre chose qu’une frame par exemple, il ne sera pas “attaché” à l’image derrière : si l’image est déplacée, le commentaire restera sur place, perdant de son sens.
Si une partie du design est effacée, les commentaires associés se retrouveront “détachés” et ne pourront plus être associés dans le design.
Notre contournement ? N’utiliser les commentaires que pour des informations à courte durée de vie : demandes de correction, de clarification. Utiliser des textes pour ajouter tout détail qui vient informer le design. Sur des réorganisations d’un fichier, bien le faire en affichant les commentaires pour les déplacer au préalable et ne pas perdre l'association.
Ne partez pas de zéro.
Votre prototype est un assemblage de composant : boutons, listes, cartes.
Chaque composant peut avoir plusieurs états : actifs, inactifs, appuyés, vides, pleins.
Tout réaliser de zéro avec un haut niveau de qualité représente des jours de travail. Ne cédez pas à la tentation !
Commencez donc par dupliquer la librairie Material Design adaptée de la librairie de Google.
Vous pouvez ensuite y configurer votre thème :
Vous avez maintenant les briques élémentaires pour composer vos écrans.
Astuce avancée : sélectionnez les composants qui sont disponibles dans la technologie que vous utilisez. Cela permettra de composer un design qui puisse être développé.
Votre fichier Figma configuré, il est temps de construire vos écrans.
Commencez par définir un premier parcours utilisateur, par exemple le premier lancement de l'application. Utilisez des frames pour ceci, prenez la taille qui correspond à votre propre téléphone. Ça sera utile pour tester le prototype plus tard.
Déposez dans ces frames les composants de l'écran : bouton, champ texte, texte, images.
Modifiez les textes, les contenus pour être au plus proche de l'application finale.
Astuce avancée : Dans une application ou un site web, le nombre d’écrans monte vite. La plupart des écrans auront plusieurs états : vide, en chargement, plein, en erreur. En cas de modification, il est difficile de tous les mettre à jour rapidement. Pour pallier cela nous créons un composant pour chaque écran et nous utilisons des instances dans les prototypes.
Une fois les écrans clés de votre parcours réalisés, liés les avec l'outil prototype.
Utilisez des transitions simple, référez-vous aux applications de qualité. Est-ce que l'écran arrive de la droite ? du bas ? Ces détails ont de l'importance.
Concentrez-vous sur un seul parcours. Ajoutez toutes les interactions est tentant, mais cela est très difficile à maintenir et n'est pas réellement utile pour tester une experience.
Téléchargez Figma Mirror sur votre téléphone. Une fois connecté, sélectionnez sur l'éditeur, l'écran à tester. Il apparaîtra sur votre mobile ! Vous pouvez maintenant tester votre parcours et l'ajuster.
Astuce avancée : L'outil smart animate permet de faire des transitions plus complexe entre les écrans en ne faisant bouger que les éléments qui changent. C'est utile pour un carrousel par exemple.
Figma nous a considérablement fait gagner en vitesse et en qualité et nous ne pourrions revenir sur Sketch aujourd'hui. C'est un outil complexe, qui demande de l'apprentissage et un ordinateur puissant. Avec un peu d'accompagnement, il est néanmoins possible d'avoir des résultats très satisfaisant en peu de temps.
Si vous souhaitez de l'aide d'experts pour vous aider à le prendre en main, faites appel à nous ? Nous offrons des ateliers aux incubateurs, donnons des formations d'équipe et renforçons les équipes produit sur Figma.
Nous envoyons une fois par mois nos nouveaux articles, tutoriaux et notre veille technologique
