Figma Canvas (AI agent canvas)

Was ist Figma Canvas?

Figma Canvas, wie in diesem Figma-Blogpost beschrieben, ist Figma’s Canvas-Workflow, der für KI-Agenten geöffnet wurde, damit sie direkt in Figma-Dateien gestalten können. Der Kernzweck ist, Agenten zu ermöglichen, Design-Assets zu erstellen und zu aktualisieren, während sie denselben Designkontext nutzen, den Teams in Figma pflegen – wie Designsystem, Komponenten, Variablen und Teamkonventionen.

Der Post stellt außerdem einen Beta-Figma-MCP-Server vor, der Figma in Developer-Workflows integriert und LLM-gestützte Tools ermöglicht, Designarbeiten zu generieren und zu modifizieren, während sie mit der bestehenden Designstruktur verknüpft bleiben.

Wichtige Funktionen

• KI-Agenten können direkt in Figma-Dateien auf dem Canvas schreiben, sodass generierte Arbeiten am selben Ort erstellt oder geändert werden, wo Teams Designs iterieren.
• Ein Beta-Figma-MCP-Server, der Figma in den Developer/LLM-Workflow einbindet, um designinformierte Code-Generierung und Design-Asset-Operationen zu unterstützen.
• Das use_figma-Tool für Canvas-Operationen, das MCP-Clients (einschließlich Claude Code und Codex, wie im Post erwähnt) ermöglicht, Design-Assets zu generieren und zu modifizieren, die ans Designsystem gebunden sind.
• Gemeinsamer Kontext zwischen Code und Canvas, damit Agenten flüssig zwischen der Aktualisierung von code-basierten UIs und der Verfeinerung von Designs in Figma wechseln können.
• Skills zur Steuerung des Agentenverhaltens mit Markdown-Anweisungen, wobei Skills Workflow-Schritte, Sequenzierung und Konventionen definieren, die Agenten in Figma befolgen sollen.

So nutzt du Figma Canvas

1. Verwende einen MCP-Client, der Figma’s MCP-Server unterstützt (der Post erwähnt Tools wie Claude Code und Codex), um Figma-Funktionen über MCP zu nutzen.
2. Nutze das use_figma-Tool, um den Agenten anzuweisen, Komponenten und andere Design-Assets in Figma mit deinem Designsystem-Kontext zu erstellen oder zu aktualisieren.
3. Füge Anleitungen über Skills hinzu, indem du Markdown-basierte Instruktionen bereitstellst, die der Agent für die Ausführung von Aufgaben in Figma befolgt (einschließlich des grundlegenden /figma-use-Skills aus dem Post).
4. Optional: Synchronisiere von Live-UIs mit generate_figma_design, wenn du von HTML/Code aus startest, und wechsle dann zu use_figma, um diese Designs mit bestehenden Komponenten und Variablen zu bearbeiten.

Anwendungsfälle

• Codebase in anfängliche Figma-Komponenten umwandeln: Verwende einen Skill wie /figma-generate-library, um neue Komponenten in Figma aus einer Codebase zu erstellen.
• Neue Screens mit bestehenden Komponenten und Variablen generieren: Nutze /figma-generate-design, damit der Agent Designs in Figma aufbaut und auf Komponenten/Variablen statt freier Layouts zurückgreift.
• Barrierefreiheits-Spezifikationen aus UI-Beschreibungen anwenden: Verwende create-voice, um Screenreader-Spezifikationen (VoiceOver, TalkBack, ARIA) aus UI-Spezifikationen zu generieren.
• Abstands-Konventionen durch systembewusste Regeln durchsetzen: Nutze rad-spacing, um hierarchische Abstandsmuster in Figma anzuwenden.
• Bestehende Designs mit System-Komponenten verbinden oder neu zuordnen: Verwende apply-design-system, um Designs an System-Komponenten auszurichten, statt sie als unverbundene Ebenen zu lassen.

FAQ

Ist das eine kostenpflichtige Funktion?

Der Blogpost gibt an, dass die Unterstützung für KI-Agenten auf dem Figma Canvas irgendwann eine nutzungsbasierte kostenpflichtige Funktion wird, sie ist aber während der Beta-Phase kostenlos verfügbar.

Welche Tools ermöglichen Agenten die Arbeit in Figma?

Der Post beschreibt ein use_figma-Tool, mit dem Agenten auf dem Canvas mit Designsystem-Kontext arbeiten können. Er verweist auch auf ein bestehendes generate_figma_design-Tool, um HTML aus Live-Apps/Websites in editierbare Figma-Ebenen zu übertragen.

Was sind „Skills“ in diesem Workflow?

Im Post sind Skills Mengen von Anweisungen als Markdown-Dateien, die steuern, wie Agenten in Figma arbeiten – inklusive Workflow-Schritten, Sequenzierung, Konventionen und Fachwissen für langlebige, markenkonforme Designs.

Muss ich ein Plugin bauen, um Skills zu erstellen?

Nein. Der Post sagt, jeder kann einen Skill erstellen, und das erfordert weder ein Plugin noch Code-Schreiben.

Sind die genannten Tools nur für bestimmte Agenten (z. B. Claude Code)?

Der Post nennt Claude Code und Codex als MCP-Clients, die use_figma nutzen können, und beschreibt auch „andere MCP-Clients“. Es gibt keine vollständige Kompatibilitätsmatrix.

Alternativen

• Design-to-Code-Übersetzungs-Workflows (ohne direkte Canvas-Agenten-Bearbeitung): Du kannst Designs außerhalb von Figma generieren oder Figma als schreibgeschütztes Ziel behandeln und Assets manuell in Figma nachbauen. Das unterscheidet sich durch fehlende direkte Agenten-Bearbeitungen, die an dein Designsystem im Canvas gebunden sind.
• Bestehende Figma-only-Automatisierung oder Plugins nutzen: Wenn du konsistente Komponenten und Variablen ohne KI-Agenten brauchst, kannst du auf Figma-Plugins oder templatebasierte Ansätze setzen. Das tauscht Agenten-Autonomie gegen deterministischeres Verhalten ein.
• Agenten-Workflows, die Design-Artefakte außerhalb von Figma generieren: Manche LLM-Toolchains geben Design-Dateien oder Spezifikationen aus, die ein Designer umsetzt. Im Vergleich zum hier beschriebenen Ansatz modifizieren Agenten nicht dieselben Figma-Komponenten/Variablen direkt über use_figma.
• Nur HTML-to-Figma-Übersetzung: Wenn dein Fokus auf dem Import bestehender UIs in Figma liegt (via generate_figma_design-type-Fähigkeit) ohne Agenten-Canvas-Bearbeitungsschleife, reduziert das Komplexität, erfordert aber möglicherweise mehr manuelle Nachbearbeitung zur Anpassung ans Designsystem.