KI-Agenten bearbeiten Figma: MCP-Server in Beta

KI-Agenten in Figma: Vom Auslesen von Mockups zur autonomen Design-Erstellung

Die Beta-Version des aktualisierten MCP-Servers von Figma erweitert die Fähigkeiten von KI-Agenten. Nun analysieren sie nicht nur Design-Dateien, sondern erstellen auch neue Elemente auf der Canvas mithilfe von Komponenten, Variablen und Design-System-Token. Die Funktion ist während der Beta-Phase kostenlos verfügbar, Monetarisierung ist über ein Pay-per-Use-Modell geplant.

Früher war der MCP-Server auf das Auslesen von Daten aus Mockups für die nachfolgende Code-Generierung beschränkt. Die neue API use_figma ermöglicht es Agenten, die Canvas direkt zu bearbeiten: Der Agent lädt die Komponentenbibliothek des Teams und erstellt Mockups basierend darauf. Ergänzt wird dies durch das Tool generate_figma_design, das HTML in bearbeitbare Figma-Layer umwandelt.

Skills als ausführbare Design-Richtlinien

Der zentrale Mechanismus sind Skills: Markdown-Anweisungen, die das Verhalten des Agenten definieren. Sie legen die Reihenfolge der Schritte, Regeln für die Arbeit mit Elementen und die Einhaltung von Teamkonventionen fest. Skills verwandeln statische Richtlinien in von KI ausführbaren Code.

Jeder Figma-Spezialist kann eine Skill erstellen. Figma stellt die grundlegende /figma-use und Beispiele aus der Community bereit. Ein Beispiel für eine einfache Skill könnte so aussehen:

# /figma-use skill
1. Zagruzit biblioteku komponentov.
2. Withzdat frame with auto layout.
3. Razmestit komponenty by setke.
4. Primenit peremennye for tsvetov and tipografiki.
5. Proverit on sootvetstvie tokenam.

Dies gewährleistet Design-Konsistenz ohne manuelles Eingreifen.

Selbstkorrektur-Mechanismus für präzise Iterationen

Agenten implementieren eine Selbstkorrektur-Schleife: Sie generieren einen Bildschirm, erstellen einen Screenshot, vergleichen ihn mit der Referenz und treffen Anpassungen. Da native Figma-Strukturen (Komponenten, Auto Layout, Variablen) verwendet werden, wirken sich Änderungen auf das gesamte System aus, statt auf Rasterbearbeitungen beschränkt zu sein.

Vorteile des Ansatzes:

• Systematisch: Bearbeitungen aktualisieren das gesamte Design-System.
• Iterativ: Der Agent korrigiert, bis die Kriterien erfüllt sind.
• Integriert: Nutzt bestehende Bibliotheken ohne Import externer Assets.
• Skalierbar: Geeignet zur Generierung mehrerer Bildschirme.

Integrationen und Verfügbarkeit des MCP-Servers

Der MCP-Server ist in beliebte Entwicklungsumgebungen integriert:

• Claude Code.
• OpenAI Codex.
• Cursor.
• Copilot CLI.
• VS Code und andere.

Das ist die dritte große KI-Integration von Figma in den letzten Wochen: Claude Code im Februar, Codex im März. Die Figma-Canvas entwickelt sich von einem Design-Tool zu einer kollaborativen Plattform für Menschen und Agenten.

Mid-/Senior-Entwickler können sofort loslegen: MCP-Server verbinden, eine Skill schreiben und den Agenten auf einem echten Projekt ausführen. Die Anforderungen sind minimal – ein Figma-Konto mit Zugriff auf Bibliotheken.

Wichtige Punkte

• API-Erweiterung: use_figma ermöglicht KI, native Figma-Elemente zu erstellen und zu bearbeiten.
• Skills in Markdown: Wandeln Richtlinien in ausführbaren Code für konsistentes Design um.
• Selbstkorrektur: Iterative Bearbeitungen auf Strukturebene, nicht auf Pixelebene.
• Integrationen: Fertige Verbindungen zu Claude Code, Codex, Cursor und IDEs.
• Canvas-Evolution: Kollaborative Arbeit zwischen Designern und KI-Agenten.

— Editorial Team