Spaces:
Sleeping
Sleeping
| 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](https://www.figma.com/settings) | |
| 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` : | |
| ```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 : | |
| ```json | |
| { | |
| "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 | |