Les dessous des fonctionnalités : les nombreuses vies des modifications multiples

Il existe des fonctionnalités qui nous amènent parfois à nous demander comment nous faisions avant leur invention. C'est le cas des modifications multiples, qui simplifient l'édition de plusieurs objets dans Figma. Si cette fonctionnalité s'intègre aujourd'hui tout naturellement dans Figma, elle diffère tant du principe de fonctionnement des sélections qui s'est imposé comme une norme à l'échelle du secteur, que sa création a pris du temps. Ainsi, les modifications multiples ont vécu plusieurs vies avant que nous parvenions à en faire une vraie fonctionnalité. Maintenant que nous l'avons lancée, nous tenions à vous raconter son histoire. Ainsi, Sho Kuwamoto, Vice President of Product, et Nikolas Klein, Product Designer, nous retracent le long parcours de perfectionnement des modifications multiples et nous expliquent pourquoi le développement de fonctionnalités instinctives devrait être une priorité.

Envie d'essayer ? Utilisez ces raccourcis :

• ⌘ Commande + ⌥ Option + A pour sélectionner tous les objets correspondants.
• Faites glisser le curseur en maintenant la touche Maj enfoncée pour sélectionner les objets correspondants de votre choix.
• Sélectionnez plusieurs objets de texte et appuyez sur la touche Entrée pour les modifier simultanément.
• Sélectionnez un ensemble de composants et appuyez sur la touche Q pour passer en mode de modifications multiples pour des variantes.

Parcourez le fichier d'initiation pour en savoir plus.

La philosophie derrière les modifications multiples

Sho K.

L'un de mes aspects préférés de notre travail au sein de Figma, c'est que nous sommes amenés à remettre en question les principes de fonctionnement des outils de design. Cette réflexion donne naissance parfois à de nouvelles fonctionnalités majeures, d'autres fois à plein de petites améliorations, et plus rarement aux deux. C'est le cas des modifications multiples.

L'idée des modifications multiples nous est venue pour la première fois en 2019. Nous travaillions alors au développement de la fonctionnalité des variantes, et nous rencontrions tant de difficultés épineuses que nous avons décidé de consacrer deux jours entiers de notre temps à un sommet de design pour les résoudre. La plupart des questions ont trouvé immédiatement une réponse, mais l'un des principaux points qui nous posaient un problème était la quantité de modifications répétitives qui étaient nécessaires. Comme vous le savez, l'édition de variantes peut devenir une tâche fastidieuse, et nous avions beau explorer divers mécanismes pour essayer de simplifier ce processus, aucun ne nous semblait satisfaisant.

Nous avons eu alors une idée toute simple : et si nous pouvions entrer dans un mode qui permettrait d'appliquer des modifications à toutes les variantes en même temps, comme par magie ? D'ailleurs, ce mode ne pourrait-il pas être utile dans d'autres cas ? N'est-il pas fréquent de devoir modifier plusieurs designs en même temps ?

Nous avons donc inscrit cette idée sur un tableau blanc, sous le nom de modifications multiples.

Hibernation

Après cette première étincelle, l'idée des modifications multiples est restée longtemps en hibernation. Nous ne pouvions pas nous lancer immédiatement dans le codage, car nous avions encore beaucoup à faire pour définir les idées centrales. Si la solution semble aujourd'hui évidente avec le recul, ce n'était pas le cas à ce moment-là.

Au départ, nous imaginions la fonction de modifications multiples sous la forme d'un nouveau mode puissant, permettant d'éditer beaucoup d'éléments en même temps, fonctionnant un peu de la même manière que les sélections multiples de texte dans un éditeur de texte avancé.

Mais lorsque nous avons essayé de définir précisément comment pourrait fonctionner réellement cette fonctionnalité, nous nous sommes rendu compte que Figma permettait déjà, dans une certaine mesure, les modifications multiples, en sélectionnant plusieurs objets, mais non sans quelques difficultés :

1. Il est difficile de sélectionner les éléments à modifier.
2. Une fois la sélection effectuée, certaines modifications ne fonctionnent pas très bien.

Par exemple, s'il est facile de changer la couleur de plusieurs objets, il s'avère compliqué de les redimensionner. De même, la police ou la taille de plusieurs nœuds de texte peuvent être modifiés très simplement, mais ce n'est pas le cas du texte lui-même.

Un aperçu du développement de produit chez Figma (Config Europe)

Les modifications multiples ont toujours fait partie de notre plan global, mais nous avions d'autres tâches prioritaires. Je les avais même déjà évoquées lors d'une discussion en 2020 !

Nous avons alors cessé d'envisager les modifications multiples en tant que mode, pour nous poser des questions fondamentales telles que la manière dont devrait s'effectuer la sélection.

Nous avons également pris du retard en raison de la réalité du développement de logiciel. Tout aussi brillante que peut être une idée, il y a souvent d'autres priorités.

Nous avons donc laissé l'idée des modifications multiples reposer… pendant très longtemps.

Après l'étincelle, la flamme

Parfois, quand on n'exploite pas une idée immédiatement, elle perd de son attrait et tombe dans l'oubli. Ce ne fut pas le cas pour l'idée des modifications multiples, qui est restée étonnamment populaire au sein de Figma.

Je pense que c'est en partie en raison de notre philosophie. Chez Figma, nous sommes convaincus qu'il est de notre devoir de vous aider à modifier vos designs rapidement, que vous les ayez structurés en amont ou pas.

En effet, sur Figma, presque chaque fonctionnalité permettant de structurer un fichier possède une fonctionnalité similaire plus libre pour les projets moins rigides. Par exemple, on peut utiliser des styles et des jetons pour modifier rapidement les couleurs, ou, pour les objets non structurés, la fonction de sélection de couleurs pour appliquer des modifications par lots. On peut utiliser la disposition automatique pour grouper des éléments en piles en vue de les déplacer rapidement, mais aussi la sélection automatique pour vite réorganiser des éléments sans les structurer. Quant à l'édition, on pouvait utiliser des composants pour modifier plusieurs copies d'un objet en vitesse, mais il n'y avait tout simplement pas de bonne solution pour les éléments non structurés !

Comment faire ? Faire des centaines de copier-coller et de clics ? Les composants avaient besoin d'un équivalent spirituel non structuré, c'est pourquoi nous avions besoin d'une fonctionnalité telle que les modifications multiples.

Tom Lowry, Director of Advocacy chez Figma, était l'un de ses plus grands défenseurs en interne. Nikolas Klein, l'un de nos designers, a conçu un prototype d'une version des modifications multiples pendant l'une de nos Maker Weeks, et j'ai moi-même élaboré un prototype d'une autre version avec les Software Engineers Naomi Jung et Joanna Chen. Chacune de ces expériences nous a permis de mieux comprendre la fonction que nous devions développer et la manière de l'intégrer dans Figma.

La genèse des modifications multiples

Nikolas K.

2023 a paru être le bon moment pour tirer l'idée des modifications multiples de son sommeil et de lui faire voir le jour. J'étais aux anges. La première fois que nous avions commencé à imaginer cette fonctionnalité, j'étais product designer chez Figma depuis moins d'un an. Au cours des cinq années qui ont suivi, nous avons pris de nombreuses décisions majeures concernant le fonctionnement des modifications multiples, d'un point de vue tant fonctionnel que philosophique. Nous avons réalisé des documents de travail et des prototypes avec différents collaborateurs. D'après mon point de vue privilégié, nous avions peaufiné au mieux son design. Par conséquent, j'avais l'impression que le développement des modifications multiples serait une tâche aisée. Quelle naïveté !

Attendez, on peut changer le mécanisme de sélection ?!

Le premier défi consistait à repenser le mécanisme fondamental de sélection lors de la modification de plusieurs calques. Dans Figma comme dans de nombreux autres outils de design, une grande zone de délimitation agrégée est dessinée autour de tous les éléments sélectionnés afin de permettre leur modification, comme s'ils appartenaient tous à un même groupe. Ce système fonctionne très bien pour les opérations effectuées dans un même frame, mais plus du tout lorsqu'il s'agit de modifier des objets de différents frames ou des variantes, par exemple pour redimensionner un logo visible sur tous les écrans.

Dans une solution, nous avions proposé un « mode à limites multiples », nouvelle option qui aurait modifié la façon dont les limites de sélection sont dessinées. Comme vous l'aviez sans doute deviné, cela aurait permis aux utilisateurs d'effectuer des modifications relatives. Cependant, cette solution ne nous satisfaisait pas, et après avoir beaucoup tourné en rond, nous avons compris que nous pouvions changer beaucoup plus fondamentalement les choses : au lieu d'ajouter un nouveau mode, nous pouvions modifier le comportement existant pour chaque sélection, en repensant le fonctionnement de l'édition partout dans Figma.

Si nous avions le sentiment d'avoir avancé en nous mettant d'accord sur une approche, il nous restait encore un chemin peut-être encore plus long à parcourir avant de pouvoir lancer les modifications multiples, en raison de l'étendue et de la complexité de cette nouvelle tâche que nous entreprenions. Au cours des années qui ont suivi, nous avons découvert toutes les interdépendances liées à cette approche, que nous avons résolues les unes après les autres.

Dans un premier temps, nous avons envisagé de dessiner des limites de sélection multiples autour de chaque objet, y compris dans un même frame. Cependant, nous avons vite compris que le mécanisme de sélection traditionnel avait bien fonctionné pour les designers pendant des décennies. Pour trouver le juste équilibre entre les fonctionnalités nouvelles et familières, nous avons trouvé un compromis : l'affichage de zones de délimitation multiples pour chaque ensemble d'objets sélectionné à différents niveaux des designs.

Le prisme des modifications multiples appliqué à toutes les sélections

Après avoir opté pour les limites multiples, nous devions nous assurer que chaque action potentielle fonctionnerait comme prévu dans chaque hiérarchie. Nous avons dressé la liste de toutes les tâches pouvant impliquer une sélection dans Figma, ce qui n'était pas une mince affaire, compte tenu du nombre d'opérations dans Figma qui nécessitent une sélection d'objet d'une manière ou d'une autre. Pour chaque instance, nous avons ajusté le comportement des modifications multiples de manière à l'aligner sur les workflows. Comme les modifications multiples concernaient une immense quantité d'opérations, les enjeux étaient considérables. Notre équipe d'ingénierie, dont faisaient partie Akshay Subramanian, Jung Woo Lee et Emily Louie, qui était stagiaire à l'époque, a été d'une aide précieuse pour réaliser le prototype et ajuster les comportements avec rapidité.

L'un des comportements les plus visiblement problématiques était l'alignement des éléments entre les frames. Lorsque l'on sélectionnait des éléments entre différents frames organisés horizontalement, l'alignement vertical vers le haut ou le bas fonctionnait. Mais si l'on essayait de les aligner horizontalement vers la gauche ou la droite, ces éléments se retrouvaient tous au même endroit sur le plan de travail, s'empilant voire disparaissant complètement du frame voulu.

Pour résoudre ce problème, nous avons mis à jour la fonction d'alignement d'éléments de manière à la rendre relative à chaque frame. Désormais, l'alignement d'éléments prend la plus petite valeur dans la direction de l'alignement pour l'appliquer relativement à tous les objets dans chaque frame.

Nous avons également défini une règle spéciale permettant d'aligner les objets sur le plan de travail avec l'objet le plus proche dans un frame, en contradiction avec nos propres règles consistant à appliquer un « alignement relatif pour chaque hiérarchie », afin de préserver les workflows existants.

Sélectionner le bon nombre d'objets correspondants

Une fois tout ce travail effectué, les modifications multiples nous semblaient déjà représenter une amélioration considérable. L'édition d'objets sur différents frames se faisait de manière bien plus intuitive. Pour aller plus loin, il nous restait encore à faciliter autant que possible la tâche pour les utilisateurs, en leur permettant d'accéder à cette fonctionnalité plus rapidement.

À l'image de Tom et Aravindh, certains de nos utilisateurs ont remarqué cette fonctionnalité et nous ont demandé pourquoi elle n'était pas plus étendue.

Comme nous le savons tous, les designers dupliquent souvent des frames, le même calque se retrouvant alors sur plusieurs copies. Nous avons alors pris les règles de correspondance de la fonction Animation automatique et le comportement de sélection des propriétés des composants afin de permettre aux utilisateurs de « sélectionner tous les calques correspondants » (⌘ Commande + ⌥ Option + A) partout ailleurs.

Toutefois, nous nous sommes rapidement rendu compte que le fait de sélectionner toutes les correspondances dépassait les besoins. Bien souvent, nos utilisateurs ne voulaient apporter des modifications qu'à certains frames. C'est pourquoi nous avons ajouté une option supplémentaire : lorsque la touche Maj est maintenue enfoncée, tous les calques correspondants sont mis en surbrillance et l'utilisateur peut faire glisser les objets correspondants qui l'intéressent pour ne sélectionner que ceux-là. Ce nouveau comportement ne s'applique qu'aux actions commencées en dehors d'un frame. Si l'utilisateur part de l'intérieur d'un frame, l'ancien comportement s'applique et l'objet est ajouté ou supprimé de la sélection.

Garder un mode pour les variantes

Enfin, nous sommes revenus à l'étincelle qui avait tout déclenché des années auparavant : les variantes. Pour gérer les variantes, il est souvent nécessaire de les modifier toutes collectivement. Afin de simplifier ce processus, nous avons introduit une fonctionnalité permettant d'étendre la fonction de modifications multiples à l'édition des variantes.

Alors que notre première avancée avait été de déterminer que les modifications multiples ne devaient pas prendre la forme d'un mode, cela s'est finalement avéré nécessaire pour une question d'efficacité. En effet, les actions groupées, comme la sélection rapide de l'élément suivant ou la création d'un calque de texte pour le libellé d'un bouton sur toutes les variantes, nécessitaient un espace dédié.

Ajustements

Assister à l'aboutissement de toutes ces décisions et tous ces micro-ajustements fut incroyablement satisfaisant. C'est la possibilité d'aller jusqu'à ce niveau de détail et d'application qui m'a attiré chez Figma il y a six ans et c'est ce qui me motive à rester encore aujourd'hui. Les modifications multiples nous ont donné l'opportunité d'affiner certains comportements, ainsi que d'introduire quelques améliorations visuelles certes mineures, mais tout de même notables. Voici quelques-unes des mes préférées :

Cette fois, c'est bon !

Sho K.

La fonction des modifications multiples est celle qui a connu le plus long laps de temps entre l'idée initiale et le lancement. Au fil de ces années, nous l'avons régulièrement reprise puis laissée de côté, appliquant toujours des améliorations et des itérations. Elle représente pour nous un joyau que nous avons façonné jusqu'à la perfection.

Étrangement, la fonction de modifications multiples a failli tomber dans l'oubli alors même que nous la peaufinions. Nous l'avons utilisée en interne pendant des mois et nous nous y sommes tellement habitués que nous ne la remarquions même plus, jusqu'à ce que nous revenions à l'environnement de production : c'est là que nous nous sommes rendu compte de l'inefficacité de l'ancien mode de fonctionnement !

Une partie de moi voudrait continuer à peaufiner cette fonctionnalité, car chaque jour, nous trouvons de nouveaux points que nous pourrions améliorer pour gérer des objets multiples. Par exemple, nous avons modifié l'alignement des objets entre les frames il y a quelques semaines seulement. Je suis convaincu que nous continuerons à découvrir d'autres améliorations de ce type après le lancement.

J'ai également terriblement peur que nous ayons créé des dysfonctionnements. Nous avons modifié beaucoup de comportements subtils et il y a toujours un risque que nous ayons empiré les choses pour certains utilisateurs qui dépendent d'un certain mode de fonctionnement. Nous avons effectué quantité de tests, bien sûr, et nous traiterons rapidement tous les problèmes qui surviendront, mais c'est angoissant d'apporter des changements profonds à Figma, en sachant que des millions d'utilisateurs en dépendent pour leur travail quotidien !

Cela étant, je suis également très enthousiaste. Nous rêvons de cette fonction de modifications multiples depuis près de cinq ans maintenant et c'est exaltant de vous présenter son fonctionnement. J'espère que ces changements vous parlent. Et quand vous rencontrez des éléments qui mériteraient selon vous de fonctionner différemment, n'hésitez pas à nous en faire part, afin que nous puissions encore améliorer les choses.

Envie de vous y essayer ? Consultez notre fichier d'initiation pour commencer à explorer la fonction de modifications multiples.