README.md

---
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