README.md

metadata

title: Sigma - Figma MCP Server
emoji: 🎨
colorFrom: purple
colorTo: purple
sdk: gradio
sdk_version: 5.33.1
app_file: app.py
pinned: false

🎨 Figma MCP Server

Serveur MCP pour contrôler Figma via Claude/Cursor avec l'API REST officielle

🚀 Fonctionnalités

• ✅ Authentification Figma avec Personal Access Token
• ✅ Vraie API REST Figma pour toutes les opérations
• ✅ Serveur MCP compatible Claude Desktop et Cursor
• ✅ Hébergé sur HF Spaces - pas d'installation locale
• ✅ Interface de test intégrée

🏗️ Architecture

Claude/Cursor ←→ MCP (SSE) ←→ Gradio Server ←→ API REST Figma
             https://...sse           HF Spaces        api.figma.com

🔧 Configuration

1. Obtenir un Personal Access Token Figma

1. Aller sur Figma Settings > Personal Access Tokens
2. Cliquer sur "Generate new token"
3. Donner un nom à votre token
4. Copier le token (commence par figd_ ou figc_)

2. Obtenir l'ID de votre fichier Figma

1. Ouvrir votre fichier Figma dans le navigateur
2. Copier l'ID depuis l'URL : https://www.figma.com/file/FILE_ID/nom-du-fichier
3. L'ID est la partie entre /file/ et /

3. Configurer Claude Desktop

Ajouter dans claude_desktop_config.json :

{
  "mcpServers": {
    "figma": {
      "command": "sse",
      "args": ["https://aktraiser-sigma.hf.space/gradio_api/mcp/sse"]
    }
  }
}

4. Configurer Cursor

Ajouter dans .cursorrules ou les paramètres MCP :

{
  "mcp": {
    "figma": "https://aktraiser-sigma.hf.space/gradio_api/mcp/sse"
  }
}

🛠️ Outils MCP disponibles

Configuration

• configure_figma_token(token) - Configure le token d'accès Figma
• configure_figma_file_id(file_id) - Configure l'ID du fichier à utiliser

Informations

• get_figma_file_info(file_id?) - Récupère les infos d'un fichier
• get_figma_user_info() - Info de l'utilisateur connecté
• get_figma_comments(file_id?) - Liste les commentaires

Création d'éléments (via commentaires)

• create_figma_rectangle(x, y, width, height, name?, color?) - Crée un rectangle
• create_figma_frame(x, y, width, height, name?) - Crée un frame
• create_figma_text(x, y, text, name?, font_size?) - Crée un texte

Projets et équipes

• list_figma_team_projects(team_id?) - Liste les projets d'une équipe

📝 Utilisation

Exemple avec Claude

User: Configure mon token Figma et commence à créer un design

Claude: Je vais d'abord configurer votre token Figma. Pouvez-vous me donner votre Personal Access Token ?

[Après avoir reçu le token]

configure_figma_token("figd_your_token_here")

Maintenant, donnez-moi l'ID de votre fichier Figma...

configure_figma_file_id("YOUR_FILE_ID")

Parfait ! Je peux maintenant créer des éléments. Créons un rectangle rouge :

create_figma_rectangle("100", "100", "200", "150", "Mon Rectangle", "#FF0000")

🧪 Interface de test

L'application inclut une interface de test accessible sur : https://aktraiser-sigma.hf.space

Cette interface permet de :

• Tester la configuration du token
• Vérifier l'accès aux fichiers
• Afficher les informations du fichier
• Lister les commentaires

⚠️ Limitations actuelles

Création d'éléments

Pour l'instant, la création d'éléments (rectangles, frames, texte) se fait via commentaires car l'API REST Figma ne permet pas de créer directement des nœuds. Les commentaires apparaîtront dans votre fichier Figma avec les instructions de création.

Permissions

• Vous devez avoir accès en écriture au fichier
• Le token doit avoir les bonnes permissions (défini lors de la création)

🔄 Fonctionnement

1. Claude/Cursor appelle les outils MCP
2. Serveur MCP reçoit la requête via SSE
3. Gradio traite la requête et appelle l'API REST Figma
4. Figma renvoie la réponse
5. Serveur MCP retourne le résultat à Claude/Cursor

🚀 Déploiement

Le serveur est automatiquement déployé sur Hugging Face Spaces :

• URL MCP : https://aktraiser-sigma.hf.space/gradio_api/mcp/sse
• Interface web : https://aktraiser-sigma.hf.space

🔒 Sécurité

• Les tokens ne sont jamais stockés de façon persistante
• Ils ne sont conservés qu'en mémoire pendant la session
• Utilisez toujours des tokens avec des permissions limitées

📚 API Figma

Documentation officielle : https://www.figma.com/developers/api

🐛 Dépannage

Erreurs courantes

Token invalide

❌ Token invalide. Le token doit commencer par 'figd_' ou 'figc_'

→ Vérifiez que votre token est correct

Fichier inaccessible

❌ Impossible d'accéder au fichier : 403

→ Vérifiez que vous avez les permissions sur le fichier

Token non configuré

❌ Token Figma non configuré

→ Appelez configure_figma_token() d'abord

🤝 Contribution

Ce projet est open source ! N'hésitez pas à contribuer.

📄 Licence

MIT License