Service MCP pour la lecture et la modification des dessins Figma à l'aide du curseur.

Introduction générale

Curseur Parler à Figma MCP est un projet open-source qui a été développé dans le cadre de l'initiative Modèle Contexte Protocole (MCP) relie l'outil de programmation d'IA Cursor au logiciel de conception Figma. Il a été créé par le développeur Sonny Lazuardi, est hébergé sur GitHub et devrait être disponible le 17 mars 2025. La fonction principale de l'outil est de permettre à Cursor de lire les fichiers de conception Figma et de générer du code, ou de modifier directement le contenu de la conception. Il est écrit en TypeScript et intègre la technologie WebSocket pour la communication en temps réel. Qu'il s'agisse de transformer rapidement une conception en code ou de manipuler un fichier de conception avec l'IA, cet outil gratuit aide les développeurs à être plus efficaces. Tout le monde peut télécharger le code et participer au développement.

boulon.nouveau Nouvelle fonctionnalité mise en place il y a quelques jours :Convertir les conceptions Figma en applications complètes en un seul clic

Liste des fonctions

• Connexion du curseur et de FigmaCommunication bidirectionnelle : La communication bidirectionnelle est assurée par le protocole MCP et WebSocket.
• Lire les informations relatives à la conception: Obtenir une vue d'ensemble du document du fichier Figma, du contenu sélectionné ou des détails spécifiques au nœud.
• Création d'éléments de design: Ajouter un rectangle, un cadre ou un nœud de texte à Figma.
• Modifier les styles et les mises en pageLes nœuds peuvent être déplacés, redimensionnés ou supprimés.
• Générer le codeRéduire le temps d'écriture manuelle en transformant les conceptions de Figma en code utilisable.
• Soutien à la gestion des composantsLes composants : lire les composants locaux ou d'équipe pour créer des instances de composants.
• fonction d'exportationLes nœuds de conception peuvent être exportés au format PNG, JPG, SVG ou PDF.
• Open source et gratuitLe code est accessible au public et les développeurs sont libres de le modifier ou de l'optimiser.

Utiliser l'aide

Processus d'installation

Pour utiliser le MCP Cursor Talk to Figma, plusieurs éléments doivent être installés et configurés. Voici les étapes détaillées :

1. préparer l'environnement

• Installation BunBun est un outil qui permet d'exécuter JavaScript rapidement. Si vous ne l'avez pas installé, ouvrez un terminal et saisissez-le :

curl -fsSL https://bun.sh/install | bash

• Installation du curseurTélécharger et installer l'outil de programmation Cursor AI à partir du site officiel (cursor.ai).
• Obtenir un jeton FigmaPour cela, vous devez vous connecter à Figma, générer un jeton d'accès personnel dans les paramètres de votre compte et l'enregistrer.

2. télécharger le projet

• Exécutez la commande suivante dans le terminal pour télécharger le code du projet :

git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git

• Accédez au catalogue de projets :

cd cursor-talk-to-figma-mcp

3. installer les dépendances et la configuration

• Exécuter dans le répertoire du projet :

bun setup

• Cette opération installe toutes les dépendances (y compris les bibliothèques TypeScript et WebSocket) et configure automatiquement le serveur MCP dans Cursor.

4) Démarrer le serveur WebSocket

• Saisissez-le dans le terminal :

bun start

• Ou l'exécuter manuellement :

bun run src/socket.ts

• Ceci démarre le serveur WebSocket pour connecter le plugin Figma au MCP.

5. installer le plug-in Figma

• Ouvrez l'application Figma.
• Cliquez sur le menu supérieur "Plugins" > "Développement" > "Nouveau plugin".
• Sélectionnez "Link Existing Plugins" et localisez le fichier src/cursor_mcp_plugin/manifest.json Documentation.
• Après confirmation, le plugin apparaîtra dans la liste des plugins de développement de Figma.

6) Configuration du serveur Cursor MCP (mode manuel)

• au cas où bun setup Non automatisé, peut être configuré manuellement.
• spectacle (un billet) ~/.cursor/mcp.json ajouter ce qui suit :

{
"mcpServers": {
"TalkToFigma": {
"command": "bun",
"args": ["/path/to/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts"]
}
}
}

• l'interchangeabilité /path/to/ Le chemin réel de votre projet.

Comment utiliser les principales fonctionnalités

Une fois l'installation terminée, suivez les étapes ci-dessous :

kit de démarrage

1. Exécution d'un serveur WebSocket: :
   • Dans le terminal, tapez bun startPour cela, il faut s'assurer que le serveur fonctionne.
2. Lancement du plug-in Figma: :
   • Dans Figma, faites un clic droit sur la toile et sélectionnez "Plugins" > "Develop" > Lancez le plugin que vous venez d'installer.
   • Après le démarrage du plugin, tapez join_channel Rejoignez le canal de communication.
3. Connecter le curseur: :
   • Ouvrez Cursor et assurez-vous que le serveur MCP est configuré et fonctionne.

Lire les informations relatives à la conception

• Ouvrez un fichier de conception dans Figma et sélectionnez la section à manipuler.
• Saisir des commandes dans le mode "Composer" du curseur, par exemple :
  • "Obtenir des informations sur le document en cours" : appeler la fonction get_document_info.
  • "Afficher le contenu sélectionné" : appel get_selection.
• Le curseur renvoie les données de conception telles que la mise en page, le style, etc. via MCP.

Création et modification de dessins et modèles

• Saisir des instructions spécifiques dans le curseur :
  • Crée un rectangle :create_rectangle, spécifier l'emplacement et la taille.
  • Ajouter un texte :create_text, définir le contenu et la police.
  • Modifier la couleur :set_fill_colorLa valeur RGBA est saisie.
• Les modifications sont répercutées en temps réel dans les fichiers Figma.

Générer le code

• Collez un lien vers le fichier Figma dans le curseur (par ex. https://www.figma.com/file/xxx/yyy).
• Entrez la commande "Générer cette conception de la Réagir Code".
• Le curseur lira la conception et émettra le code correspondant.

Exporter le dessin ou modèle

• Entrer dans le curseur :export_node_as_imageLe tableau suivant décrit comment sélectionner le format (PNG, JPG, etc.).
• Le fichier exporté est enregistré localement.

Précautions de manipulation

• séquence de connexionLa méthode est la suivante : lancer d'abord WebSocket, puis exécuter le plugin, et enfin utiliser Cursor pour envoyer des commandes.
• traitement des erreursSi la commande échoue, vérifiez les journaux du terminal pour confirmer que le réseau et les autorisations sont corrects.
• Conseils en matière de performancePour les fichiers volumineux, utilisez d'abord la fonction get_document_info Visualisez la vue d'ensemble et manipulez ensuite des nœuds spécifiques.

La force de cet outil réside dans le fait qu'il rend la conception et le codage transparents. Vous pouvez manipuler Figma directement avec l'IA ou générer du code rapidement, ce qui élimine une grande partie du travail répétitif.

scénario d'application

1. Prototypage rapide
   Description du scénario : les chefs de produit doivent valider une idée de conception. Ils peuvent utiliser Cursor pour créer des éléments dans Figma, puis exporter le code pour générer rapidement un prototype interactif.
2. Synchronisation de la conception et du développement
   Description du scénario : après que le concepteur a ajusté le fichier Figma, le développeur lit la dernière conception via Cursor et met à jour le code en temps réel afin de réduire les coûts de communication.
3. Ajustement automatisé du style
   Description du scénario : les équipes doivent modifier en masse les couleurs ou les dispositions des dessins. Les développeurs peuvent utiliser le curseur pour saisir des commandes afin d'automatiser les ajustements.

QA

1. Dois-je payer pour cet outil ?
   Réponse : pas besoin. Il s'agit d'un projet open source, dont l'utilisation est gratuite et dont le code est publiquement disponible sur GitHub.
2. Quels sont les langages de programmation pris en charge pour la sortie ?
   Réponse : Dépend de la capacité de Cursor, qui supporte actuellement React, HTML, CSS et d'autres codes frontaux communs, spécifiques à la logique de génération de Cursor.
3. Puis-je travailler avec plus d'un fichier Figma en même temps ?
   Réponse : Oui, mais vous devez ajouter un canal différent pour chaque fichier (à l'aide de la fonction join_channel), assurez-vous que la commande pointe vers le bon fichier.