5 conseils pour utiliser le serveur MCP Dev Mode de Figma

Souvenez-vous de votre premier jour à un nouvel emploi. Il s'est probablement déroulé selon un schéma familier : vous avez rencontré de nouveaux collègues, reçu des documents d'intégration et commencé à réfléchir à la meilleure façon d'aborder le travail à accomplir. Imaginez maintenant faire cela sans aucune structure ni aucun contexte – un simple afflux de nouveaux outils et d'informations sans carte pour utiliser Make et en comprendre le sens.

C'est plus ou moins ce que nous attendons des agents IA lorsqu'ils reçoivent des données de design brutes et non structurées. Le serveur MCP Dev Mode de Figma apporte le contexte des fichiers de design aux agents IA pour permettre un workflow design vers code plus efficace et précis. Et tout comme une expérience d'intégration efficace repose sur une documentation organisée et des attentes claires, nous pouvons prendre des mesures pour améliorer la qualité de l'entrée – et ainsi, en fin de compte, améliorer la qualité de la sortie. Ici, nous partageons cinq conseils pratiques pour aider les agents IA que vous utilisez à générer un code cohérent et plus aligné sur les besoins réels de votre équipe.

1. Commencez par une structure de design solide

Les mondes du design et du code ont chacun leur propre définition de la structure. En design, la structure fait référence à une vision plus holistique : le placement de chaque élément, comment les éléments se rassemblent dans une mise en page et l'expérience globale qu'ils offrent. En code, la structure s'applique à des règles spécifiques, à la composition et à la syntaxe à suivre pour que le code compile et fonctionne efficacement. Il n'y a pas d'approche « correcte » de la structure, mais il est important de reconnaître ces différences et de combler le fossé autant que possible.

Méthodes d'alignement du design et du code

Voici quelques réflexions sur le moyen de structurer des designs pour qu'ils se traduisent plus facilement en code :

• Adoptez une approche de l'extérieur vers l'intérieur : quelle est la section la plus externe d'un élément ? Est-ce une carte ? Est-ce une section d'une page web ? Quoi qu'il en soit, commencez par l'extérieur et imbriquez des éléments supplémentaires au sein de ce calque supérieur.
• Nommer vos calques : que représente le design ? De quoi est-il composé ? Par exemple, dans un champ de formulaire, étiqueter des éléments comme les champs de saisie, les boutons et les liens produit de meilleurs résultats.
• Utilisez des composants : les composants ne vous aideront pas seulement à convertir le design en code, mais aussi à créer des motifs répétables pour les designs futurs.

Scénario de deux champs de formulaire

Voyons un exemple de ces principes en pratique. Cet exemple porte sur deux champs de formulaire :

À première vue, ces formulaires se ressemblent beaucoup. Ils sont organisés de la même manière, contiennent les mêmes éléments et, dans l'ensemble, transmettent la même chose. Bien qu'ils soient tous deux « correctement » structurés d'un point de vue design, l'un est optimisé pour le code et l'autre ne l'est pas. Penchons-nous sur la structure des calques :

À gauche figure une structure claire et des noms distincts pour les calques de composants. À droite, les éléments sont regroupés dans un seul calque. Être précis lorsqu'il s'agit de nommer et de structurer des calques peut ne pas avoir d'impact visuel sur le design, mais le fait de l'être permettra à un agent IA de générer beaucoup plus facilement du code pertinent et de haute qualité dans le cas du design de gauche.

Dans le cas du design de droite, un agent IA est susceptible d'interpréter le tout comme un élément div unique et d'essayer d'ajouter tous les éléments contenus dans ce conteneur unique. Cela entraînera probablement des problèmes d'espacement et de mise en page et un développeur devra revenir en arrière et apporter des corrections manuelles.

2. Accordez-vous sur un langage de variables partagé

Dans notre guide récent sur le transfert du designer au développeur, nous avons parlé de l'importance d'aboutir à un alignement grâce à un langage commun aux équipes. À bien des égards, vous pouvez considérer le serveur MCP Dev Mode comme un outil de transfert entre les designers et les agents IA. Tout comme le transfert du designer au développeur, ce transfert aux agents IA dépend de la création d'un langage partagé pour des éléments comme les styles et les variables. De cette façon, vous pouvez vous assurer que les agents IA s'alignent sur les modèles de design établis par votre organisation.

Traduire les variables en code

Une excellente façon d'optimiser vos sorties de serveur MCP est de configurer la syntaxe de code dans les variables. Lorsque vous utilisez des variables avec syntaxe de code dans un design, la valeur de la variable et cette syntaxe sont envoyées à l'agent IA dans le cadre de la sortie de code. Voici comment aider les agents IA à mieux comprendre le contexte du design et à obtenir des sorties plus cohérentes :

• Appliquer les conventions de dénomination : assurez-vous que les nouvelles variables correspondent aux variables de votre design system existant.
• Communiquer la syntaxe : certains cadres nécessitant une syntaxe différente pour utiliser des variables dans le code, assurez-vous que les agents connaissent la bonne façon de les structurer.
• Créer une réactivité : évitez les dimensions codées en dur dans la génération de code par IA. Indiquez aux agents comment les composants doivent être structurés pour s'aligner sur les points d'arrêt appropriés.

Appliquer les changements de variables à grande échelle

En règle générale, essayez d'éviter de coder les valeurs en dur, car cela génère une surface qui peut être difficile à gérer. Par exemple, si vous décidez d'actualiser votre marque plus tard, y compris votre palette de couleurs et le style de police, vous pourriez vous retrouver à devoir mettre à jour un certain nombre de surfaces web. Avec les variables, ces changements sont plus simples : il suffit de mettre à jour vos feuilles de style, et ces nouvelles valeurs sont appliquées partout où la variable est utilisée. Avec la capacité de l'IA à générer d'énormes quantités de code, appliquer ce niveau de cohérence est crucial.

Imposer votre nouveau langage commun

Mais même au-delà de la génération, qu'en est-il de l'audit ? Vous pouvez également utiliser le serveur MCP Dev Mode pour identifier à quel moment survient un désalignement entre vos variables de design et votre base de code. Le serveur propose un outil appelé get_variable_defs, que vous pouvez utiliser pour vérifier les variables dans une sélection donnée par rapport à la feuille de style de votre base de code et faire respecter une utilisation cohérente des motifs.

3. Communiquer l'intention de design avec des annotations

Les designs sont souvent une représentation visuelle statique d'un élément plus dynamique. Au-delà de ce que vous voyez dans le design visuel, il existe aussi des états invisibles (logique d'état, réactivité, directives d'accessibilité) que vous devez prendre en compte lors de la traduction en code. Bien qu'un collaborateur puisse discerner la logique d'état à partir de votre design, les LLM ne fonctionnent pas de cette manière : ils voient les données brutes que vous fournissez via le serveur MCP et les utilisent pour accomplir la tâche donnée par l'invite. Une façon dont les utilisateurs peuvent aborder ceci consiste à créer des invites de plus en plus complexes. Mais ce qui est intéressant à noter est que les LLM ont tendance à mieux fonctionner lorsque les invites contiennent des énoncés plus concis et spécifiques.

Annotations en tant qu'info-bulles pour les LLM

Les annotations sont essentielles pour fournir un contexte aux agents IA, car elles vous permettent de communiquer l'intention qui n'est pas immédiatement visible dans un design. Les données d'annotation, y compris les catégories, sont incluses dans les réponses du serveur MCP Dev Mode. Voici quelques exemples d'annotations permettant de guider la création de code :

• Signalez les animations et les effets de survol : vous pouvez spécifier un effet de zoom pour les lignes de tableau ou indiquer que le fond passe au noir 200 au survol.
• Communiquez les changements d'état : indiquez que les boutons de navigation doivent être désactivés si un utilisateur se trouve sur la page correspondant à la valeur du bouton.
• Fournissez des instructions pour les sources de contenu : fournissez des instructions de contenu pour une section donnée en indiquant qu'elle est dynamiquement extraite d'un CMS et doit utiliser la pagination après certaines tailles.

Un scénario gagnant-gagnant pour les designers et les outils

Au-delà de la communication de l'intention aux agents IA, utiliser les annotations de cette manière peut en réalité faire gagner du temps aux designers. Prenons l'exemple du bouton de navigation ci-dessus. En fonction du nombre d'options que votre panneau de navigation comporte, vous devrez peut-être créer un design pour chaque état spécifique. En utilisant des annotations, vous pouvez demander à l'agent de créer ces états pour vous dans le contexte du design.

4. Créez des garde-fous avec des règles

Bien que les annotations soient excellentes pour communiquer l'intention de design et exprimer la fonctionnalité désirée, elles sont moins pertinentes pour communiquer des aspects tels que le fonctionnement des mises en page dans le code réel ou la configuration des structures de données backend. C'est ici que les règles entrent en jeu. Si les annotations sont comme des infobulles, fournissant des instructions qui peuvent varier d'une frame à l'autre ou d'une itération à l'autre, les règles sont comme des manuels qui créent un cadre d'interprétation des données et d'exécution des tâches. Pour déterminer ce qui doit être une règle ou simplement une instruction dans l'invite, demandez-vous : « Est-ce que l'agent doit effectuer exactement cette action chaque fois que je crée ce type de demande ? »

Comment structurer vos règles

Les règles destinées à des outils d'édition tels que Cursor, Windsurf et VS Code (appelées instructions Copilot) sont assez simples à créer. Vous écrivez un fichier en markdown simple, le sauvegardez dans un répertoire spécifié, puis définissez comment la règle est appelée, manuellement ou automatiquement. Certains des aspects que vous pouvez spécifier dans ces fichiers de règles sont les suivants :

• Utilisation des composants existants : indiquez aux agents où chercher le code existant et évitez les duplications.
• Éléments de base de mise en page préférés et conseils de style : ayant déjà pris des mesures pour assurer des designs réactifs, assurez-vous que ces mesures sont suivies.
• Sources de données à intégrer : communiquer des structures de données au sein de la base de code est plus facile que d'essayer d'utiliser des invites seules.
• Organisation des fichiers et schémas de dénomination : lorsqu'un nouveau code est écrit, assurez-vous qu'il respecte votre structure de répertoire existante.

5. N'ayez pas peur d'itérer

Si les agents IA sont comme un nouvel ingénieur dans votre équipe, il est important de réfléchir à la manière dont les ingénieurs travaillent en pratique. Un agent IA ne résoudra probablement pas un problème en une seule tentative ; les invites ne sont souvent que le début d'une conversation. Souvent, la première invite donnera de bons résultats, mais vous devrez probablement apporter des ajustements et présenter une nouvelle invite à l'agent pour corriger certains problèmes. Ce n'est pas une mauvaise chose ! Vous pouvez lui faire réexécuter des outils pour vous assurer qu'il voit les bonnes informations ou ajuster votre invite pour changer l'approche de création. L'utilisation du serveur MCP Dev Mode est bénéfique en cela que, à mesure que vous continuez à présenter des invites et à optimiser, votre agent IA disposera du contexte de design pour générer une sortie pertinente. Et grâce à ce contexte, vous atteindrez vos critères de succès avec moins d'appels à l'agent.

Souvenez-vous que l'environnement de l'IA évolue

Les avancées en matière d'IA évoluent à un rythme incroyable. Et bien que ce rythme de changement rapide soit captivant, il est important de se rappeler que ce qui existe aujourd'hui pourrait ressembler à autre chose demain. Dans la période bêta, nous avons déjà introduit un certain nombre d'améliorations et de nouvelles fonctionnalités grâce au feedback excellent des utilisateurs et à l'évolution des spécifications. Il est important de rester flexible à mesure que les choses évoluent, pour parvenir à une génération de code encore meilleure et mieux informée par le design.