Comment nous avons intégré la recherche assistée par l'IA à Figma

Au-delà du défi que représente le design d'une interface, de nombreux designers consacrent un temps considérable à une tâche qui ne devrait pas être si compliquée : la recherche d'un design existant. Les designers de Figma perdaient du temps à essayer de retrouver des fichiers sources quand ils ne disposaient que d'une capture d'écran, comme en témoignent les centaines de messages sur Slack où ils demandent de l'aide à leurs collègues. C'est pourquoi nous avons lancé la recherche assistée par l'IA lors de Config 2024.

Avec le recul, la recherche visuelle et la recherche sémantique semblent être des fonctionnalités évidentes à mettre en place. Mais développer les bonnes fonctionnalités augmentée par l'IA (celles qui ne font pas simplement le buzz, mais qui ont une vraie valeur ajoutée) prend du temps. Il nous a fallu des mois de cadrage et de tests pour y parvenir.

Si vous souhaitez aller plus loin, consultez notre article sur la façon dont nous avons construit l'infrastructure qui alimente ces mises à jour.

Passer de l'auto-complétion à la recherche assistée par l'IA

Une fonctionnalité telle que l'auto-complétion pourrait aider le designer à rester concentré en lui recommandant le prochain composant.

L'IA devrait prendre en charge les aspects répétitifs de votre travail pour vous permettre de réfléchir à des problèmes plus complexes et de vous concentrer sur les besoins des utilisateurs. C'est dans cette optique que nous avons lancé un hackathon sur l'IA de trois jours en juin 2023. À la fin de notre sprint, nous avions 20 projets terminés, dont un particulièrement ambitieux avec un prototype fonctionnel : l'auto-complétion de design. L'idée est de suggérer des composants (comme un bouton « Commencer » pour un flux d'onboarding) lors du design de l'interface. L'engouement était si fort que nous l'avons immédiatement ajouté à la roadmap de notre produit et avons commencé à le créer.

Nous avons commencé par partager le prototype fonctionnel avec les équipes internes et à discuter avec les designers qui l'avaient utilisé lors de sessions de recherche utilisateur. Alors que nous itérions sur la fonctionnalité à partir de leurs commentaires, nous avons commencé à construire les bases de la recherche assistée par l'IA afin de l'alimenter en parallèle. Grâce à la génération augmentée de récupération (RAG), nous savions que nous pouvions améliorer les résultats de l'IA à l'aide d'exemples issus des recherches. Si l'auto-complétion des designs pouvait trouver des designs similaires à ceux sur lesquels un designer travaillait, elle serait plus à même de suggérer le prochain composant.

Au fur et à mesure des itérations sur l'auto-complétion, menées à partir de commentaires et de tests en interne, des modèles cohérents ont émergé. Par exemple, lorsqu'ils démarrent un projet, les designers ne partent pas de zéro, ils s'inspirent constamment de travaux existants. Ils reviennent sur des explorations passées, reprennent d'anciennes idées et les utilisent pour faire avancer leurs propres travaux. En fait, 75 % des objets ajoutés au plan de travail Figma proviennent d'autres fichiers. Le problème, c'est que retrouver ces designs nécessite souvent de connaître la structure organisationnelle et de savoir qui a travaillé sur quoi, ce qui prend du temps et déconcentre les designers. Nous nous sommes interrogés : l'auto-complétion devait-elle être notre priorité, ou devions-nous d'abord développer ces fonctionnalités de recherche ?

Avant de répondre à cette question, nous nous sommes penchés sur la manière dont nous pourrions améliorer la recherche, en nous appuyant sur les workflows et les comportements des designers. Nous devions travailler sur deux workflows essentiels : le mode exploration, lorsque les designers réfléchissent à des solutions aux problèmes des utilisateurs, et le mode exécution, lorsqu'ils essaient de produire rapidement un design sur le plan de travail.

Les designers oscillent entre ces modes. Nous avons donc dû nous attaquer à deux problèmes principaux :

1. Les éléments de design ne sont pas toujours détectables au bon niveau. Auparavant, les designers devaient choisir entre rechercher parmi des composants de bas niveau dans les bibliothèques de leur design system, ou ouvrir des fichiers entiers pour trouver un écran spécifique. Trouver un élément intermédiaire, comme une frame combinant plusieurs composants, prenait du temps et perturbait leur processus créatif.
2. Il est difficile de déterminer si un résultat de recherche est pertinent à partir d'une miniature seulement. Sans savoir si un résultat présente le bon design ou la dernière version, les designers doivent ouvrir le fichier pour vérifier, plutôt que de parcourir rapidement les miniatures.

Cette analyse a révélé que la recherche était un problème complexe. L'auto-complétion pouvait attendre, mais il était urgent d'améliorer la recherche et la navigation.

Définir notre approche de la recherche

Notre approche devait être ciblée, et apporter de la valeur tout en préparant le terrain pour des fonctionnalités à venir, comme l'auto-complétion. Nos recherches ont mis en évidence trois cas d'usage principaux :

• Recherche de frame : le designer essaie de trouver un design spécifique à éditer et duquel s'inspirer
• Variations de frame : le designer cherche différentes façons de concevoir un élément particulier de l'UI, soit à partir d'explorations antérieures, soit à partir de modèles existants qui utilisent des ressources validées
• Recherche d'inspiration : le designer cherche des concepts similaires sur le plan thématique et des approches différentes pour se donner un point de départ

Nous avons décidé de commencer par les besoins de recherche les plus courants liés à la création, comme la recherche de designs précis, avant de nous attaquer aux cas d'usage d'idéation moins fréquents, comme l'exploration des options lors du lancement d'un projet. Cela nous a permis de nous appuyer sur les habitudes existantes des utilisateurs et d'apprendre plus rapidement. Nous souhaitions également exploiter les recherches assistées par l'IA existantes, telles que la recherche d'images inversée, pour proposer rapidement de la valeur à nos utilisateurs. Pour partager notre vision avec le reste de l'équipe design, nous avons construit un prototype complet de cette recherche améliorée.

Les défis inhérents au plan de travail infini

Nous avons rapidement compris qu'il était impossible de tout indexer et rechercher : cela serait trop coûteux. Sachant que les designers s'inspirent souvent de précédents projets lorsqu'ils commencent à travailler sur un nouveau design, nous nous sommes concentrés sur l'affichage de frames de premier niveau qui ressemblent à des designs d'interface utilisateur (UI). Ce que nous n'avions pas anticipé, c'est que les designers organisent souvent leur travail en sections ou en frames, ce qui rend la détection des designs d'UI difficile. Nous avons résolu ce problème à l'aide d'une méthode heuristique consistant à examiner les dimensions courantes des frames d'UI et à prendre en compte celles qui ne se trouvent pas au premier niveau, si elles remplissent les conditions requises.

Mais identifier les designs d'UI au sein d'un fichier restait difficile. Il arrive que les designers dupliquent et modifient leur travail, ce qui entraîne la création de nombreuses pages au design similaire. En rendant un seul de ces designs consultable (au lieu de chaque doublon), nous pourrions réduire le volume des résultats. Idem pour les fichiers : les designers en copient souvent, nous pouvions donc également nous abstenir d'indexer ces copies non modifiées.

Enfin, nous devions hiérarchiser les designs d'UI au sein d'un fichier. Nous avons constaté qu'au fur et à mesure que les designers travaillent, certains designs sont peaufinés et prêts à être partagés, tandis que d'autres se trouvent sur des pages appelées « Cimetière ». Il nous fallait faire remonter les designs aboutis, mais pas les travaux archivés. Une solution rapide consistait à ne pas indexer les designs tant qu'un designer continuait à les modifier. Nous n'indexions que lorsqu'un fichier n'avait pas été édité pendant quatre heures. Cette approche a permis d'éviter que les travaux inachevés apparaissent dans les résultats de recherche, mais aussi d'augmenter les chances de présenter des designs terminés. Cela a également allégé la charge supportée par nos systèmes.

Évaluer les performances de l'IA : la méthode Figma

Pour qu'un modèle d'IA soit à la hauteur, il faut mesurer ses performances avec des tests qui les évaluent pour une tâche particulière dans diverses situations. Pour nous, cela impliquait de vérifier la qualité des résultats de recherche pour des requêtes typiques. Nous avons choisi les requêtes pour l'évaluation en discutant avec des designers en interne et en analysant la façon dont les gens utilisaient l'explorateur de fichiers de Figma. Un designer peut chercher quelque chose de simple, comme « écran de paiement », de descriptif, comme « site web rouge avec des lignes ondulées vertes » ou de spécifique, comme « sélecteur de thème du projet [nom de code] ».

Pour répondre à l'ensemble des besoins des designers, notre solution devait fournir des résultats pertinents à tous les niveaux : des correspondances exactes aux résultats très similaires, en passant par des options un peu différentes. Cette fonctionnalité ne suffirait pas, à moins de fournir des résultats de haute qualité à différents niveaux de similitude. Nos études ont montré que les utilisateurs préfèrent commencer par chercher quelque chose de plus proche ou plus similaire, même si, en fin de compte, ils recherchent des résultats plus divers. En d'autres termes, nous devions montrer que nous étions capables de retrouver une aiguille dans une botte de foin, sinon les designers n'allaient pas faire confiance à la fonctionnalité pour une exploration plus large.

En utilisant notre API de plugin publique, nous avons créé un outil permettant de classer les résultats de recherche sur un plan de travail infini. Nous avons même ajouté des raccourcis clavier pour faciliter l'étiquetage.

Peaufiner les détails du design

Une fois que nous avons relevé les difficultés imprévues et défini notre approche qualité, nous sommes passés au design. Le plus simple aurait été de concevoir le design pour un workflow linéaire (dans lequel un designer passe nettement de l'exploration à l'exécution), mais en pratique, les choses sont plus compliquées. Les designers oscillent entre les deux modes tout au long de leur progression. Plutôt que d'essayer de deviner dans quel mode ils se trouvent et quand, nous avons décidé de proposer un éventail de résultats aux utilisateurs et de les laisser choisir ce qui correspond le mieux à leurs besoins. Nous nous sommes efforcés de créer une interface unifiée pour affiner les résultats de recherche, quel que soit le type de saisie. Nous avons ajouté des fonctionnalités, comme par exemple des filtres « créé par » et des métadonnées (nom du fichier, éditeur, date de la dernière édition, etc.).

D'autres équipes de Figma exploraient la possibilité de créer un emplacement unique pour les fonctionnalités assistées par l'IA (le nouveau panneau Actions). Nous avons alors réalisé que cet emplacement était idéal pour notre recherche améliorée. Mais cette décision a généré de singulières difficultés en termes de design. Le panneau Actions, par exemple, offre moins d'espace pour les résultats de recherche que le navigateur de fichiers. Nous avons donc ajouté des détails de design tels que le « coup d'œil » pour des aperçus rapides, tout en permettant aux designers d'appuyer sur CMD + Entrée pour afficher un résultat en plein écran.

Lancer la recherche assistée par l'IA

Après des mois de développement itératif, y compris une phase de bêta fermée et des améliorations continues à l'aide de notre plugin d'évaluation, nous étions prêts pour un lancement à plus grande échelle. A posteriori, l'exécution de cette fonctionnalité a été guidée par quatre principes clés :

1. L'IA pour les workflows existants : nous avons utilisé l'IA pour optimiser les tâches que les utilisateurs effectuent déjà, comme naviguer dans les fichiers et copier des frames dans leur fichier actuel.
2. L'itération rapide : nous avons continuellement mis à jour notre environnement de test, en tirant parti des enseignements de notre version bêta interne pour en affiner les fonctionnalités.
3. Des contrôles systématiques de la qualité : nous avons développé des outils d'évaluation personnalisés pour contrôler et améliorer la précision des résultats de recherche.
4. Un travail d'équipe interdisciplinaire : notre succès est dû à une étroite coopération entre les équipes de produits, de contenu, d'ingénierie et de recherche.

Nous avons hâte de pouvoir enrichir ces fonctionnalités de recherche à l'avenir. Notre roadmap prévoit de proposer la recherche visuelle et sémantique à la communauté Figma. En nous concentrant sur les problèmes réels des utilisateurs et en proposant des ajustements fondés sur les commentaires et les données, nous avons posé des bases solides pour des outils de design augmentés par l'IA qui améliorent réellement le processus créatif. Nous avons hâte que vous l'essayiez et que vous trouviez plus facilement ce que vous cherchez.

Merci aux nombreuses équipes de Figma pour leur participation au développement de ces fonctionnalités, ainsi qu'à Spencer de Mars, Augustus Griffin et Rohun Golkar pour leur contribution à cet article.