Config Figma 2023 : ce qu'en ont pensé nos designers

À chaque acteur sa grande conférence annuelle… Cette fois c’est Figma - outil fétiche de nos designers depuis quelques années - qui a donné il y a quelques jours rendez-vous aux membres de sa communauté pour annoncer ses nouveautés phares lors de l’événement Config Figma. 8000 personnes ont répondu présentes et parmi elles : une partie de la team UX/UI de USERADGENTS. 

“Figma pour tous” : c’est ce que nous retiendrons de cette édition 2023 avec un discours qui tranche avec les mantras du métier depuis des années… voire depuis toujours. Si le design est un monde d’égos, où la créativité et le talent se revendiquent haut et (plus) fort (que les autres), Figma, fer de lance des modes collaboratifs, dynamite encore un peu plus les schémas de pensée avec des annonces de nouveautés qui vont dans le sens de l’ouverture. Et si désormais nous étions tous un peu designers ? Ça semble être le projet. L’optique : embarquer le plus de parties prenantes possibles dans Figma - même ceux qui s’y connaissent le moins - pour favoriser un travail plus conjoint entre les expertises qui impulsent le développement d’un produit. Des convictions que nous partageons chez USERADGENTS. Dev Mode, variables, IA… Nos experts ont suivi et digéré pour vous le contenu de ces deux jours de conférences pour identifier les annonces les plus clés et leur impact sur le quotidien de nos projets. 

Dev Mode : in the mo(o)d for love… ou pas

Disponible en version bêta dès à présent et gratuitement pour tous d’ici la fin 2023, le Dev Mode est un nouvel espace dans Figma dédié aux développeurs qui a vocation à faciliter les interactions entre la conception et le développement, rendre la collaboration plus étroite, plus fluide… Bref, placer toutes les équipes sur un pied d’égalité. Concrètement les développeurs pourront bénéficier d’outils leur permettant de naviguer dans les fichiers de conception et de transformer avec facilité les éléments en code, évitant ainsi toute perte dans le passage conception - développement. Chez USERADGENTS, vous allez vite le comprendre, nous sommes mi-Config mi-raisin sur le sujet… 

• 

Ce qu’en pense Alex Gomes, Lead UI Designer, notre bisounours

“Sur le papier, le Dev Mode, ça semble intéressant ! Au-delà de l’onboarding qui est très sympa, le Dev Mode donne accès à des fonctionnalités plutôt prometteuses. Parmi elles :
- La navigation en “inspection” classique qui s’enrichit pour récupérer des informations précises sur les éléments (marges, paddings, styles, tailles…) au survol de la souris.
- La possibilité de copier-coller des extraits de codes CSS, iOS (SwiftUI) et Android (Compose) dans Figma et d’en personnaliser l’apparence. 
- L’automatisation de certaines tâches grâce à l’intégration de plug-ins liés à des outils fondamentaux de développement (Jira, GitHub, Storybook).
- Un échange plus étroit avec les Design Systems pour une meilleure synchronisation entre les composants et le code. 
- Les statuts d’avancement qui permettent aux designers d’identifier les frames prêtes à être développées. 
- L’historique des versions pour comparer les modifications… 
Maintenant tout cela reste du conditionnel. Dans les faits, il faudra voir ce que cela va donner.”

Ce qu’en pense Gaëtan Senn, Développeur Full-Stack, la Suisse

“Le Dev Mode permet de générer quelque chose de temporaire. Cela peut donc être très utile en phase d’appel d’offres ou dans la création d’un MVP puisque cela nous évite de faire du développement. Mais si l’on veut quelque chose de propre et structuré, ce n’est pas encore assez mature. Certes le Dev Mode génère du CSS mais en réalité, en développement web, nous n’écrivons plus de CSS directement. Nous utilisons en général Tailwind CSS, qui nous permet déjà d’optimiser le rendu final en regroupant tout dans un seul fichier de style (sans duplication), de simplifier le template final en utilisant les classes, de visualiser les couleurs ou la font qu’on utilise, etc.”

Ce qu’en pense Cyrille Legrand, Head of Mobile, notre Jean-Pierre Coffe

“Le Dev Mode, c’est parfait pour le web, inexploitable sur le mobile natif. Enfin si, c’est très bien pour faire des aperçus rapides ou des petits prototypes. Mais la logique de composants n’est pas encore au rendez-vous. Le Dev Mode produit des ébauches de code SwiftUI ou Kotlin. Rien n’est pensé pour la réutilisation du code produit, il faut toujours retravailler le rendu par la suite. On ne peut qu’espérer, quelques mises à jour de Figma plus tard, que Dev Mode soit transformé en un outil permettant de créer, de centraliser, et de tenir à jour une bibliothèque de composants réutilisables (l’implémentation d’un Atomic Design sous sa forme de code). Mais on en est encore très loin ! Les dev n’ont pas besoin qu’on écrive du layout pour eux, ils ont besoin qu’on leur automatise le design system. En résumé : un vrai Dev Mode, ce sera quand Figma pourra gérer tout seul un package qui implémente tout le design system d’une app, qu’on aura plus qu’à exploiter.” 

Variables : façon flex 

Un principe plutôt simple pour cette nouveauté qui vise à offrir plus de flexibilité et de personnalisation aux interfaces : les variables permettent de “stocker des valeurs comme des couleurs de remplissage, des marges, de la visibilité, etc. qui peuvent être réutilisées dans l’ensemble des projets.” Il existe 4 types de variables : les couleurs, les nombres, les textes, les booléens. Au final, Figma fait avec les variables une sorte de réinterprétation des “Design Tokens” en ajoutant les notions de Collections et de Groupes, le tout chapeauté par les Modes. 

Ce qu’en pense Anne-Sophie Gotteland, Lead UI Designer  

“Les variables facilitent grandement le travail des designers, leur permettant de créer des design évolutifs et ré-exploitables. Cela assure un gain de temps considérable sur leur workflow (comme le dark/light mode en simple drag and drop, le switch entre des tailles d’écrans ou des langues différentes) mais aussi dans la gestion des design systems. Cela simplifie le processus de conception entre designers et développeurs."

Ce qu’en pense Filippo Fresilli, UX/UI Designer

“Les variables représentent une grosse avancée pour les projets à marques & services multiples. En réalité, ce genre de fonctionnalités existaient déjà avant mais c’est la première fois qu’elles sont nativement intégrées à Figma et ça, ça change un peu la vie… et en effet pas qu’aux designers ! Les variables interprètent en fait les design tokens et les développeurs - plus familiers des variables - pourront plus facilement s’en saisir et les exploiter parce qu’on commence à parler le même langage qu’eux.”

Prototypage avancé : la fin des spaghetti

La raison principale de notre coup de cœur pour les variables - que l’on vient d’évoquer - c’est qu’elles font passer le prototypage à un niveau supérieur puisque qu’elles permettent de réduire le nombre de frames en stockant les états et propriétés des éléments UI. Mais les variables ne sont pas les seules à avoir forcé le prototypage à se refaire une beauté, d’autres fonctionnalités l’ont poussé à passer du bon côté de la force : l’intégration de fonctions mathématiques, la possibilité de réaliser des actions multiples et l’ajout d’une logique conditionnelle. 

• 

Ce qu’en pense Alex Gomes, Lead UI Designer  

“Le prototypage avancé est une vraie bonne nouvelle car il devrait permettre d’éviter ainsi le fameux “prototype spaghetti” qui avait même fini par devenir un mème sur Internet. “

Par ailleurs, à partir de maintenant grâce à la fonctionnalité “Preview”, il sera possible de prévisualiser directement un prototype pendant sa conception sans se rendre dans le mode Lecture : le rendu global et toutes les interactions potentielles des utilisateurs avec l’interface. Un bon moyen de faciliter une tâche déjà très laborieuse pour les designers et d’éviter les allers-retours entre les pages et le viewer.

Ce qu’en pense Anne-Sophie Gotteland, Lead UI Designer

Le prototypage avancé réduit les allers-retours entre les outils ou les fenêtres séparées, pour concevoir et tester les maquettes, un gain de temps et de productivité appréciable. Cette nouvelle fonctionnalité apporte plus d'allègement lors de la création de prototype, en éliminant leur encombrement.

Les autres petites nouveautés qui nous seront quand même bien utiles

Auto layout : it’s a wrap! 

L’Auto layout évolue. En plus de proposer les options habituelles (définition de largeurs, hauteurs, espacements… pour un ajustement automatique) et de pouvoir appliquer des variables, l’option Wrap est selon nous une belle nouveauté ! Elle permet de dupliquer des éléments sur une même ligne et de passer à la suivante lorsque que la largeur maximale est atteinte. Cela promet de créer plus facilement des interfaces responsives plus fluides ! 

Ce qu’en pense Alex Gomes, Lead UI Designer  

“Les petits ajouts de notions de largeur / hauteur minimum et maximum, c’est vraiment très intéressant aussi. Cela va aller de paire avec l’Auto layout et permettre, par exemple, de bien gérer les breakpoints (spécifications de tailles correspondant aux nombre de pixels affichés à l’écran).”

L’interface se refait une beauté…

… encore ! Elle avait déjà été revue il y a quelques mois en profondeur mais elle subit aujourd’hui de nouvelles modifications : la recherche est remontée, les fichiers sont regroupés.

Police, montrez-moi votre typo 

Amen. La petite fonctionnalité de preview de la police, c’est tout bête, ça nous avait grandement aidé dans les outils Adobe et c’est désormais disponible dans Figma !

• 

IA dans Figma : le plan est simple, welcome to my life!

• 

Mais sur ces deux jours très riches, ce qui nous aura particulièrement marqué (et c’est pour ça qu’on en parle en dernier) c’est l’annonce d’une incursion plus soutenue de l’intelligence artificielle dans Figma, notamment à travers le rachat le 21 juin de Diagram. Diagram est une société d'outils de design qui réinvente la conception d'interface utilisateur à l'ère de l'IA générative, composée d’une petite équipe de créatifs, de prototypeurs et de développeurs. Diagram c’est surtout une société co-fondée par Jordan Singer… Le même Jordan Singer qui en 2020 avait déjà exploré les liens possibles entre les plug-ins Figma et GPT-3, killant le game avec son plug-in “Designer” qui permettait de designer à l’aide d’un prompt. Visionnaire. 

Avec le rachat de Diagram, c’est tout un panel de nouveaux outils en cours de déploiement, qui, prenant la suite de “Designer” ouvrent la voie à l’intégration d’une IA non invasive dans Figma. Noah Levin, VP of Product Design chez Figma, en a présenté les grandes lignes pendant Config. Le postulat de départ de cette présentation était la question “ l’IA va-t-elle remplacer le designer ? “ La réponse serait plutôt de la voir comme un compagnon du design qui va demander au designer de s’adapter et d’évoluer. Un compagnon qui va venir déduire les pages d’un tunnel de souscription par exemple en se basant sur les briques d’un atomic design ou d’un design system. Un compagnon qui va venir aider à faire du copywriting. Bref, un compagnon pour le designer qui, lui, gardera toujours la main sur son travail. Diagram aura ici pour rôle d’accompagner ce processus enclenché avec l’IA.

3 plug-ins ”made in Diagram” ont été représentés et, spéculons un peu, il n’est pas impossible que suite au rapprochement de Figma et Diagram ils se retrouvent à terme directement intégrés dans l’interface du logiciel :

• Automator : pour automatiser vos workflows Figma.
• Prototyper : qui introduit un prototypage avec du code dans Figma.
• Magician : un véritable outil de design qui s’appuie sur l’IA et les prompts, par exemple pour générer une suite d’écrans, créer un kitUI à partir de maquettes… 

Ce qu’en pense Fabienne Laxtague, UX Strategist

“Magician, présenté comme ça, c’est une belle promesse. Par exemple, la possibilité de générer un résumé des chantiers identifiés en atelier ou en brainstorming à partir des post-its posés sur un board Figma Jam et les trier, cela pourrait être très utile pour nos phases d’UX Research. Mais à voir si l’outil sera plus avancé que son cousin ChatGPT… Car à date, les synthèses de verbatims à mon sens manquent de hauteur dans les interprétations. Dans tous les cas, il faudra toujours superviser le travail de l’IA.”

Un 4ème plug-in, encore au stade de développement, devrait plus tard rejoindre la famille : Genius. Il s’agit d’un assistant, un facilitateur, qui viendra déduire et suggérer des briques de design, des possibilités d’optimisation de maquettes, par exemple pendant la réalisation d’une page produit. Il sera en mesure de comprendre que dans certains cas, il est nécessaire de rajouter un bouton d’ajout au panier et dans d’autres non, de placer le bon wording au bon endroit…

Ce qu’en pense Fabienne Laxtague, UX Strategist  

“L’IA dans le design, dans l’idée c’est oui. Dans les phases d’UX, cela pourrait être très pertinent pour pleins de choses : de la synthèse de textes (quand ils sont bien écrits à la base), glaner des infos sur l’ensemble des acteurs d’un marché… Mais pour des tâches un peu plus compliquées qui nécessitent plusieurs niveaux d’interprétation, il faudra voir. Mais il y a quelques usages que j’attends et qui me sembleraient intéressants… Par exemple pour faire des revue d’accessibilité sur des produits digitaux !” 

De manière générale, ces deux jours de Config ont été riches par deux aspects. D’abord par les annonces de features qui devraient avoir un impact sur le quotidien de nos designers. Mais aussi et surtout par le mojo distillé par Figma pendant ses conférences, encore plus tourné collaboration et avec l’envie de toujours mettre l’innovation - quelle qu’elle soit - à son service. On a adoré ce discours, défendant un univers plus ouvert, moins community-centered qu’avant et surtout que ses concurrents.