Workflow lab : Suivre le flux avec l'agent de Figma

Bienvenue dans Workflow Lab, où nous présentons un exemple de workflow utilisant les produits et outils Figma.

Utiliser l’IA dans un workflow de design implique de s’interroger constamment sur ce qui nécessite votre jugement par rapport à ce qui doit simplement être exécuté. Cela semble évident jusqu’à ce que vous soyez sous pression en raison d’une échéance et que vous souhaitiez néanmoins que chaque décision relative au produit et au design vienne de vous. Suivez le parcours d’un designer chez Offtrail, une application fictive dédiée aux rencontres locales en plein air, qui décide à quel moment et de quelle manière confier certaines tâches à l'agent Figma, qu’il s’agisse de nettoyer des composants obsolètes ou de rédiger une spécification pour l’équipe des design systems.

Le problème

Les paramètres d’autorisation d’Offtrail ne permettent actuellement pas à une personne d’organiser un événement ponctuel. L’équipe souhaite donc ajouter des autorisations d’organisateur temporaires qui expirent après l’événement. Le designer prend en charge le projet : mettre à jour l’interface des autorisations pour permettre à une personne de rejoindre un événement en tant qu’organisateur pendant une période limitée, indiquer la date d’expiration de cet accès et donner aux administrateurs du groupe les moyens de le gérer.

L’interface actuelle des autorisations a déjà besoin d’être mise à jour. Certaines frames utilisent des composants et des variables à jour, tandis que d'autres contiennent des instances obsolètes ou des valeurs que quelqu’un a modifiées manuellement. Étant donné que le flux d'accès temporaire repose sur ces écrans, le designer doit les mettre à jour avant de poursuivre.

Inspection et réparation avec l'agent

Avant de commencer à travailler sur le flux, le designer doit savoir quels sont les éléments fiables du fichier de design existant. Ce composant est-il toujours d'actualité ? Ce lien de variable est-il erroné, ou était-il censé fonctionner ainsi ? Ces détails aident le designer à comprendre quelles parties de l'ancien flux doivent être mises à jour.

Personne n'a le temps de vérifier chaque frame manuellement, ce qui explique sans doute pourquoi le fichier comporte des anomalies. C'est là que l'agent Figma entre en jeu. Avant de concevoir la fonctionnalité, le designer sélectionne les frames qu'il prévoit de réutiliser, ouvre une nouvelle discussion avec l'agent et connecte la bibliothèque actuelle. Le designer utilise le skill /repair-library-usage dans une discussion avec l'agent pour inspecter les frames sélectionnées, comparer les instances de composants et les liaisons de variables par rapport à la bibliothèque actuelle, et remplacer celles qui sont obsolètes partout où existe un équivalent clair mis à jour.

L'agent applique ces mises à jour simples directement. Lorsque la bonne décision n'est pas évidente, par exemple, si deux composants dans la bibliothèque actuelle pourraient convenir, l'agent ne modifie rien et annote la frame avec ce qu'il a trouvé et la raison pour laquelle il s'est arrêté. L’objectif est de mettre à jour la partie de l’expérience sur laquelle repose le nouveau travail, et non de nettoyer l’intégralité du fichier. Ainsi, le designer ne résout que les cas qui affectent ce projet, puis passe à la conception de la première version du flux d’accès temporaire sans avoir à jongler entre la maintenance du fichier et la conception des fonctionnalités.

Examen du flux et intégration du feedback

Une fois le fichier source corrigé et les améliorations proposées définies, le designer soumet le flux d'accès temporaire pour une session de validation. Certains commentaires sont simples : clarifier le texte relatif à l'expiration, resserrer la hiérarchie, facilitez la localisation du chemin de récupération. D'autres commentaires soulèvent des questions de politique sur la conformité de l'UX aux exigences légales d'Offtrail. Que se passe-t-il lorsqu'une invitation expire avant d'avoir été acceptée, ou lorsqu'une mise à jour d'autorisation échoue ? Que voit un membre si son accès prend fin en milieu de session ?

Pour l'instant, il ne s’agit que de fils de commentaires, et il est difficile de distinguer ceux qui débouchent sur une action claire de ceux qui nécessitent une décision. Le designer demande donc à l'agent de les trier. L’agent lit les conversations, regroupe les commentaires récurrents, met en évidence les contradictions et souligne les questions non résolues. Le designer dispose ainsi d’un résumé concis et pertinent indiquant les points sur lesquels il doit agir et ceux qui nécessitent encore une réflexion.

Un fil reste ouvert. Certaines questions relatives aux exigences légales restent non résolues, et aucun membre de l’équipe de design ne sait avec certitude comment la politique s’applique dans ce cas précis. Plutôt que de se livrer à des conjectures, le designer demande à l’agent d’appliquer au flux le skill /compliance-review de l'équipe. Le skill contient une référence aux vérifications maintenues par les partenaires de sécurité et de conformité de l'entreprise ; l'agent soumet donc les questions que ces partenaires s'attendent à ce que posent les designers lorsqu’il s’agit d’accès, d’identité et d’autorisations. L'agent communique ses conclusions dans le contexte et annote les frames auxquelles chacune d’entre elles s’applique.

L’agent recueille le contexte dont il a besoin à partir du document externe géré par les partenaires chargés de la conformité, puis examine les designs et fournit des commentaires guidés. Ainsi, le designer peut consacrer moins de temps à reconstituer le contexte et davantage à déterminer en quoi ces conclusions modifient la fonctionnalité.

Génération d'une nouvelle spécification pour le design system

Le design system Offtrail utilise un composant appelé « ligne d'élément », un composant polyvalent utilisé dans les listes pour afficher des éléments tels que des paramètres, des documents, ou des utilisateurs. Mais la compétence /compliance-review révèle une exigence que le composant ligne d'élément ne prend pas actuellement en charge : le design doit indiquer la date d'expiration de l'accès temporaire d'un utilisateur. Un nouveau composant personnalisé non seulement élargit la portée, mais détache également l'expérience du design system Offtrail. La solution la plus durable est d'améliorer le composant ligne d'élément du design system lui-même.

À présent, le travail sur la fonctionnalité est presque terminé. Commencer un transfert séparé du design system pourrait potentiellement retarder le projet et obliger le designer à changer de contexte pour créer un document de spécification au niveau du composant. Pour éviter ces inconvénients, le designer demande à l'agent de rédiger un brouillon de spécification dans une nouvelle section du fichier Figma avec le skill /document-component-enhancement.

En s’appuyant sur l’analyse actuelle des composants et le contexte de design global disponible dans le fichier, l’agent décrit les éléments qu’une mise à jour du système pourrait devoir prendre en charge. La spécification décrit le comportement attendu du composant, les lacunes du composant actuel et les états manquants, tout en mettant en évidence les modifications possibles et les questions à résoudre.

Le designer revoit le brouillon de spécification, confirme les questions à résoudre et partage la section avec l'équipe des design systems. La spécification se trouve dans le même fichier que les frames qu'elle décrit, les commentaires qui ont soulevé le problème et les composants en question. Cette proximité permet aux examinateurs de retracer l’origine de la situation jusqu’au flux qui l’a générée, et elle maintient la responsabilité là où elle doit être. Le designer décide comment la fonctionnalité se développe. L'équipe des design systems décide de ce qu'il advient du composant. Et l'agent explique quelle modification est nécessaire et pourquoi, afin que l’équipe puisse l’examiner pendant que le designer continue à travailler sur le reste de la fonctionnalité.

L'équipe chargée des fonctionnalités du produit poursuit son travail, avec l'assurance que la mise à jour du design system est prise en compte en tant que tâche dépendante du projet relatif aux autorisations temporaires. Ce type de répartition coordonnée des tâches simplifie le périmètre de chaque équipe et leur permet de se concentrer pleinement sur leur domaine de responsabilité. Le développement des fonctionnalités se poursuit à un rythme soutenu, et l'équipe chargée des design systems sait exactement ce qui motive la demande d'amélioration.

Un parcours plus fluide vers la production

La demande initiale formulée par le concepteur a abouti à quatre résultats concrets :

• L'agent a identifié des lacunes dans le design system sur les écrans existants.
• Le flux d’accès temporaire couvre désormais le parcours principal, ainsi que les états d’expiration, d’échec et de récupération qui faisaient défaut.
• L'agent a vérifié les designs par rapport aux directives de conformité de l'équipe et a signalé chaque question de politique à résoudre. Il a également rassemblé les commentaires épars de l'équipe en un document de synthèse exploitable.
• Une spécification de design system capture désormais l'écart dans le composant ligne d'élément avec le comportement requis, et renvoie au raisonnement.

Un canvas visuel, partagé, multijoueurs permet de relier ces résultats entre eux. Les flux conçus, les commentaires et les annotations restent associés au travail qu'ils décrivent, de sorte que le designer, les réviseurs et l'agent peuvent affiner le même artefact au lieu de disperser le feedback dans des outils séparés ou de repartir à zéro à chaque transfert. Il s’agit d’une tâche bien plus vaste que « l'agent a créé un écran ». L'agent a inspecté, réparé et distillé le feedback pendant que le designer prenait les décisions de conception, de produit et de politique qui définissaient la fonctionnalité. Un agent est particulièrement utile lorsqu’il préserve l’attention du designer en assurant la continuité du contexte, en gérant les étapes répétitives et en préparant la suite du processus, de sorte que le designer consacre moins de temps à gérer le parcours menant à la production et davantage de temps à décider de ce qui mérite d’y aboutir.

L'agent Figma est disponible pour les utilisateurs titulaires d'une Licence Full dans les forfaits Professionnel, Organisation, Entreprise, et certains forfaits Éducation, et en disponibilité limitée dans le forfait de base. Les utilisateurs disposant d'une licence Collab, Dev et View peuvent utiliser l'agent dans leurs brouillons.

Découvrez plus en détail comment utiliser l’agent pour maintenir votre design system, explorez la manière dont d’autres entreprises utilisent l'agent dans leurs workflows, ou consultez notre centre d'aide pour savoir comment vous lancer avec l'agent Figma.