Comment simplifier la gestion du design system avec l'agent Figma

Tout design system repose sur des tâches de maintenance indispensables, mais que l'on a tendance à remettre à plus tard, comme l'harmonisation de la nomenclature, la vérification de l'utilisation des tokens, la mise à jour des documents obsolètes et l'identification des divergences entre votre produit et la bibliothèque. Les équipes évoluant plus rapidement que jamais, il est difficile de repérer les cas où les designs ne correspondent plus au système. La qualité du résultat fourni par un agent dépend entièrement du contexte qui lui est fourni, et une grande partie de ce contexte réside dans votre design system.

Désormais, l'agent Figma peut assurer la maintenance de votre design system à votre place, et même appliquer automatiquement les règles et conventions de votre système lors de la création de nouveaux éléments, afin que vous puissiez consacrer votre temps aux décisions qui façonnent votre système, plutôt qu’à sa gestion. Voici dans quelles circonstances et par quels moyens vous pouvez mettre notre agent à contribution.

Utilisation de l'agent pour automatiser la documentation

La documentation du design system dans le développement de produit s'adresse à différents publics : depuis les designers qui cherchent à sélectionner le bon composant jusqu'aux développeurs qui recherchent les éléments nécessaires au transfert. Fondamentalement, cette documentation précise comment le système est censé être utilisé, ce qui permet aux équipes de l'appliquer de manière cohérente et de maintenir un niveau de qualité élevé. L'agent peut vous aider à créer cette documentation et à la mettre à jour en fonction de l'évolution de votre design system.

Documentation du fonctionnement des composants

La documentation est l'une des choses les plus faciles à négliger. Une fois que vous avez défini le fonctionnement d'un composant, l'agent peut vous aider à rédiger un brouillon de documentation décrivant son mode d'utilisation et son comportement.

Demandez à l'agent de :

• Préciser ce qu’il faut faire et ne pas faire lors de l’utilisation d’un composant
• Présenter des exemples visuels illustrant les différentes variantes, propriétés et configurations
• Recommander des API de composants pour faciliter le transfert, par exemple en intégrant les valeurs booléennes aux énumérations, en supprimant les états de survol superflus ou en mettant en avant les propriétés enfant cachées

Par exemple, Ian Guisard, Product Designer chez Uber, utilise l'agent et un ensemble de skills qu'il a développé pour documenter les composants utilisés sur les sept plateformes d'Uber. Au lieu de rédiger manuellement les spécifications de chaque composant, les designers peuvent exécuter la commande /create-api pour obtenir une description du fonctionnement d'un composant qui soit claire, structurée et utile, ainsi que la commande /create-color pour créer une spécification de couleur indiquant les tokens de design qu'utilise chaque partie selon les variantes et les états.

Les développeurs obtiennent ainsi les détails nécessaires sans avoir à les rechercher dans le fichier Figma ni à revenir vers les designers pour demander des clarifications. L’automatisation d’une partie du travail de documentation permet à l’équipe de se concentrer sur l’amélioration du système plutôt que de consacrer un temps précieux à la mise à jour manuelle de chaque spécification.

Maintien de la cohérence du produit créé par rapport au design system

Avec l’accélération du développement du produit, il devient plus difficile de repérer les incohérences entre les designs et le système. L’agent peut aider à identifier ces divergences et à mettre à jour les designs afin d’utiliser les composants et les tokens actuels avant que les incohérences ne se propagent.

Vérification de la conformité des designs

Vérifier les designs par rapport à votre design system peut s’avérer chronophage. Un écran peut à lui seul utiliser des composants et des tokens provenant de plusieurs bibliothèques, ce qui vous oblige à retracer la provenance de chacun d’entre eux. L'agent peut vous aider à identifier ces instances et vous épargner ainsi une vérification manuelle.

Demandez à l'agent de :

• Créer un inventaire des composants et des tokens utilisés dans un écran
• Relier ces composants et tokens avec leurs bibliothèques respectives

Par exemple, imaginons que sur l'écran de paiement qu'il élabore, un designer crée de toutes pièces un bouton « Enregistrer pour plus tard » au lieu d'utiliser le composant de bouton existant du design system. L'agent peut vérifier cet écran par rapport à la bibliothèque de designs, signaler que le bouton fait double emploi avec le composant existant Button/Secondary du système et indiquer s'il utilise une valeur de couleur ou d'espacement codée en dur au lieu du token actuel. Le designer a ainsi la possibilité de remplacer ces éléments par le composant de production et le token avant de poursuivre le design.

Correspondance avec le design system

Tant les écrans de produit existants que les designs générés par l'IA peuvent présenter des incohérences avec les composants et les tokens du produit. La mise à jour de ces éléments pour qu'ils correspondent à votre design system peut nécessiter de remplacer manuellement certaines parties. L'agent peut vous y aider.

Demandez à l'agent de :

• Remplacer en masse un composant ou un token spécifique dans un design en le mentionnant précédé du symbole @ dans votre prompt
• Trouver et remplacer des composants d'une bibliothèque spécifique, puis passez en revue les modifications

Paavan Buddhdev, Product Designer chez Granola, l'application de prise de notes IA, utilise l'extension Figma Chrome pour intégrer un écran existant de l'application Granola dans Figma. Ce faisant, les boutons et d'autres éléments se déconnectent du design system de Granola. Au lieu de remplacer chaque élément manuellement, il peut sélectionner un bouton importé et demander à l'agent de le remplacer par le bouton correspondant du design system.

Contexte à donner à l'agent pour utiliser votre système comme prévu

Une fois que le travail existant a été réintégré dans le système, la question suivante est de savoir comment conserver les nouveaux travaux sur le système lors de leur création. Vous pouvez ajouter des directives à une bibliothèque publiée pour capturer l'intention, les règles et les motifs qui sous-tendent votre design system pour que l'agent puisse les utiliser. Ce contexte étant automatiquement inclus lorsque la bibliothèque est rattachée, les designers n'ont pas besoin de répéter les mêmes instructions dans chaque prompt.

Confier le nettoyage à l'agent

Les petites incohérences dans un design system s'accumulent rapidement, sont fastidieuses à corriger manuellement et peuvent éroder la confiance dans le système, ce qui incite les développeurs à contourner le système plutôt qu'à l'utiliser. L'agent peut prendre en charge une partie de cette maintenance, qu'il s'agisse d'appliquer des changements de nom dans l'ensemble d'une bibliothèque ou de vérifier si les composants utilisent bien les tokens appropriés.

Standardisation de la nomenclature dans votre système

Il est facile de renommer un composant. En revanche, nettoyer une bibliothèque entière où le même état est appelé hover, hovered et mouse-over est une tout autre affaire. Vous pouvez également avoir des ressources dotées d'un nom générique qui n'indique pas clairement leur utilité. L'agent peut vous aider à repérer ces incohérences et à appliquer vos décisions de nommage dans tout le système.

Demandez à l'agent de :

• Dresser l'inventaire des noms actuellement utilisés dans votre système
• Identifier les divergences de noms, comme small et sm, puis harmonisez-les selon une convention unique, par exemple small
• Appliquer une décision de nommage que vous avez déjà prise à l'ensemble de la bibliothèque en une seule fois
• Remplacer les noms de ressources génériques, tels que icon_1 ou icon_2 par des noms descriptifs comme linkedin_icon ou tiktok_icon
• Consigner les éléments qui ont été renommés pour que ces changements puissent être intégrés dans le code

Vérification de l'usage des tokens de design dans les composants

Avec l'expansion d'une bibliothèque, il devient de plus en plus difficile de savoir si chaque composant utilise toujours les bons tokens. L'agent peut examiner les valeurs d'un composant et vérifier si elles sont associées à des tokens de design, ce qui facilite l'identification des anomalies.

Demandez à l'agent de :

• Vérifier l'adoption des tokens dans les composants
• Créer des annotations qui indiquent les tokens utilisés par un composant

Par exemple, il peut identifier l'endroit où un composant de bouton utilise 8 px pour l'espacement des icônes au lieu du token d'espacement partagé utilisé par le reste de la bibliothèque. Si votre équipe souhaite exécuter régulièrement cette même vérification, vous pouvez utiliser un skill pour regrouper ces étapes au sein d'un workflow reproductible.

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.