# Figma MCP: Design-Kontext lesen und aufs Canvas schreiben

> Der Figma MCP Server bringt Design-Systeme, Variablen und Komponenten in den Agenten — und schreibt seit dem Update vom März 2026 auch selbst native Designs aufs Canvas.

- URL: https://thevibe-coding.de/mcp/figma-mcp
- Typ: mcp | Veroeffentlicht: 2026-07-18 | Aktualisiert: 2026-07-18
- Autor: Vita Legne | Site: VIBE CODING — thevibe-coding.de

---

**Der Figma MCP Server** ist Figmas offizielle [MCP](/glossar/mcp)-Schnittstelle für KI-Agenten. Er liefert Design-Kontext — Variablen, Komponenten, Layout-Daten — direkt in IDE und Agenten und schreibt seit dem Update vom März 2026 auch selbst native Inhalte aufs Canvas. Verfügbar als gehosteter Remote-Server (empfohlen) oder als lokaler Desktop-Server.

## Vom Read-Only-Werkzeug zum Design-Agenten

Lange konnte der Server nur lesen: Frame auswählen, Code generieren, Design-Tokens extrahieren. Das Canvas-Update änderte die Richtung — Agenten erstellen jetzt komplette Landingpages und UX-Flows über mehrere Screens, und zwar mit den Komponenten, Tokens und Stilen deines eigenen Design-Systems statt generischer Bibliotheken. Die wichtigsten Fähigkeiten:

- **Design-Kontext extrahieren:** Variablen, Komponenten, Auto-Layout-Daten in die IDE holen
- **Code aus Frames generieren:** ausgewählte Frames in Code übersetzen, konsistent per Code Connect
- **Aufs Canvas schreiben:** Frames, Komponenten, Variablen in Figma Design und FigJam anlegen und ändern
- **Live-UI erfassen:** gerenderte Web-UI (auch localhost) als editierbare Design-Ebenen nach Figma bringen

Wie sich daraus ein Team aus Designer-, UX-Redakteur- und Art-Director-Agent bauen lässt, zeigt unser Blog-Beitrag [Figma MCP und das Agenten-Team](/blog/ki-design-figma-mcp-agenten-team-neues-zeitalter).

## Installation in Claude Code

Figma empfiehlt das offizielle Plugin, das MCP-Server plus Agent Skills in einem Schritt einrichtet:

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

Manuell geht es über den Remote-Server mit OAuth-Login:

```bash
claude mcp add --transport http figma https://mcp.figma.com/mcp
```

Mit `--scope user` steht der Server in allen Projekten bereit. Wichtig: Für Schreib-Workflows brauchst du zusätzlich die Figma Skills — ohne sie arbeitet der Agent mit der Canvas-API unzuverlässig.

## Einsatz-Szenarien und Grenzen

Stark ist der Figma MCP Server überall, wo ein Design-System existiert: Design-to-Code mit echten Tokens, schnelle Mockup-Iterationen, Hypothesen-Validierung in Minuten statt Tagen. Ohne angeschlossenes UI-Kit sinkt die Qualität spürbar — dann generiert der Agent generische Layouts. Für visuelle Referenzen ohne Figma-Datei ist [Refero MCP](/mcp/refero-mcp) die bessere Wahl, für fertige React-Komponenten [Magic MCP](/mcp/magic-mcp-21st). Beachte außerdem: Die Beta ist kostenlos, Figma plant aber ein nutzungsbasiertes Preismodell.

## FAQ

### Was kostet der Figma MCP Server?

Der Remote-Server ist auf allen Figma-Plänen und Seats verfügbar und während der Beta-Phase kostenlos — Figma kündigt aber an, dass die Agenten-Features später nutzungsbasiert bezahlt werden. Nur der lokale Desktop-Server setzt einen Dev- oder Full-Seat eines Bezahlplans voraus.

### Kann der Figma MCP Server eigenständig Designs erstellen?

Ja, seit dem Update vom März 2026 schreibt der Server aufs Canvas: Agenten bauen Frames, Komponenten, Variablen und Auto-Layouts direkt in Figma-Dateien — auf Basis deines bestehenden Design-Systems. Vorher war der Server reines Read-Only-Werkzeug für Design-to-Code.

### Warum sollte ich zusätzlich die Figma Skills installieren?

Die Skills geben dem Agenten Workflow-Wissen für die Schreib-Tools: Ohne sie verbindet er sich zwar, arbeitet aber unzuverlässig mit der Canvas-API. Das Claude-Code-Plugin figma@claude-plugins-official installiert MCP-Server und Skills in einem Schritt.

## Quellen

- [Figma MCP Server — Developer Docs](https://developers.figma.com/docs/figma-mcp-server/) — Figma
- [The Figma canvas is now open to agents](https://www.figma.com/blog/the-figma-canvas-is-now-open-to-agents/) — Figma