UX/UI : Figma veut rapprocher designers et développeurs
Récemment installée en France, la startup californienne Figma présente ses outils en alternative à Adobe XD et à Sketch. L’un de ses objectifs est d’améliorer le partage entre les designers et les développeurs d’interface utilisateur en proposant une forme de langage commun.
Lancé en 2015, le logiciel SaaS Figma permet de créer des prototypes d’UX/UI servant de base de travail aux développeurs front-end. Interface d’une application, sites Web, application mobile, etc. Les possibilités sont nombreuses.
Accessible depuis un navigateur Web, il offre une interface permettant de manipuler des composants en glisser-déposer. Plusieurs outils de vectorisation de dessin doivent simplifier la création de mockups personnalisés.
Depuis 2016, l’éditeur californien mise sur l’aspect collaboratif de son outil : designers et développeurs peuvent utiliser les mêmes référentiels lors du prototypage, puis la conception d’une UI/UX.
« Essentiellement, ce qu’a accompli Figma par rapport à Sketch ou Photoshop, c’est ce qu’a fait Google Doc à Microsoft Word », déclare Yuhki Yamashita, Chief Product Officer. « Avec Word, vous deviez envoyer des pièces jointes et il était très difficile de collaborer. Avec Google Doc, vous envoyez un lien et tout le monde peut participer sur la même page. Nous avons fait cela avec le design ».
Selon Yuhki Yamashita, il était très difficile de suivre les itérations des maquettes (mockups ou wireframes) d’un projet et les assets associés. « Avec Figma, tout est accessible depuis un navigateur, vous pouvez travailler à plusieurs et cela rend tout beaucoup plus efficient parce que les gens partagent leurs projets plus tôt, toutes les parties prenantes peuvent assister à l’avancement d’un projet sans qu’elles aient à partager un dossier à chaque fois », vante-t-il.
Partager et réutiliser des designs avec Figma
C’est dans la même optique que la startup a commercialisé FigJam en 2021. Il s’agit d’un tableau blanc en ligne pour partager des idées et commencer à créer des parcours utilisateurs via des diagrammes. Ces éléments seront plus tard utilisés lors de la phase de design. FigJam peut aussi servir à bâtir des mind maps ou encore des organigrammes. « Le design n’est pas seulement pour les designers, mais pour l’organisation toute entière. Même les cadres et les dirigeants doivent pouvoir donner leurs avis sur la conception d’une application », estime le Chief Product Officer.
« Le design n’est pas seulement pour les designers, mais pour l’organisation toute entière ».
Yuhki YamashitaChief Product Officer, Figma
Beaucoup des clients de Figma sont des éditeurs de logiciels et des agences Web. De plus en plus d’entreprises ayant besoin à un moment ou à un autre de créer le design d’un UI ou d’une UX se servent de la plateforme.
Google, Uber, Twitter, Zoom ou encore Netflix sont quelques-uns des clients les plus célèbres de la licorne. Yuhki Yamashita les connaît bien. Il travaillait auparavant pour Uber en tant que responsable du design des expériences nouvelles mobilités et a également été product manager chez Google où il administrait les versions de YouTube sur iOS et sur tablettes. En France, Doctolib et Thales emploient le logiciel.
Ces grands comptes veulent manier des « sortes de pièces de Lego » pour concevoir le design de leurs applications. « Ce qui est intéressant avec Figma, c’est qu’il ne s’agit pas seulement de bâtir des maquettes », indique le Chief Product Officer. « Il s’agit de le faire d’une manière très systématique. Ainsi, nous permettons de former sur Figm ce que nous appelons des “design systems”. Au lieu de créer des designs à partir de zéro, les gens sont en mesure de constituer des composants réutilisables par d’autres designers ».
Créer un langage commun aux designers et aux développeurs
Figma permet de visualiser le parcours utilisateur depuis l'interface de design.
Ces blocs sont établis au fur et à mesure par les designers, puis sont érigés en spécification pour que les développeurs puissent les implémenter dans les espaces front-end. Dans Figma, un moteur de recherche permet de retrouver les composants les plus utiles : un bouton, un symbole de validation, un style, une police particulière, une image, etc. La plateforme peut générer des feuilles de style CSS, du code Swift et XML pour certains assets. Figma peut aussi représenter et animer les flux d’interaction lorsqu’un utilisateur naviguera sur une application. Par la suite, ces projets peuvent être déployés dans des environnements de tests auprès d’usagers triés sur le volet.
L’inspiration pour ces « systèmes » émane des pratiques de programmation, selon Yuhki Yamashita.
« Nous essayons d’aider les designers à structurer leurs créations en s’inspirant du code », affirme-t-il. « Le code a beaucoup de propriétés intéressantes. Vous pouvez construire quelque chose une fois et le réutiliser partout. Et si vous avez besoin de faire un changement, il peut être appliqué automatiquement. Cela accélère la conception, mais cela crée aussi une connexion plus forte entre les préceptes de design et ceux du développement parce que vous recourez aux mêmes concepts ».
« Nous essayons d’aider les designers à structurer leurs créations en s’inspirant du code ».
Yuhki YamashitaChief Product Officer, Figma
Et ce n’est pas vain. Selon le Chief Product Officer, un tiers des utilisateurs de Figma sont des développeurs, et la moitié des usagers de la plateforme ne sont pas designers.
Mais il ne s’agit pas de concevoir directement le front-end d’une application. « Avec Figma, nos utilisateurs préparent des prototypes. Nous avons des plug-ins et des extensions pour qu’un projet soit connecté à un back-end, mais il s’agit plutôt de faciliter le process de conception et de faciliter leur implémentation par les développeurs », précise le Chief Product Officer.
Selon les utilisateurs ayant partagé leurs avis sur Gartner Peer Review, c’est bien l’usage principal de la plateforme. Ces témoins saluent la facilité de prise en main de Figma et ses capacités de partage, mais notent quelques lenteurs au moment de charger de gros projets (tous les éléments créés peuvent être référencés sur une page).
Des extensions tierces pour accélérer la transition du design au code
Ce sont les fournisseurs et les éditeurs qui s’emparent de l’outil pour accélérer cette fusion du design et du développement front-end. En l’occurrence, Amplify Studio, la plateforme de programmation visuelle d’AWS permet de télécharger des projets effectués dans Figma et les transcrire automatiquement en composants React UI.
De son côté, Microsoft a présenté en mai dernier la préversion d’Express Design, un outil lié à Power Apps permettant lui aussi de convertir les designs créés dans Figma en interface utilisateur pour une application tablette ou mobile développée en low-code/no-code. Une intégration similaire existe également avec Bubble, une plateforme SaaS no-code.
En outre, dans les centaines de plug-ins Figma accessibles, des outils gratuits ou payants pour exporter les librairies de composants et les implémenter plus rapidement. Parmi ceux-ci, Unity UX, un produit en bêta proposé par Progress Telerik.
Figma favorise cette liaison avec les systèmes tiers : elle met à disposition ses API pour embarquer sa plateforme au plus près des environnements de développement.
En parallèle, la startup se concentre sur l’amélioration de sa plateforme pour mieux cibler les marchés étrangers, dont la France. « Nous rencontrons un beau succès communautaire », assure Yuhki Yamashita. « 80 % de nos usagers sont en dehors des États-Unis, mais nous nous sommes rendu compte qu’il y avait beaucoup de choses à faire que nous soyons meilleurs pour les entreprises », remarque-t-il. Pour rappel, Figma a lancé son plan entreprise cette année.
Outre le support de langues supplémentaires, la startup veut adapter ses raccourcis aux designers qui n’utiliseraient pas de clavier QWERTY.
Concernant la tarification, Figma dispose d’un essai gratuit à vie (starter) ainsi que trois niveaux payants pour les organisations, coûtant annuellement 12 dollars, 45 dollars et 75 dollars par mois par éditeur (designer, développeur, etc.). Outre le niveau starter gratuit, FigJam coûte 3 ou 5 dollars par éditeur par mois. La startup ne facture pas les visiteurs ou le partage des designs.
