Avant de commencer
Qui peut utiliser cette fonctionnalité
Le serveur distant est disponible avec toutes les licences et tous les forfaits.
Le serveur de bureau est disponible avec une licence Dev ou Full pour tous les forfaits payants.
Vous devez utiliser un éditeur de code ou une application qui prend en charge les serveurs MCP (VS Code, Cursor, Windsurf, Claude Code). Consultez notre catalogue MCP pour obtenir la liste complète des clients pris en charge.
Le serveur MCP de Figma aide les développeurs à explorer et à mettre en œuvre des designs rapidement et avec précision :
- Obtenez le contexte et le code de design de vos fichiers Figma Design, FigJam et fichiers Make
- Capturez votre UI en direct sous forme de calques de design, en intégrant les interfaces rendues par votre code dans les fichiers Figma Design
- Améliorez votre utilisation des composants de design et de Code Connect
Remarque : Ce guide offre un aperçu général de ce que le serveur MCP de Figma propose. Pour obtenir des instructions spécifiques sur l'utilisation du serveur et des exemples de prompts, voir :
- Installation à distance du serveur MCP de Figma (de préférence)
- Installation du serveur MCP de Figma pour bureau
- Outils et prompts
Des articles supplémentaires et détaillés sont disponibles dans la documentation des développeurs Figma.
Parce que les outils du serveur MCP de Figma apportent à votre workflow un contexte supplémentaire de Figma, votre code correspond non seulement à vos systèmes existants, mais aussi à votre design.
Les serveurs MCP font partie d'une interface normalisée permettant aux agents d'IA d'interagir avec les sources de données à l'aide du protocole MCP (Model Context Protocol).
Remarque : Cette page offre un aperçu général du serveur MCP de Figma. Pour obtenir des instructions détaillées et des exemples de code, consultez la documentation pour développeurs du serveur MCP de Figma.
Lorsque le serveur est activé, vous pouvez :
-
Générer des designs à partir de l'UI en direct de vos applications et sites web
Transformez l'UI en direct de votre navigateur (production, préproduction ou localhost) en calques de design modifiables dans Figma. Envoyez à Figma Design des pages, des éléments ou des flux entiers à explorer, à aligner et à optimiser.
Remarque : Cette fonctionnalité nécessite le serveur MCP distant de Figma et n'est actuellement prise en charge que pour Claude Code, Codex par OpenAI et VS Code.
Cette fonctionnalité est continuellement améliorée. Si vous rencontrez des problèmes, vous pouvez les signaler à l'aide de Fig, notre chatbot de support ou en envoyant un e-mail au support (forfaits payants).
En savoir plus sur la génération de designs à partir de vos interfaces
-
Générer du code à partir des frames sélectionnées
Sélectionnez une frame Figma et transformez-la en code. Idéal pour les équipes produit qui conçoivent de nouveaux flux ou itèrent sur des fonctionnalités d'application.
-
Extraire le contexte de design
Insérez des variables, des composants et des données de mise en page directement dans votre IDE. Ceci est particulièrement utile pour les design systems et les workflows basés sur des composants.
-
Récupérer des ressources FigJam
Accédez au contenu de vos diagrammes FigJam et utilisez-le dans votre workflow de génération de code. Intégrez directement vos idées de départ, vos flux ou vos cartes d'architecture dans le développement.
-
Récupérer des ressources Make
Regroupez des ressources de code à partir de fichiers Make et fournissez-les à l'IA comme contexte. Elles pourront vous aider à passer du prototype à l'application de production.
-
Maintenez vos composants de design system cohérents par rapport à Code Connect
Améliorez la qualité de votre production en réutilisant vos composants actuels. Code Connect assure la cohérence entre le code généré et votre base de code.
Configurer le serveur MCP
Vous pouvez connecter le serveur MCP de Figma de deux manières :
-
Serveur MCP distant : se connecte directement à l'extrémité hébergée de Figma sur
https://mcp.figma.com/mcpDécouvrez comment installer le serveur MCP distant. - Serveur MCP pour bureau : fonctionne localement via l'application de bureau Figma. Découvrez comment installer le serveur MCP pour bureau.
Connecter le serveur MCP à votre éditeur
Suivez les instructions de votre éditeur spécifique pour vous connecter au serveur MCP de Figma, que ce soit localement ou à distance. Certains clients prennent également en charge l'application Skills, qui ajoute des instructions d'agent pour aider les outils d'IA à utiliser plus efficacement les designs Figma :
| Client | Support du serveur de bureau | Support du serveur distant | Prise en charge Skills |
| Amazon Q | ✓ | ||
| Android Studio | ✓ | ✓ | |
| Claude Code | ✓ | ✓ | |
| Codex par OpenAI | ✓ | ✓ | |
| Cursor | ✓ | ✓ | |
| Gemini CLI | ✓ | ✓ |
|
| Kiro | ✓ | ✓ | |
| Openhands | ✓ |
|
|
| Replit | ✓ |
|
|
| VS Code | ✓ | ✓ |
|
| Warp | ✓ | ✓ |
|
À propos de Skills
Skills fournit des conseils sur la façon dont un agent doit accomplir des tâches spécifiques, en combinant des appels d'outils MCP à des instructions détaillées.
Alors que le serveur MCP de Figma expose des outils spécifiques, Skills aide les agents à comprendre quels outils utiliser, comment les séquencer et comment appliquer les résultats lorsqu'ils utilisent des designs Figma.
Skills peut guider les agents à travers des workflows tels que les suivants :
- Connecter des composants de Figma Design aux composants de code en utilisant Code Connect
- Générer des règles de design system alignées sur votre base de code
- Traduire des designs en code prêt pour la production
Skills ne remplace pas les connexions MCP et n'ajoute pas de nouvelles fonctionnalités MCP. Il limite les tâches de configuration et les tâtonnements en plaçant les workflows recommandés dans des instructions réutilisables.
Conseil : Pour obtenir la dernière liste des éditeurs et des clients pris en charge, consultez notre catalogue MCP.
Inviter votre client MCP
Le serveur MCP de Figma offre un ensemble d'outils qui aident les LLM à traduire les designs dans Figma. Une fois connecté, vous pouvez inviter votre client MCP à accéder à un nœud de design spécifique.
Pour obtenir des exemples et une liste complète des outils, reportez-vous à la section Outils et prompts.
Tout d'abord, suivez les instructions afin d'installer le serveur MCP de Figma pour votre client MCP préféré. Des instructions sont fournies pour :
Pour les autres clients MCP, suivez les instructions figurant dans la documentation de votre client afin d'ajouter des serveurs MCP. Reportez-vous au tableau sous Connecter le serveur MCP à votre éditeur pour obtenir des liens.
Exemple : obtenir le contexte de design
L'obtention du contexte et du code de design à partir des fichiers repose sur des liens. Pour obtenir le contexte de design :
- Dans Figma Design, sélectionnez le calque dont vous souhaitez obtenir le contexte de design.
- Dans la barre d'adresse de votre navigateur, copiez le lien vers une frame ou un calque dans Figma.
-
Dans votre client MCP, collez l'URL et invitez votre client à vous aider à mettre en œuvre le design.
Votre client ne pourra pas naviguer directement vers l’URL sélectionnée, mais il extraira l'identifiant de nœud nécessaire au serveur MCP pour identifier l'objet à propos duquel renvoyer des informations.
Exemple : envoyer l'UI à Figma
Remarque : Cette fonctionnalité est actuellement disponible en utilisant le serveur MCP distant de Figma avec Claude Code, Codex par OpenAI et VS Code uniquement.
L'envoi de l'UI en direct de votre application ou site web à Figma se fait dans le cadre d'une conversation avec votre client MCP :
- Envoyez un prompt à votre client MCP : « Démarre un serveur local pour mon application et capture l'UI dans un nouveau fichier Figma »
- Suivez les étapes fournies par votre client. Celui-ci ouvrira une fenêtre de navigateur pour vous ou vous donnera un lien à suivre.
- Utilisez la barre d'outils de capture pour capturer les pages, les éléments et les états de votre application ou site web.
- Informez votre client lorsque vous avez terminé. Il vous donnera un lien pour ouvrir le fichier Figma ayant été créé.
Amélioration des résultats du serveur MCP
Pour obtenir les meilleurs résultats, nous recommandons de mettre en place des règles afin de guider l'agent. Pour vous aider à démarrer, nous proposons des exemples de règles utiles.