Intégration Figma MCP

Documentation Index

Fetch the complete documentation index at: https://docs.replit.com/llms.txt

Use this file to discover all available pages before exploring further.

Utilisez Agent avec le Model Context Protocol (MCP) pour travailler avec vos designs Figma directement dans le chat. Collez un lien Figma pour explorer les calques, extraire les variables et composants, capturer des captures d’écran et générer du code à partir des cadres sélectionnés.

​

Fonctionnalités

• Générer du code de démarrage : Transformer les cadres sélectionnés en code prêt pour la production pour amorcer des fonctionnalités ou itérer plus rapidement.
• Extraire des données de design : Accéder aux variables, composants et spécifications de mise en page définis dans votre fichier.
• Capturer des captures d’écran de cadres : Créer des références visuelles depuis n’importe quel cadre pour guider l’implémentation.
• Inspecter l’activité MCP : Développer les événements du chat pour afficher les requêtes et réponses brutes.

​

Démonstration

Regardez une présentation rapide du flux de travail, de la détection de lien à la génération de code :

​

Utilisation

​

Se connecter dans le chat Agent

1. Ouvrez le chat Agent dans l’éditeur de projet.
2. Collez un lien de fichier ou de prototype Figma valide dans la zone de message.
3. Lorsqu’un lien valide est détecté, une carte Design Figma apparaît. Cliquez sur Se connecter avec Figma pour autoriser.

Après avoir collé un lien pris en charge, Agent affiche une carte de design Figma pour une autorisation rapide :

​

Travailler avec les liens Figma

Utilisez des flux de travail basés sur des liens pour agir sur des parties précises de votre design :

1. Dans Figma, copiez le lien vers n’importe quel cadre ou calque.
2. Partagez l’URL avec Agent dans la zone de chat et décrivez ce que vous souhaitez.

Dans Figma, copiez un lien vers le cadre ou calque exact avec lequel vous souhaitez qu’Agent travaille : Ensuite, collez le lien dans Agent avec une courte instruction (par exemple, « générer React pour ce cadre ») :

​

Afficher les appels MCP

Ouvrez l’événement de chronologie intitulé Used Figma MCP (Beta) pour voir les requêtes et réponses sous-jacentes. Voici où développer l’événement de chronologie pour inspecter les appels MCP :

​

Limites de débit et exigences de siège Figma

Figma applique des limites de débit sur les appels d’outils MCP en fonction de votre plan Figma et de votre type de siège. Ces limites sont définies par Figma, pas par Replit. Les sièges Dev et Full ont également des limites par minute : 10/min sur Pro, 15/min sur Organisation et 20/min sur les plans Enterprise.

​

Ce qui compte dans la limite

Les limites de débit s’appliquent aux outils qui lisent des données depuis Figma, comme get_design_context et get_image. Certains outils comme whoami et generate_figma_design sont exemptés.

​

Si vous atteignez une limite de débit

Agent vous informe lorsqu’une limite de débit Figma est atteinte. Pour augmenter votre limite :

• Sur un plan Starter ou compte gratuit : Passez à un plan Pro, Organisation ou Enterprise avec un siège Dev ou Full.
• Sur un siège View ou Collab : Passez à un siège Dev ou Full sur votre plan actuel.
• Sur un siège Dev/Full (Organisation) : Passez à un plan Enterprise pour les limites les plus élevées.

Pour tous les détails, consultez la documentation Figma sur les plans, l’accès et les permissions.

​

Gérer les connexions

Gérez ou déconnectez l’intégration Figma sur replit.com/integrations. Trouvez et gérez les connexions depuis votre page d’intégrations Replit :