Comment exploiter votre design system grâce à l'agent Figma
Votre design system peut aider l'agent Figma à comprendre les principes et les directives qui définissent votre produit. Voici comment rendre ce contexte utile à l'agent.
Partager Comment exploiter votre design system grâce à l'agent Figma
Illustration principale par Cynthia Alfonso
L'agent Figma est un outil de collaboration puissant. Mais comme tout outil de collaboration, sa valeur dépend des informations que vous lui fournissez. Plus il dispose d'un contexte précis concernant votre design system et le projet en cours, mieux il est à même de prendre des décisions qui reflètent le mode de création de votre équipe. Avec un contexte approprié, l'agent peut produire des résultats qui ressemblent véritablement à votre produit, tant sur le plan visuel que sur le plan de l'expérience utilisateur, ce qui vous permet de passer moins de temps à corriger des travaux génériques ou non conformes à l'identité de votre marque.
Ce contexte figure déjà en grande partie dans votre design system, qu’il s’agisse des composants et des tokens que l’agent doit utiliser ou des règles documentées et des exemples illustrant leur combinaison. Le défi consiste à s’assurer que l’agent puisse y accéder dès qu’il en a besoin. Voici comment lui fournir une vue d'ensemble.
Commencez par votre source de vérité
Votre bibliothèque de designs contient les éléments constitutifs de base dont l'agent a besoin. Connecter l'agent à votre bibliothèque publiée lui fournit cette fondation. Une fois la connexion faite, l'agent est capable d’identifier les ressources approuvées par votre équipe et d’utiliser ces composants et ces tokens dans ses résultats.
Donnez à l'agent Figma l'accès à votre bibliothèque en ouvrant une conversation avec l'agent, en sélectionnant « Bibliothèques » dans la boîte de dialogue, puis en choisissant la bibliothèque publiée à partir de laquelle vous souhaitez travailler pour ce projet.
Imaginons que votre équipe travaille sur un nouveau flux de paiement. Si vous demandez à l'agent de créer une fiche récapitulative de commande, il peut utiliser les composants et variables déjà définis dans votre bibliothèque. Il pourrait utiliser votre composant existant Card/OrderSummary/Default, la variante de bouton approuvée, ainsi que vos variables d'espacement et de couleur pour assembler le design, plutôt que de créer une nouvelle carte de toutes pièces avec son propre style et sa propre structure.
Lorsque vous souhaitez que l’agent Figma modifie un élément spécifique dans une partie précise de votre produit, par exemple remplacer un bouton sur un écran, vous pouvez @-mentionner le composant ou le token que vous voulez qu'il utilise.
Plus votre bibliothèque définit clairement ses composants et leur comportement, plus elle est utile à l'agent. Il convient donc d'utiliser des noms de composants pertinents, de définir des propriétés et des variantes, d’appliquer des variables et de créer des modèles réutilisables illustrant l'assemblage des plus petits éléments. Ces détails donnent à l'agent des indications plus précises sur la fonction de chaque ressource et sur le comportement qu’elle est censée adopter.
Exprimez clairement les critères de décision de votre équipe à l'aide de directives
Que doit-on inclure dans les directives ?
→ Règles que l'agent Figma doit suivre systématiquement
→ Exceptions à ces règles
→ Erreurs à éviter et alternatives à privilégier
→ Comment choisir entre des composants, des variantes ou des modèles similaires
Une fois que l'agent dispose de votre bibliothèque, il sait quels éléments constitutifs sont disponibles. Cependant, certaines décisions ne sont pas évidentes à partir de la seule bibliothèque, par exemple lorsqu'il s'agit de savoir quand utiliser certains composants ou lorsqu’il existe des exceptions à cette utilisation. Les directives sont des fichiers d’instructions écrites associés à votre bibliothèque de designs publiée, qui constituent le support sur lequel vous consignez ce jugement. Elles sont incluses automatiquement dans tout prompt pour lequel une bibliothèque est activée, fournissant ainsi à l’agent des conseils à suivre lors de la création de nouveaux designs, sans qu’il soit nécessaire de les réitérer à chaque fois.
Les directives sont particulièrement efficaces lorsque l'agent crée des designs de toutes pièces. Nous nous efforçons d’améliorer la cohérence de leur application lors de la modification de designs existants.
Pour ajouter des directives, ouvrez votre bibliothèque de designs. Puis, accédez à Bibliothèque → Gérer les directives, téléchargez le fichier contenant vos directives, et cliquez sur Appliquer les modifications.
Par exemple, supposons que votre bibliothèque comprenne à la fois des boutons principaux et secondaires, mais que votre équipe utilise systématiquement un bouton principal pour le CTA « Passer la commande » sur une page de paiement. Vous pouvez intégrer cette règle dans une directive afin que l’agent sache lequel choisir dans cette situation. Vous pouvez également définir un bouton secondaire pour des actions telles que « Retour », afin que l’agent dispose d’une règle concrète à suivre. Ces directives restent associées à la bibliothèque, ce qui permet à votre équipe de s’y référer lors de la création de nouveaux designs avec l’agent.
Montrez à l'agent Figma votre système en pratique
En bref, voici les différents types de contexte pour l'agent Figma :
Les directives sont des règles permanentes sur la façon dont votre équipe utilise votre bibliothèque de designs. Elles restent associées à la bibliothèque et s'appliquent à tous les nouveaux projets.
Les exemples de bibliothèque montrent comment votre équipe assemble des composants et des modèles dans la pratique.
Ajouter du contexte fournit à l'agent Figma des références pertinentes pour la tâche à accomplir, comme un fichier Figma spécifique ou un frame.
Les skills capturent un processus reproductible que vous souhaitez voir suivre par l'agent Figma.
Donner à l’agent un exemple du résultat attendu peut s’avérer plus efficace que de l’expliquer à l’aide de prompts. Tout comme vous pourriez fournir à un collègue un écran de paiement existant comme point de départ, vous pouvez fournir à l’agent un design à adapter.
Exemples et _exemple sont sensibles à la casse. Pour les ensembles de composants, appliquez la nomenclature ou l’emplacement sur la page à l’ensemble parent, et non à une variante individuelle. Consultez le Material 3 Design Kit à titre de référence.
Pour ajouter un design à un prompt, cliquez sur + → Joindre des fichiers Figma et sélectionnez ou collez le design pertinent.
Pour les modèles que vous souhaitez voir l’agent réutiliser dans des projets futurs, publiez les designs complets en tant que composants sur une page Examples, ou ajoutez _example à la fin de leur nom. Si l’exemple est spécifique au projet que vous effectuez actuellement mais ne constitue pas nécessairement un modèle que vous réutiliserez, ajoutez-le en tant que contexte au prompt actuel. Vous pouvez également coller un frame ou une image directement dans le chat, ou demander à l’agent de transformer une capture d’écran en design modifiable.
Vous pourriez, par exemple, ajouter un formulaire d'adresse de livraison au flux de paiement. Votre bibliothèque fournit les champs du formulaire et les cases à cocher. Mais ces composants à eux seuls ne permettent pas de comprendre comment votre équipe organise les formulaires d’adresse de livraison, par exemple quels champs partagent une même ligne ou comment les champs facultatifs, tels que les numéros d’appartement, sont présentés. Un exemple tiré d’un design précédent peut montrer comment votre équipe regroupe les champs et gère l’espacement. L'agent dispose ainsi d'un point de départ qu'il peut adapter à cette expérience de paiement.
Transformez les instructions récurrentes en skills
Pour créer un skill, expliquez à l'agent Figma la fonction que vous attendez du skill et indiquez-lui les étapes ou les instructions à suivre. Vous pouvez ensuite prévisualiser et modifier le skill, y compris directement dans l'éditeur Markdown.
Vous pouvez également utiliser des skills de la communauté Figma ou partager les vôtres pour que les autres puissent les utiliser.
Nous sommes presque tous amenés à répéter sans cesse les mêmes processus, qu'il s'agisse de vérifier la conformité des interfaces aux normes d'accessibilité ou d'effectuer des contrôles fréquents pour s'assurer de bien utiliser les composants les plus récents. Désormais, au lieu de réécrire les mêmes instructions à chaque fois, vous pouvez transformer ce processus en un skill que l'agent peut réutiliser. Les skills sont des ensembles d’instructions que vous communiquez une seule fois à l’agent et que vous pouvez déclencher dans n’importe quel chat à l’aide d’une barre oblique (/). Plutôt que de réécrire le même prompt ou de suivre le même processus à chaque fois, vous pouvez publier un skill que votre équipe ou votre organisation pourra utiliser.
Par exemple, un skill /design-system-audit pourrait comparer les écrans sélectionnés à vos bibliothèques et signaler les instances détachées, les valeurs codées en dur, les composants mal utilisés et les lacunes en matière d'accessibilité. Un skill /analyze-components pourrait vérifier vos composants afin de détecter les doublons, les erreurs de nommage et les composants qui ont perdu leur connexion à la bibliothèque. Les deux peuvent signaler des problèmes potentiels et recommander une marche à suivre, que votre équipe peut demander à l’agent de mettre en œuvre ou gérer elle-même.
Tirez des enseignements des résultats fournis par l’agent Figma
Demandez à l'agent Figma de corriger une erreur sur le canvas en lui indiquant ce qu'il faut changer dans un prompt ou @-mentionner le composant ou le token exact que vous souhaitez qu'il utilise.
Comme chaque fois que vous travaillez avec l'IA, il est toujours important de vérifier à nouveau le résultat. Lorsque vous examinez son travail, si vous repérez un problème, vous pouvez utiliser l'agent pour corriger ces erreurs immédiatement, directement sur le canvas. Si vous remarquez qu'il fait constamment la même erreur, c'est un signe que vous pourriez avoir besoin de revoir vos directives, de revoir votre bibliothèque de design ou de lui donner de meilleurs exemples à suivre.
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.
En savoir plus sur l'agent Figma dans notre centre d'aide.
