Il y a quelques jours se tenait la conférence annuelle de Figma, la Config 2023, l'occasion de présenter les nouveautés de cet outil graphique et de prototypage ! Et cette conférence a tout particulièrement retenu notre attention chez Elao, car une grande nouveauté a fait son apparition, que nous avons hâte de tester !
À travers cet article, l'idée n'est pas seulement de vous présenter dans les grandes lignes les nouveautés mises en lumière par Dylan Field CEO chez Figma ainsi que par Kris Rasmussen CTO, mais d'analyser l'intérêt que nous pourrions avoir en tant qu'agence web dans l'utilisation de ces fonctionnalités fraîchement arrivées.
3 axes de travail
Pour cette Config 2023, Figma s'est orienté sur trois grands axes de travail : le design, le prototypage et le développement. Chez Elao, nous sommes amené·e·s à utiliser Figma de manière récurrente, que cela soit pour utiliser les maquettes de nos clients, pour concevoir notre design system ou encore pour élaborer nos outils de communication. Visionner la keynote nous est alors apparu essentiel, afin de rester en alerte face aux fonctionnalités pouvant potentiellement améliorer notre travail quotidien.
À l'agence, notre utilisation de l'outil concerne donc aussi bien la partie design, le prototypage (lors de la conception des maquettes à destination des ateliers clients) que la partie développement (si Figma propose des nouveautés pour nous permettre de mieux utiliser l'outil, récupérer le code et intégrer plus aisément, on signe tout de suite !).
Le design
L'outil, majoritairement utilisé par les webdesigners, affiche l'ambition d'améliorer son interface et ses fonctionnalités afin de gagner en agilité et faciliter la vie de ses utilisateurs. Il est alors tout naturel de retrouver de nouveaux services permettant de faire gagner du temps aux wedesigners, de manière considérable, lors de la conception de leurs designs.
- Un mode dark et plus encore
L'une des grandes nouveautés ayant fait son effet lors de cette keynote est la mise en place d'un mode dark. En effet, il est désormais possible de convertir ses composants en mode dark et ce, en un clic ! Mieux encore ! Figma pousse la fonctionnalité un peu plus loin et propose de créer son propre mode personnalisé, pouvant être intégré à l'écran.
- Adapter la densité de son affichage
Il est possible d'adapter la densité en fonction de l'affichage que l'on souhaite. Très utile pour des affichages en liste par exemple, la densité peut se personnaliser via 3 choix possibles : compacte, confortable et dense. Cela permet de visualiser en un clic l'apparence de son écran en fonction de la place que l'on dispose ou de l'espace que l'on souhaite donner à son design. Dans l'exemple donné lors de la keynote, le passage d'une densité compacte à dense se fait de manière très intelligente, car l'outil ajoute automatiquement à la liste, les visuels de chacun des produits, la place y étant plus grande.
Un outil qui nous semble très utile pour concevoir notre design system et l'adapter aux différents types d'affichage.
- Changer en un clic les chaînes de caractères
Figma propose de passer en un clic d'une langue à une autre sur l'ensemble des chaînes de caractères de son écran. Une fonctionnalité plutôt intéressante si l'on souhaite visualiser le rendu de son design dans une langue totalement différente de la nôtre, notamment celles comprenant des signes (japonais, russe, arabe etc.). Cela permet de constater que notre design s'adapte facilement à tout type de langage.
- Combo gagnant
Toujours dans un souci d'amélioration des variables, Figma propose de concevoir des combinaisons permettant, via un simple copier/coller, d'adapter l'ensemble des composants en fonction des caractéristiques demandées. Par exemple, je souhaite voir ce que donne mon design en mode dark, sur mobile et en japonais, j'ai simplement à copier mon design d'origine dans mon espace personnalisé pour voir ce dernier s'adapter.
Cette fonctionnalité signifie que nous pouvons travailler le responsive de l'écran en un clic, si par exemple nous souhaitons une combinaison composée d'un device type tablette.
Ce principe nous paraît être un gain de temps conséquent, notamment pour la déclinaison des écrans sur différents devices ou modes.
- Gérer le responsive
Toujours en lien avec le point évoqué précédemment, il est désormais possible de définir un minimum et maximum au niveau de la largeur et de la hauteur des composants, de quoi adapter très facilement les éléments et travailler le responsive. Figma est allé un peu plus loin avec l’auto-layout (fonctionnalité déjà existante) en donnant la possibilité d'adapter la mise en page de son design de manière automatique. Le webdesigner peut même aller jusqu'à bouger son design afin d'adapter le responsive. Plutôt grandiose comme fonctionnalité (en tout cas, nous on est conquis) ! 😄
Le prototypage
Les collaborateurs Figma sont partis d'un constat : le système de prototypage est beaucoup trop compliqué visuellement avec ce système filaire qui s'entrecroise, jusqu'à former une sorte de toile d'araignée géante. Dylan Field a même nommé ce phénomène les "Pasta Pictures" qui visiblement inspire certains utilisateurs/internautes !
Le but ? Simplifier ce système pour diminuer l'explosion de combinaisons, et faciliter les itérations lors de la conception du prototype. Comment ? En utilisant des variables !
- Ajouter plusieurs actions sur un même objet
L'idée est alors de générer une sorte de petite base de données avec l'ensemble de nos variables. Dans l'exemple donné par Dylan Field, nous ajoutons des variables à 3 produits (pastèque, poire et cerise).
Ensuite, nous pouvons définir une action (et même plusieurs) pour un même élément. Dans son exemple, il choisit le type d'interaction ("on tap") et le type de variable associée au bouton "+". À travers cet ajout, il demande qu'au clic sur le bouton, cela ajoute une nouvelle quantité et adapte le nombre situé à gauche des boutons. Il va un peu plus loin, en ajoutant une deuxième action au même objet, et lui indique devoir adapter le prix global au clic sur ce bouton. Avec ce système de variables, nous pouvons créer plusieurs actions sur un même objet (et même plusieurs conditions), sans devoir générer un nombre incalculable de liens entre les éléments. Une fonctionnalité qui donne une plus grande agilité au système de prototypage tout en améliorant visuellement son fonctionnement.
- Améliorer l'itération lors de la conception d'un prototype
Jusqu'à maintenant, la visualisation du prototype amenait le webdesigner dans un autre espace que son espace de travail. Cette manipulation lui demandait d'effectuer des allers-retours incessants lors de sa conception. Problème balayé par la mise en place d'un visualisateur de prototype sur son espace de travail (que l'on peut déplacer, redimensionner etc.).
À l'agence, nous sommes curieux d'utiliser ce nouveau système de prototypage. Pour avoir déjà fait face à la problématique des "Pasta pictures", il nous semble intéressant de faire évoluer nos maquettes vers ce nouveau principe reposant sur l'ajout de plusieurs actions et conditions auprès d'un même objet.
Le développement
Kris Rasmussen CTO chez Figma part du constat suivant : les développeurs représentent 30% des utilisateurs de l'outil. De quoi prendre en considération leurs besoins afin d'adapter l'outil à leur usage.
La grande nouveauté, qui nous ravit personnellement beaucoup à l'agence, c'est la mise en place du mode dev ! Mais qu'apporte ce mode et en quoi cela nous paraît être un élément significatif pour nos tâches quotidiennes ?
- Pour chaque frame, l'utilisateur Figma, peut désormais définir si les écrans sont "ready to dev". Ce qui permet au développeur de retrouver ces écrans sur son mode dev (ainsi il est certain de pouvoir travailler sur des designs validés).
- Le mode dev permet au développeur de consulter l'ensemble des éléments prêts à être développés, tout en étant sur les mêmes fichiers que le designer.
- Le développeur ne voit plus toutes les informations avec l'ensemble des composants que le webdesigner peut trouver sur sa barre latérale gauche, mais plutôt des vignettes représentant chacun des écrans.
- Le développeur peut cliquer directement sur une vignette afin d'être redirigé sur l'écran en question.
- Point très attrayant, pour garder une trace de l'historique, le développeur peut avoir une visualisation comparative d'un écran, afin de voir ce qui a été modifié par rapport à l'existant. Il peut faire ce parallèle "side by side" ou en "overlay".
- Figma simplifie la sélection des éléments dans le mode dev : plus besoin de double cliquer pour sélectionner des éléments imbriqués, un simple clic suffit, et ça on aime !
- Le diagramme des bords a été amélioré et personnalisé (le développeur peut changer l'unité).
- On peut désormais ajouter des liens à des composants. Et qui dit lien, dit... des issues Github ! Il ne nous en fallait pas plus pour nous rendre heureux ! Cette nouveauté nous paraît très intéressante à utiliser, afin de faire un lien direct entre le board Github du projet et la maquette. En effet, lors de la conception des tickets, nous sommes amenés à ajouter les écrans dans le corps de ces derniers afin d'illustrer une ou plusieurs fonctionnalités, mais les maquettes évoluent très souvent. Nous devons donc mettre à jour les écrans, ce qui peut devenir très vite fastidieux. Relier le design à un ticket Github est un gain de temps non négligeable. On peut également aller plus loin, et plugger notre outil (Github ou Jira par exemple) afin de créer directement les tickets associés au design et là on est 🤯 !
- On continue crescendo ! Si on vous dit que désormais, vous pouvez générer le code d'un composant sous Typescript, Javascript ou encore React ? Et bien c'est possible avec le plugin for dev mode ! Et ce n'est pas tout ! Avec le plugin Figma for VS Code, l'outil peut détecter, par la simple écriture du nom du design, le code associé et va alors générer lui-même le code. Bon finalement, plus besoin de coder :p
Plus sérieusement cette fonctionnalité permettra sûrement de gagner du temps en récupérant une partie du code généré, mais nous restons quelque peu sceptiques quant à la performance de l'outil. Pour des raisons de qualité et de cohérence avec nos projets nous nous demandons si cette fonctionnalité est réellement complète et adaptée à nos usages.
Conclusion
Vous l'aurez compris, à l'agence on est plutôt excités comme des puces à l'idée de tester ce mode dev qui nous semble participer à améliorer notre productivité et nos process de gestion des projets. Le temps pour nous de prendre en main cette nouveauté et on vous fera un retour d'expérience !
Figma est à ce jour partenaire avec Github, Altassian, Storybook, Microsoft ou encore Google. De quoi améliorer encore considérablement l'outil et élargir son rayonnement ! Avec ces évolutions, Figma consolide sa position en tant que leader et reste à l'avant-garde de l'innovation dans le domaine de la conception collaborative. Nous on file, car les nouvelles fonctionnalités Figma nous attendent !