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 une liste complète des clients pris en charge ->
Les utilisateurs du forfait de base ou disposant d'une licence View ou Collab dans les forfaits payants sont limités à un maximum de 6 appels d'outil par mois.
Les utilisateurs disposant d'un accès Dev ou Full dans les forfaits Professionnel, Organisation ou Entreprise ont des limites de débit par minute, qui suivent les mêmes limites que l'API REST de Figma Tier 1. Comme avec son API REST, Figma se réserve le droit de modifier les limites de débit.
Le serveur MCP de Figma aide les développeurs à implémenter des designs rapidement et avec précision en fournissant un contexte important aux agents d'IA qui génèrent du code à partir de fichiers Figma Design, FigJam et Make. 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 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 de bureau : Fonctionne localement via l'application de bureau Figma.
-
Serveur MCP distant : Se connecte directement à l'extrémité hébergée de Figma sur
https://mcp.figma.com/mcp.
Activer le serveur MCP de bureau
Ouvrez l'application de bureau Figma et assurez-vous d'avoir effectué la mise à jour vers la dernière version.
Créez ou ouvrez un fichier Figma Design.
Dans la barre d'outils située en bas, basculez vers Dev Mode ou utilisez le raccourci clavier MAJD.
Dans la section Serveur MCP du panneau d'inspection, cliquez sur Activer le serveur MCP de bureau.
Une fois le serveur en cours d'exécution, un message de confirmation apparaît en bas de la fenêtre.
Le serveur s'exécute localement à l'adresse http://127.0.0.1:3845/mcp. Conservez cette adresse à portée de main pour votre fichier de configuration à l'étape suivante.
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 :
| Client | Support du serveur de bureau | Support du serveur distant |
| Amazon Q | ✓ | |
| Android Studio | ✓ | ✓ |
| Claude Code | ✓ | ✓ |
| Codex par OpenAI | ✓ | ✓ |
| Cursor | ✓ | ✓ |
| Gemini CLI | ✓ | ✓ |
| Kiro | ✓ | |
| Openhands | ✓ | |
| Replit | ✓ | |
| VS Code | ✓ | ✓ |
| Warp | ✓ | ✓ |
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.
Il existe deux manières de fournir un contexte Figma Design à votre client IA :
Basé sur la sélection (serveur de bureau uniquement)
- Sélectionnez un frame ou un calque dans Figma à l'aide de l'application de bureau.
- Invitez votre client à vous aider à mettre en œuvre votre sélection actuelle.
Par lien
- Copiez le lien vers une frame ou un calque dans Figma.
- Invitez votre client à vous aider à mettre en œuvre la conception vers l'URL sélectionnée.
Remarque : votre client ne pourra pas naviguer vers l'URL sélectionnée, mais il extraira l'identifiant de nœud requis pour que le serveur MCP identifie l'objet sur lequel renvoyer des informations.
Outils et suggestions d'utilisation
Le serveur MCP de Figma comprend plusieurs outils qui aident votre assistant IA à générer et à adapter du code et à l'aligner sur vos designs. Chaque outil prend en charge différents workflows, de la production de code au mappage de composants ou à la récupération de jetons de design. Pour en savoir plus sur les outils disponibles et obtenir des suggestions d'utilisation, consultez la documentation pour développeurs du serveur MCP de Figma.
Lorsque vous utilisez le serveur MCP de Figma, il se peut qu'une fenêtre contextuelle s'affiche dans Figma pour vous inviter à donner votre avis. Pour nous faire part de vos commentaires, veuillez utiliser ce formulaire.