Présentation de notre serveur MCP : Intégrer Figma à votre workflow

Jusqu'à récemment, la seule manière de fournir du contexte de design à des outils d'IA était de transmettre l'image d'un design ou une réponse d'API à un chatbot. Avec l'arrivée du Model Context Protocol (MCP), une norme qui définit la manière dont les applications fournissent du contexte aux LLM, la donne a changé. Nous avons entrepris d'appliquer cette norme au serveur MCP de Figma, afin de permettre aux développeurs d'introduire le contexte de Figma au sein des outils de codage agentique tels que Copilot dans VS Code, Cursor, Windsurf et Claude Code. Qu'il s'agisse de créer de nouveaux composants atomiques avec les variables et les styles appropriés ou de développer des flux d'applications multicouches, nous pensons que ce serveur rendra votre workflow du design au code plus efficace et plus précis.

Cette version bêta n'est qu'un début. Dans les mois à venir, nous allons publier une série de mises à jour, notamment des capacités de serveur distant et des intégrations de base de code approfondies. Grâce à vos commentaires, nous continuerons d'améliorer et d'étendre notre offre. Vous pouvez nous faire part de vos retours directement via ce formulaire. De nombreuses évolutions restent à venir, mais prenons d'abord le temps de revenir sur le parcours qui nous a menés à cette première version.

Le contexte avant tout

Aujourd'hui, les LLM peuvent créer du code exploitable. En revanche, si vous demandez à un outil de rédiger du code sans autre contexte que ses données d'entraînement, sa production, même si elle est utilisable, ne correspondra probablement pas aux modèles présents dans le reste de votre base de code. En effet, chaque équipe aborde sa base de code différemment, avec une structure, un framework, un vocabulaire et un workflow différents, et prend des décisions qui font évoluer sa base de code en fonction de ses besoins spécifiques. Toutes ces différences produisent une empreinte unique, difficile à déduire pour les LLM.

La reconnaissance et la compréhension de ces modèles nécessitent un contexte supplémentaire, et c'est là que les outils de codage agentique interviennent. Ils déduisent le contexte en lisant le code existant, en examinant l'historique des répertoires, en accédant à la documentation et en comprenant les schémas des bases de données. Ensuite, ils les transfèrent aux LLM afin qu'ils puissent générer un code précis, informé et conforme à vos systèmes existants dans votre environnement de développement. Les serveurs MCP tels que le serveur MCP de Figma complètent cette fonctionnalité en ajoutant des informations contextuelles provenant d'outils comme Figma à ce workflow. Ainsi, votre code correspond à l'empreinte de votre base de code, ainsi qu'à celle de votre design.

Le contexte de design est essentiel pour passer du design au code. Pour saisir l'intention du design, nous devons prendre en compte une série d'informations qui peuvent se montrer précieuses en fonction de ce que nous demandons à un LLM de réaliser. Il est important d'obtenir des informations correctes, car le passage du design au code ne consiste pas qu'en une inspection détaillée.

Comment nous traduisons l'intention du design pour les LLM

Lorsqu'un développeur ouvre un fichier Figma, il commence sans doute par dézoomer complètement pour avoir une vue d'ensemble de l'ordre et de la structure. Ensuite, il peut traiter une séquence d'écrans ou une logique déduite, en réfléchissant à comment structurer la fonctionnalité sur différents fichiers de code. Il procède à des audits au fur et à mesure qu'il développe, en s'assurant que les modèles soient corrects, en interprétant le contenu de substitution comme quelque chose de réel qu'il doit aller chercher dans le backend. Tout au long du processus de mise en œuvre d'un design, il génère différents types de code et travaille à plusieurs niveaux, des détails techniques aux modèles de niveau supérieur. Pour garantir que l'intention de design se traduit bien dans le code, les LLM ont également besoin de cette vue d'ensemble.

Le serveur MCP de Figma dépeint cette image aux LLM de différentes façons, et complète les données visuelles avec des informations plus nuancées sur l'intention de design, tout en s'inspirant de modèles et de systèmes existants. Les différentes tâches peuvent nécessiter diverses combinaisons de ces points de contexte et, souvent, celui que nous excluons est tout aussi important que celui que nous incluons. C'est pourquoi les serveurs MCP comme le nôtre mettent en avant des outils qui représentent des types de contextes spécifiques pour les LLM. Notre serveur vous permet également de configurer des paramètres afin de contrôler les productions de ces outils. Voici dans quels types de cas envisager d'inclure ou d'exclure ces points de contexte, en fonction de votre configuration et de vos priorités.

Métadonnées d'un modèle

Si vous avez déjà investi dans un design system et que vous utilisez des modèles tels que des composants, des variables et des styles dont le design et le code sont en cohérence, le serveur MCP de Figma agira comme un multiplicateur. Nous voulons nous assurer que le LLM puisse également bénéficier de ces modèles. Localiser les bons modèles peut prendre beaucoup de temps aux techniques de recherche agentique, en particulier quand les bases de code sont étendues. Elles peuvent également trouver des modèles valides qui s'écartent de ceux référencés dans un design. En fournissant des références à des variables, composants et styles spécifiques, le serveur MCP de Figma peut rendre le code généré plus précis et plus efficace, tout en réduisant le nombre de tokens LLM utilisés.

Supposons que vous ayez créé une grande cohérence entre le design et le code. Si vous ne fournissez que la capture d'écran d'une instance de composant, l'outil d'IA passera beaucoup de temps à rechercher dans la base de code, comme par exemple les bibliothèques d'icônes et de composants, pour identifier celui à utiliser. S'il ne trouve pas de correspondance, il créera un nouveau composant à partir de la capture d'écran. En revanche, si Figma sait quels composants vous utilisez, il peut partager le chemin exact vers le fichier de code dont l'agent a besoin avec Code Connect.

De même, si vous prenez une capture d'écran d'un rectangle rouge et demandez à votre outil agentique d'utiliser des tokens, il est possible qu'il existe de nombreux tokens différents avec la même valeur rouge. Figma sait quel token spécifique est utilisé et peut fournir le nom de cette variable au LLM via MCP. Mieux encore, si vous avez fourni la syntaxe du code à Figma pour cette variable, le serveur MCP de Figma peut fournir ce code exact au LLM.

Captures d'écran

Les équipes créent toutes sortes de designs complexes et captivants, c'est pourquoi il est souvent utile de prendre du recul et de réfléchir à la vue d'ensemble d'un design avant de se plonger dans les détails. Par exemple, lorsque vous essayez de comprendre le contexte global, notamment la séquence d'écrans, les sections ou le contexte responsive mobile et desktop, une capture d'écran de haut niveau peut fournir au LLM des informations sur la relation entre les sections et les nœuds, mais aussi rendre compte du flux global comme les détails stylistiques ne peuvent le faire.

Si ce type d'informations visuelles est intéressant, c'est moins pour les spécifications qu'il fournit au LLM afin de reproduire fidèlement le modèle, que pour ce qu'il nous apprend sur l'intention de design. Un bon code est en cohérence avec l'intention de design, et pas seulement avec les pixels. Nous considérons les captures d'écran comme des informations complémentaires à la réponse du code : une capture d'écran combinée aux sorties de code de Figma donne de meilleurs résultats que l'une ou l'autre, séparément.

Interactivité

Les exemples de code peuvent décrire un comportement de design déjà défini dans Figma ou déjà connecté à la base de code. Le pseudo-code, que vous pouvez considérer comme un prototype de code, s'avère souvent un excellent moyen de donner à un LLM un contexte plus utile qu'une simple description des propriétés, en particulier si le pseudo-code est également informé par la base de code, avec des fonctionnalités telles que la syntaxe de code pour les variables et Code Connect pour les composants.

Cet exemple de code peut s'avérer utile dans certains cas, par exemple lorsque vous cherchez à décrire une fonctionnalité entièrement encapsulée. Une pseudo-représentation d'un composant à état est utile à un LLM, à l'inverse d'une arborescence de métadonnées Figma. Il est également utile de représenter une séquence d'UI, plutôt que d'inspecter indépendamment chaque élément comme des métadonnées, afin de se concentrer sur leurs différences.

Contenu

Nous voulons également nous assurer que nous tirons le meilleur parti des possibilités qu'offre un design réalisé dans Figma. Même le contenu de substitution dans Figma peut être représentatif du contexte de design et fournir des informations aux LLM. Du texte, des SVG, des images, des noms de calque et des annotations peuvent aider les LLM à déterminer comment remplir l'interface avec le modèle de données côté code.

Génération de code basée sur le design

De nombreux développeurs utilisent déjà l'IA pour travailler plus efficacement dans leurs environnements de développement, et nous allons accélérer ces workflows tout en garantissant la cohérence et la haute fidélité des résultats. Aujourd'hui, trois outils du serveur MCP vous permettent d'obtenir du contexte auprès de Figma pour la sélection en cours ou un identifiant de nœud spécifique : un pour le code, un autre pour les images et un troisième pour les définitions de variables. Vous pouvez modifier le type de réponse renvoyée par l'outil de codage dans les paramètres de votre serveur, ce qui permet un réglage précis et adapté à la tâche à accomplir. Vous pouvez activer la représentation plus interactive du code avec React et Tailwind. D'autres options arriveront prochainement. Code Connect garantit que le code généré s'aligne sur votre base de code, ce qui vous permet de voir les correspondances entre les composants. Toute syntaxe de code que vous ajoutez pour vos variables sera également affichée.

Nous lançons le serveur MCP de Figma en version bêta, et nous attendons vos retours sur ses capacités pour développer nos prochaines mises à jour. Suite aux résultats des premiers tests, nous apportons déjà plusieurs améliorations : nous rendons l'expérience MCP accessible sans passer par l'application de bureau Figma, afin que les équipes puissent intégrer les nouvelles recrues et collaborer plus facilement où qu'elles soient. Nous travaillons également au développement d'une intégration plus approfondie de la base de code et d'une expérience Code Connect simplifiée, avec une configuration plus intuitive. Les versions futures exploreront les fonctionnalités prenant en charge les annotations, la grille et bien plus encore.

Il ne s'agit que d'un premier pas vers un passage du design au code amélioré, avec un handoff plus rapide, des résultats plus intelligents et des workflows plus efficaces. Vous pouvez accéder au serveur MCP de Figma avec une licence Dev ou Full. Attendez-vous à d'autres mises à jour, car nous continuons à développer cette technologie. Nous sommes impatients de connaître votre avis.