Figma öffnet die Canvas für KI-Agenten: MCP und Skills

Figma KI-Design-Workflow mit KI-Agenten am Arbeitsplatz
KI-Agenten können über den Figma MCP-Server direkt auf der Design-Canvas arbeiten.

Figma öffnet seine Designplattform für KI-Agenten — über einen MCP-Server und sogenannte „Skills“ können Claude Code, Cursor oder GitHub Copilot ab sofort direkt auf der Canvas schreiben, Komponenten platzieren und Design-Systeme anwenden. Das verändert, wie Teams zwischen Design und Entwicklung arbeiten.

Inhalt

Was steckt hinter der Figma-MCP-Ankündigung?

Mal ehrlich: Die meisten „KI trifft Design“-Ankündigungen der letzten zwei Jahre waren vor allem heiße Luft. Ein bisschen Textvorschlag hier, ein generiertes Mockup dort — und dann? Manuell nachbearbeiten wie eh und je. Mit dem, was Figma am 25. März angekündigt hat, ist das anders. Diesmal geht es nicht um einen neuen Button im Interface, sondern um eine offene Schnittstelle für externe KI-Agenten.

Der Kern: Figma unterstützt ab sofort das Model Context Protocol (MCP) — ein von Anthropic entwickelter offener Standard, der KI-Agenten mit externen Werkzeugen verbindet. Über das neue Tool use_figma können Agenten wie Claude Code, Codex, Cursor oder GitHub Copilot direkt Lese- und Schreibzugriff auf Figma-Dateien erhalten.

Das klingt technisch, ist aber praktisch: Ein Entwickelnder beschreibt einem Agenten in natürlicher Sprache, welches Design-Element geändert werden soll — der Agent fragt über MCP bei Figma an, bekommt Zugriff auf die aktuelle Datei, führt die Änderung aus und liefert einen Screenshot zurück. Keine manuelle Übergabe, keine Medienbrüche, kein „exportiere das mal als PNG“-Hin-und-Her mehr.

Die vollständigen technischen Details hat Figma im offiziellen Figma-Blogpost zur Agentenintegration veröffentlicht. Wer tiefer einsteigen will — besonders die API-Dokumentation und die Schritt-für-Schritt-Anleitung zum Einrichten eines MCP-Clients — findet dort alle nötigen Ressourcen. Und auch Heise.de hat die Ankündigung aufgegriffen und kommt zum gleichen Schluss: Das ist keine Randnotiz, sondern ein echter Richtungswechsel für den Markt der Designtools.

KI-Skills: Figma lehrt Agenten das Designhandwerk

Das eigentlich Clevere an der Ankündigung sind aber nicht die technischen Schnittstellen, sondern ein Konzept namens „Skills“. Was sind das genau? Im Kern: Markdown-Dateien, die beschreiben, wie ein KI-Agent auf der Figma-Canvas arbeiten soll.

Stellen Sie sich das wie eine Art Anleitung vor, die ein erfahrenes Mitglied Ihres Design-Teams für einen neuen Agenten schreibt: „Wenn du eine neue Designbibliothek anlegen sollst, greife auf unser Komponentenset zurück, verwende diese Farbtokens, halte dich an diese Abstände.“ Genau das kodieren Skills — aber als Datei, nicht als Zuflüstern am Arbeitsplatz.

Figma liefert vier Beispiel-Skills direkt mit:

  • /figma-generate-library — legt automatisch eine neue Komponentenbibliothek an
  • /figma-generate-design — erstellt Designs aus einer Beschreibung heraus
  • /create-voice — generiert ARIA-Spezifikationen für Barrierefreiheit
  • /apply-design-system — wendet das vorhandene Design-System auf neue Elemente an

Was das bedeutet: Wer einmal einen guten Skill geschrieben hat, der sein Team-Design-System kennt, kann diesen Skill mit jedem KI-Agenten nutzen — und das ohne Programmierkenntnisse. Skills sind einfache Textdateien. Cat Wu, Head of Product bei Claude Code, bringt es auf den Punkt: „Skills teach Claude Code how to work directly in the design canvas.“

Auf figma.com/community/skills können Nutzende bereits von der Community erstellte Skills entdecken und teilen. Das ist ein geschickter Zug: Figma baut damit ein Ökosystem auf, bevor überhaupt klar ist, welche Skills sich als Standard durchsetzen werden.

MCP als Schlüsseltechnologie für den Design-Workflow

Wer noch nicht mit dem MCP-Standard vertraut ist: Das Protokoll definiert, wie KI-Agenten strukturiert auf externe Systeme zugreifen — also auf Datenbanken, APIs, Dateisysteme oder eben Designplattformen wie Figma. Kurz gesagt funktioniert es wie eine gemeinsame Sprache zwischen Agent und Werkzeug.

Der Vorteil gegenüber proprietären Integrationen: Einmal gebaut, funktioniert ein MCP-Tool mit allen kompatiblen Agenten. Das erklärt, warum Figma die Liste der unterstützten Clients so breit hält — Claude Code, Codex, Cursor, Copilot in VS Code, Augment, Warp, Factory, Firebender. Es reicht eine Integration, die dann überall funktioniert.

Auch OpenAI zeigt sich begeistert. Ein Design Lead aus dem Codex-Team bestätigt: „Teams at OpenAI use Figma to iterate, refine, and make decisions about how a product comes together.“ Das ist mehr als ein Pflicht-Zitat — es signalisiert, dass auch KI-Labs selbst Figma nicht als Legacy-Werkzeug betrachten, sondern als aktive Schaltzentrale im Entwicklungsprozess. Kein Wunder, dass OpenAI früh zu den Unterstützern gehört.

Interessant ist auch das Zusammenspiel mit Code Connect, Figmas eigenem System zur Verknüpfung von Designkomponenten mit tatsächlichem Code. Ein Agent kann künftig nicht nur ein Element auf der Canvas platzieren, sondern gleichzeitig wissen, welche React-Komponente dahintersteckt — und diese ggf. im Code-Editor anpassen. Das schließt die Lücke zwischen Designentscheidung und Implementierung deutlich enger.

Self-Healing Loops: Der Agent schaut, denkt nach, korrigiert sich

Ein Detail aus der Ankündigung ist besonders bemerkenswert — und wurde in ersten Berichten kaum aufgegriffen: „Self-healing loops“. Was passiert, wenn ein Agent eine Änderung in Figma vornimmt und das Ergebnis nicht dem entspricht, was beschrieben wurde?

Bei bisherigen Automatisierungsansätzen: Fehler, Ende, manuell nachbessern. Bei Figmas neuem Ansatz: Der Agent macht nach jeder Änderung einen Screenshot des aktuellen Canvas-Zustands, vergleicht ihn mit dem Ziel und iteriert weiter, bis das Design stimmt. Das klingt nach einer Kleinigkeit, ist aber ein fundamentaler Unterschied in der Verlässlichkeit agentenbasierter Workflows.

Statt einem einmaligen Ausführungsversuch entsteht ein echtes Feedback-System. Der Agent ist sich bewusst, dass er irren kann — und hat die Werkzeuge, sich selbst zu korrigieren. Das ist, wenn man ehrlich ist, deutlich näher an menschlichem Arbeiten als die meisten bisherigen KI-Tools.

Passend dazu kommt generate_figma_design als komplementäres Tool: Wer HTML-Designs direkt in Figma überführen will, kann das über diesen separaten Kanal tun — während use_figma für den agentengesteuerten Direkt-Zugriff zuständig ist. Beide Ansätze ergänzen sich, ohne sich zu überschneiden.

Figma MCP-Agenten Skills zwei Entwickelnde bei der Zusammenarbeit
Skills sind Markdown-Dateien, die KI-Agenten beibringen, wie sie in Figma arbeiten sollen.

Figma bleibt das Gehirn — auch mit KI im Workflow

Wir bei digital-magazin.de haben uns die Ankündigung genau angeschaut, und ein Aspekt fällt besonders auf: Figma positioniert sich nicht als Werkzeug, das durch KI ersetzt wird — sondern als die „single source of truth“, die durch KI-Agenten besser genutzt werden kann.

Das ist eine kluge Strategie. Design-Systeme, Komponenten, Tokens, Variablen — all das bleibt in Figma. Die KI ist nur der Assistent, der auf diese Quelle zugreift, nicht derjenige, der sie ersetzt. Heise.de formuliert es treffend: „Figma bleibt zentrale Quelle für Designinformationen.“ Das klingt banal, ist aber wichtig: Es gibt keine Parallelwelt aus KI-generierten Designs, die dann manuell mit dem echten System abgeglichen werden müssten.

Für Teams bedeutet das: Designende können weiter in Figma arbeiten, wie sie es kennen. Entwickelnde können ihre KI-Agenten damit beauftragen, diese Designs zu lesen, zu interpretieren und umzusetzen — ohne dass jemand als Übersetzer dazwischen stehen muss. Rückblickend auf das Tech-Jahr 2025 war genau das die fehlende Verbindung: Agenten konnten viel, aber nicht direkt in den Designtools arbeiten.

Die Frage, die sich Designende jetzt stellen sollten: Wer in Ihrem Team schreibt die ersten Skills? Das wird keine technische, sondern eine strategische Aufgabe sein — ähnlich wie damals die ersten, die gute Prompt-Templates für ChatGPT gebaut haben, erheblich produktiver wurden als der Rest.

Preismodell und Verfügbarkeit

Aktuell ist die gesamte Funktionalität kostenlos in der Beta-Phase verfügbar. Figma hat angekündigt, später ein bezahltes API-Modell einzuführen — genaue Preise und Tier-Strukturen stehen noch nicht fest. Das ist typisch für Figma: Features landen erstmal kostenlos, bis die Nutzung groß genug ist, um zu monetarisieren.

Für Unternehmen, die jetzt mit Skills und MCP-Workflows experimentieren, bedeutet das: Es gibt einen kostenlosen Zeitfenster, um Erfahrungen zu sammeln, bevor das Feature unter Umständen in höhere Plan-Tiers wandert. Wer das verpasst, zahlt später möglicherweise nicht nur Geld, sondern auch Zeit nach.

Technisch benötigen Nutzende einen aktuellen Figma-Account und einen kompatiblen MCP-Client. Die Integration läuft über das Standard-MCP-Protokoll, sodass keine proprietären Plugins oder Erweiterungen nötig sind. Das Setup ist nach Angaben von Figma für Entwickelnde in wenigen Minuten abgeschlossen — was zumindest in der Beta-Phase realistisch klingt.

Was das für Designende und Entwickelnde konkret ändert

Hand aufs Herz: Wie oft ist in Ihrem Team Zeit verloren gegangen, weil Entwickelnde nicht wussten, welche Komponente sie nehmen sollten — und Designende gerade in einem anderen Meeting saßen? Oder weil ein Agent zwar Code generiert hat, aber das resultierende Interface nichts mit dem Figma-File zu tun hatte?

Genau diese Reibung adressiert die Kombination aus MCP und Skills. Ein Entwickelnder gibt seinem Agenten den Auftrag, eine neue Seite nach dem bestehenden Design-System zu bauen. Der Agent holt sich über MCP den aktuellen Stand aus Figma, liest den passenden Skill, versteht das Komponentensystem und liefert ein Ergebnis, das tatsächlich zum Rest des Produkts passt. Kein „einfach mal was generieren und hoffen“.

Für Designende verändert sich die Rolle ebenfalls: Statt Einzelpixel anzupassen werden sie zunehmend diejenigen sein, die Skills schreiben — also die Anleitung, nach der Agenten arbeiten. Das ist eine neue Kompetenz, aber keine unzugängliche. Wer ein Design-System kennt und erklären kann, wie es funktioniert, kann auch Skills schreiben.

Auch die OpenAI Responses API mit ihrem MCP-Support zeigt, wohin die Reise geht: Das Ökosystem aus MCP-kompatiblen Tools wächst schnell, und wer frühzeitig ein durchgängiges Setup aufbaut — von der Designplattform bis zum Code-Editor — wird einen spürbaren Vorteil haben.

Und jetzt?

Figmas MCP-Integration ist kein Feature-Drop, das in der nächsten Quartalspräsentation wieder verblasst. Es ist die Weichenstellung dafür, wie KI-Agenten in den professionellen Designprozess integriert werden — offen, standardisiert, nicht proprietär.

Die spannende Frage ist nicht, ob sich der Ansatz durchsetzt. Angesichts der Unterstützung durch OpenAI, Anthropic, Cursor und GitHub gleichzeitig ist das kaum bezweifelbar. Die Frage ist, wie schnell sich in der Community Skills entwickeln, die wirklich gut sind — und wer die ersten sein werden, die damit echte Produktivitätsgewinne realisieren.

Wer jetzt anfängt zu experimentieren, hat einen guten Moment erwischt: Die Plattform ist offen, die Kosten sind null, und das Feld ist noch nicht übersät mit fertigen Lösungen. So eine Konstellation gibt es selten. Nutzen Sie sie.

Eine gute Startrampe: Schauen Sie sich zunächst die verfügbaren Community-Skills an. Viele davon sind bereits praxiserprobt und lassen sich als Ausgangspunkt für eigene Anpassungen nutzen. Dann: einen MCP-Client einrichten (Claude Code oder Cursor eignen sich für den Einstieg besonders gut), einen Test-Skill starten und schauen, was passiert. Die erste erfolgreiche agentengesteuerte Änderung in der eigenen Figma-Datei wird jeden Skeptiker überzeugen — oder zumindest neugierig machen. Und das reicht als Anfang.

Die KI-Welle hat das Coden bereits verändert, das Texten, das Recherchieren. Jetzt erreicht sie ernsthaft das Design. Nicht als Bedrohung, sondern als Erweiterung — für alle, die bereit sind, ihre Werkzeuge neu zu denken.

0 0 Bewertungen
Artikel Bewertung
Abonnieren
Benachrichtigen bei
guest
0 Kommentare
Älteste
Neueste Meistbewertet
Inline-Feedbacks
Alle Kommentare anzeigen
Ähnliche Artikel