Dans les coulisses de Little Big Updates

Aujourd’hui, nous lançons le dernier composant de Little Big Updates, ces petites MàJ qui changent tout. Avec plus de 30 fonctionnalités à la puissance insoupçonnée, ces nouveautés pourraient bien vous faire gagner un temps précieux. Voici quelques-unes des anecdotes de travail que nos designers et développeurs ont voulu vous raconter.

Fonctionnalité : recherche multi-sélection — Utilisez Maj + Clic ou Cmd (Ctrl sur Windows) + Clic pour sélectionner les résultats de recherche à modifier et à remplacer.

Équipe : Jackie Chui (design), Akshay Subramaniam (développement)

Suite au lancement de la fonctionnalité Rechercher et remplacer dans Figma et FigJam il y a quelques mois, l'équipe Produit pensait que lancer la recherche multi-sélection n’allait nécessiter que quelques modifications incrémentales de la fonctionnalité d'origine. « Quand on a commencé à creuser pour voir comment ça se présentait, on est tombés sur des cas extrêmes plutôt… compliqués », explique Jackie, designer  des fonctions Sélection multiple et Rechercher et remplacer. 

Le hic ? Lorsque Jackie et Akshay ont testé la première version de la multi-sélection, ils se sont rendu compte qu'il était difficile de savoir ce qui était réellement sélectionné puisque dans Figma, il est impossible de sélectionner un « parent » (une frame, un composant ou un groupe) et un « enfant » (un objet contenu dans un parent) séparément. Avec la recherche multi-sélection, le parent et ses enfants pouvaient tous s'afficher en même temps dans les résultats. Techniquement, cela fonctionnait, mais l’expérience utilisateur n’était pas exempte de friction. « Je n'arrêtais pas de me demander si c’était un bug », explique Akshay. Tout fonctionnait comme prévu lors de la sélection du premier élément, mais dès l'ajout du deuxième, la sélection s'étendait à une foule d'objets imbriqués qui n'étaient pas forcément censés faire partie de la sélection. Et dès l’ajout d’un fichier avec beaucoup d'imbrications, tout devenait très confus. « On se retrouvait alors perdu dans cet énorme fichier sans arriver à faire de  sélection multiple », ajoute Akshay.

Comment Jackie et Akshay ont-ils trouvé la solution ?  Ils ont créé une hiérarchie visuelle dans le panneau latéral Rechercher et remplacer qui indique clairement quels enfants dépendent de quels parents et ce qui est sélectionné au fur et à mesure. Lorsque vous maintenez la touche Cmd/Ctrl ou Maj enfoncée pour sélectionner plusieurs éléments en survol, Figma met en surbrillance les éléments indirects que vous sélectionnez automatiquement en arrière-plan et entoure les enfants  sélectionnés, ce qui permet d’avoir un  aperçu. « Pour moi, ça a vraiment changé la donne », explique Jackie. En fin de compte, ce sont les cas extrêmes qui les ont aidés à trouver la solution la plus adaptée. « Même la fonction Rechercher et remplacer d'origine n'avait pas autant de cas extrêmes », explique Akshay. « La sélection multiple est presque née de ces cas extrêmes. »

Fonctionnalité : effets de flou. Si, lors du prototypage, vous ajoutez une superposition avec des effets de flou d'arrière-plan, tout devient flou.

Équipe : Brandon Lin (développement)

Jusqu'à maintenant, les effets de flou sur les superpositions n’étaient pas optimaux dans Figma. Le visualiseur de prototypes rendait un flou quand on saisissait ce qui se trouvait directement sous la frame. Mais avec les superpositions, il n'y a rien à cet endroit. Brandon n'avait que quelques semaines d'ancienneté lorsqu'il a commencé à déboguer les effets de flou des superpositions dans le prototypage. Attribué dans le cadre de son intégration, ce projet l'a aidé à prendre ses marques et à comprendre comment sa nouvelle équipe collabore. Après avoir cherché quelle approche adopter, Brandon avait peur de passer à côté de quelque chose. Il a donc pris du recul pour coucher ses réflexions sur le papier, lister les potentiels écueils et ébaucher une première solution, avant de partager ce document avec ses collaborateurs.

Ces derniers ont apporté des suggestions pour affiner sa solution. Afin que le code sache précisément où chercher les éléments à flouter, il a été question de transmettre les informations concernant la position de la superposition au code. À partir des commentaires de l'équipe, Brandon a ajouté une structure concrète et a extrait des données pertinentes pour rendre plus claire l'association entre les superpositions et leurs frames respectives. Ces modifications permettent de représenter différentes superpositions à leurs emplacements respectifs et de les superposer correctement les unes sur les autres. Dès le départ, l’intuition de Brandon était la bonne, mais en tant que petit nouveau chez Figma, il a eu besoin de le vérifier avec l'équipe. « Cela m'a donné davantage confiance en moi », affirme-t-il.

Fonctionnalité : aperçus sur un canevas. Survolez les options du panneau Design pour prévisualiser les différents paramètres et les propriétés avant de les valider.

Équipe : Hauke Gentzkow (design), Molly Lloyd (développement)

La création d'aperçus sur le canevas a été un exercice de simplification. Avant de déterminer quels paramètres et propriétés allaient être disponibles en aperçu dans Figma, comme les modes de fusion de calques, les effets et les modes de fusion des couleurs, l’équipe a dû réfléchir à la prise en charge des opérations booléennes, des propriétés des composants et du sélecteur de polices. « J'ai commencé avec un périmètre immense. Je pensais que nous devions accomplir tout un tas de choses très complexes, sinon ce n’était pas la peine de travailler sur ce projet », se rappelle Hauke. « J'étais assez inquiet à l'idée que l'ensemble de fonctionnalités que nous avons aujourd'hui ne soit pas suffisant, mais une fois que nous avons commencé à l’essayer, nous avons compris à quel point l'outil était puissant. » « La seule chose qui me stressait, c'était le peu de temps dont nous disposions », confie Molly. Alors comment avancer rapidement, tout en peaufinant les détails ?

Au lieu d'essayer de tout traiter en même temps, le binôme a établi des priorités strictes. Hauke a réalisé un audit de tous les attributs de l'éditeur Figma comportant une liste déroulante, qu'il a ensuite passés en revue avec Molly. « Je me disais que telle ou telle chose était très simple à faire, tandis que d'autres risquaient d'être compliquées, ou que les utilisateurs ne pourraient pas accomplir certaines tâches par manque de mémoire vive », explique Molly. Elle a convenu d'une approche avec Hauke. « Finalement, nous avons développé des fonctionnalités qui nécessitaient peu de modifications au niveau de la géométrie ou du canevas. », explique Hauke.

Cette approche a été validée en interne. « Lorsque j'ai partagé une proposition de développement, tout le monde s'est exclamé : "Ça fait tellement longtemps que j’attends ça !" Je trouve que cet engouement en interne pour une fonctionnalité aussi simple et basique représente très bien Figma », affirme Molly. « On apprécie les petits détails et on se réjouit des mises à jour qui améliorent l’utilisabilité. »

Fonctionnalité : ponctuation hors justification. Laissez respirer votre texte en laissant les signes de ponctuation tels que les guillemets sortir du bloc de texte.

Équipe : Amanda Yeh (design), Joanna Chen (développement)

Un bon design repose sur les détails. L'équipe Produit se penche donc régulièrement sur les façons de les améliorer. Exemple concret : alors qu'Amanda et Joanna travaillaient sur le bloc de texte, elles ont dû laisser la ponctuation hors justification… en suspens.

« Pour Joanna, ce réglage devait se présenter sous la forme d'un raccourci clavier, tandis que j'optais plutôt pour un toggle dans le panneau des paramètres de saisie », explique Amanda. L’idée du raccourci clavier implique de considérer la ponctuation hors justification comme un retrait fonctionnel, alors qu'un toggle  témoigne d’une approche davantage orientée vers la typographie. Il a fallu beaucoup de temps de réflexion, car il n'y avait pas beaucoup de précédents au sein d’autres produits. Il n'existe pas de méthode standard pour mettre en œuvre ce réglage dans CSS et elles voulaient s'assurer que l'approche était intuitive pour les utilisateurs.

« Nous avions chacune des arguments différents pour [défendre une approche plutôt qu'une autre], et honnêtement, nous sommes donc toujours en train d'en discuter », explique Amanda. « Nous vous tiendrons au courant ! »

Lorsque nous les avons interrogées, Amanda et Joanna n’avaient pas encore tranché, mais elles ont évidemment pu se décider à temps pour le lancement : elles ont opté pour un toggle en partant du principe que les designers traiteraient cela comme un changement de style.

Découvrez ces correctifs et ces fonctionnalités, ainsi que plus de 30 petites MàJ qui changent tout.