---
title: "Figma MCP : à quoi ça sert et comment l'installer | Blog Digilityx"
description: "Découvrez le serveur MCP pour Figma qui permet aux LLMs d'interagir avec vos designs. Guide d'installation et cas d'usage concrets."
url: "https://www.digilityx.com/blog/figma-mcp"
---

[Blog](/blog) Figma MCP : à quoi ça sert et comment l'installer

Design

# Figma MCP : à quoi ça sert et comment l'installer

Découvrez le serveur MCP pour Figma qui permet aux LLMs d'interagir avec vos designs. Guide d'installation et cas d'usage concrets.

![Alexandre Koch](/_vercel/image?url=https%3A%2F%2Fezxlyoheopiwq2ge.public.blob.vercel-storage.com%2Fteam%2Falexandre-koch.png&w=80&q=75)

Alexandre Koch Head of Design & Research

Temps de lecture 4 min

Date de publication 18.05.2026

![Figma MCP : à quoi ça sert et comment l'installer](/_vercel/image?url=https%3A%2F%2Fezxlyoheopiwq2ge.public.blob.vercel-storage.com%2Fblog%2Ffigma-mcp%2Fthumbnail.avif&w=640&q=75)

Le **Model Context Protocol (MCP)** d’Anthropic permet aux assistants IA d’interagir avec des outils externes de manière standardisée. Le serveur MCP pour Figma étend cette capacité au design, en donnant aux LLMs comme Claude un accès direct à vos fichiers, frames, composants et styles Figma.

## À quoi ça sert ?

Le serveur MCP Figma transforme votre assistant IA en collaborateur design capable de :

-   **Inspecter vos designs** : lire les propriétés des frames, composants, textes, couleurs et typographies
-   **Récupérer des informations** : extraire les tokens de design, analyser la structure de vos fichiers
-   **Générer de la documentation** : produire des specs détaillées à partir de vos maquettes
-   **Auditer la cohérence** : vérifier l’application de votre design system dans les fichiers

Concrètement, vous pouvez demander à Claude “Quelles couleurs sont utilisées dans le fichier Homepage ?” ou “Liste tous les composants boutons et leurs variants” et obtenir une réponse précise sans quitter votre conversation.

## Prérequis

Avant l’installation, assurez-vous d’avoir :

-   Un **compte Figma** actif
-   Un des clients MCP suivants installé : **Claude Code CLI**, **VS Code**, **Cursor**, ou **Codex**

Aucune installation locale de serveur n’est nécessaire : Figma héberge le serveur MCP sur `mcp.figma.com`.

## Installation pas à pas

L’installation varie selon votre client MCP. Voici les étapes pour les trois clients principaux.

### Claude Code CLI

**Méthode recommandée (via plugin officiel)** :

```
claude plugin install figma@claude-plugins-official
```

**Méthode manuelle** :

1.  Lancez la commande :
    
    ```
    claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp
    ```
    
2.  Démarrez une nouvelle session Claude Code
3.  Tapez `/mcp` pour gérer les serveurs et sélectionnez **figma**
4.  Choisissez **Authenticate**
5.  Cliquez **Allow Access** dans la fenêtre de navigateur qui s’ouvre
6.  Vérifiez la connexion avec `/mcp`

### VS Code

1.  Appuyez sur **⌘ Shift P** (Mac) ou **Ctrl Shift P** (Windows/Linux)
2.  Sélectionnez **“MCP: Open User Configuration”**
3.  Collez cette configuration dans `mcp.json` :

```
{
  "servers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp",
      "type": "http"
    }
  }
}
```

4.  Cliquez sur **Start** au-dessus du nom du serveur
5.  Accordez la permission **Allow Access** dans la fenêtre d’authentification

### Cursor

**Méthode recommandée (via plugin)** :

Tapez dans le chat agent :

```
/add-plugin figma
```

**Méthode manuelle** :

1.  Cliquez sur le deep link Figma MCP pour ouvrir la configuration
2.  Sélectionnez **Install**
3.  Cliquez **Connect** à côté de Figma
4.  Cliquez **Open** pour lancer l’authentification
5.  Accordez la permission **Allow access**

### Vérifier que ça fonctionne

Selon votre client, tapez une requête test comme :

> “Liste les fichiers Figma de mon équipe”

ou

> “Extrais les couleurs de ce fichier : \[URL Figma\]”

Si le serveur répond avec des informations de vos fichiers Figma, l’installation est réussie.

## Cas d’usage concrets

### Extraction de design tokens (lecture)

```
"Récupère toutes les couleurs utilisées dans ce fichier Figma : 
https://www.figma.com/file/abc123/Design-System"
```

Claude parcourt le fichier et génère une liste structurée des couleurs avec leurs codes hex.

### Documentation de composants (lecture)

```
"Documente le composant Button avec tous ses variants, 
propriétés et états"
```

Utile pour synchroniser la doc technique avec l’état réel du design system.

### Génération de code depuis une frame (lecture)

```
"Génère le code React pour cette frame : 
https://www.figma.com/file/abc123/Homepage?node-id=42:156"
```

Le serveur analyse la structure et les styles de la frame et produit du code correspondant.

### Création de maquettes (écriture beta)

```
"Crée une card de profil utilisateur avec photo, nom, 
titre et bouton CTA dans mon fichier Prototypes"
```

Claude peut générer directement des frames et composants dans vos fichiers Figma (fonctionnalité gratuite en beta).

## Capacités et limites

Le serveur MCP Figma distant offre à la fois des fonctions de **lecture** (inspection, extraction de tokens, documentation) et d’**écriture sur le canvas** (création de frames, modification de designs).

Les fonctionnalités d’écriture sont actuellement **gratuites en beta**, mais deviendront payantes à terme.

Les permissions respectent celles de votre compte Figma : vous ne pourrez interagir qu’avec les fichiers auxquels vous avez accès.

## Pour aller plus loin

-   [Documentation officielle Figma MCP Server](https://developers.figma.com/docs/figma-mcp-server/)
-   [Guide d’installation serveur distant](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/)
-   [Documentation MCP (Model Context Protocol)](https://modelcontextprotocol.io/)
-   [Catalogue des plugins MCP Claude](https://claude.ai/code/plugins)

Le serveur MCP Figma transforme votre assistant IA en véritable collaborateur design. Une fois configuré, il devient un gain de temps massif pour l’extraction de tokens, la génération de code, et même la création de maquettes (en beta).

![Alexandre Koch](/_vercel/image?url=https%3A%2F%2Fezxlyoheopiwq2ge.public.blob.vercel-storage.com%2Fteam%2Falexandre-koch.png&w=80&q=75)

Alexandre Koch

Head of Design & Research

[](https://www.linkedin.com/in/alexandrekoch)

Head of Design & Research