Figma stellt Design-Agenten vor

• Ein speziell für Figma entwickelter Design-Agent, der direkt auf der Canvas arbeitet, ist erschienen und bietet eine Umgebung, in der Designer ohne Tool-Wechsel zwischen KI-Zusammenarbeit und direkter Bearbeitung wechseln können
• Er wurde darauf feinabgestimmt, den Kontext von Designsystemen wie Komponenten, Tokens, Standards und Best Practices tief zu verstehen, und erzeugt dadurch Ausgaben, die für die Bearbeitung von Figma-Dateien optimiert sind
• Prompts lassen sich auf jeder Design-Ebene starten, mit Parallel Prompts (parallel prompts) können mehrere Ideen gleichzeitig erkundet werden, und Agent sowie Nutzer können gleichzeitig bearbeiten
• Einsetzbar zur Automatisierung repetitiver Nebenarbeiten (busywork) wie Massenänderungen von Variablen, Austausch von Komponenten, Umstellung auf Dark Mode oder Ersetzen von Lorem Ipsum
• Die Beta wird in den kommenden Wochen schrittweise ausgerollt, während der Beta werden keine Credits verbraucht, verfügbar für Full-Seat-Nutzer der Pläne Professional, Organization und Enterprise

---

Hintergrund und Positionierung

• Die zentralen Elemente, die Designer brauchen, sind Erkundung, Experimentieren, Zusammenarbeit und Präzision, und Figma wurde als Multiplayer-Canvas entwickelt, um genau das zu ermöglichen
• Während Teams Agenten-Tools einführen, entstehen falsche Gegensätze (false choices) wie „Geschwindigkeit vs. Präzision“ oder „KI-Generierung vs. direkte Manipulation“, doch laut Figma muss man sich nicht für eines von beidem entscheiden
• Anfang des Jahres wurde die Figma-Canvas für Drittanbieter-Agenten geöffnet, nun folgt der direkt in Canvas und linke Seitenleiste (left rail) integrierte Figma-Agent
• Ziel ist es, einen Agenten zu bauen, der in Figma zu Hause ist und nativ zur Arbeitsweise von Teams passt; dafür wird Figma selbst für das Modell lesbar gemacht (legible), in einem Ausmaß, das mit Drittanbieter-Tools nicht möglich ist

Figma-Agent vs. MCP-Server

• Figma-Agent

  • Wird beim Arbeiten auf der Canvas verwendet, ist integriert und verfügt über zusätzlichen Kontext zum Designsystem
  • Ist dauerhaft auf der Canvas präsent, ohne separates Setup oder Kontextwechsel

• MCP-Server

  • Wird verwendet, um Code in die Canvas zu holen (pull) oder Designs wieder als Code auszugeben (push)
  • Übernimmt zusammen mit use_figma den Workflow zwischen Code und Canvas

Zentrale Funktionsweise

• Arbeitet als echter Kollaborateur (true collaborator) direkt neben der Canvas und gemeinsam mit dem Team in derselben Datei
• Wurde für die Bearbeitung von Figma-Dateien feinabgestimmt, erzeugt Ausgaben passend zum Designkontext und ist so konzipiert, dass direkte Manipulation möglich bleibt und Nutzer die Kontrolle behalten
• Anders als der MCP-Server ist er direkt auf der Canvas präsent, sodass kein separates Setup und kein Kontextwechsel nötig sind
  • Prompts können von jeder Design-Ebene aus gestartet werden
  • Unterstützt Parallel Prompting (parallel prompting), um mehrere Ideen gleichzeitig auszubreiten
  • Während der Agent arbeitet, können Nutzer parallel weiter bearbeiten und iterieren

Mehr Richtungen erkunden (Explore more directions)

• Die besten Designs entstehen nicht mit der ersten Idee oder dem ersten Prompt; Richtungen auszuloten, Ansätze zu vergleichen und zu iterieren ist der Kern von Design

• In die Breite gehen (Go wide)

  • Für dasselbe Problem schnell unterschiedliche stilistische Ansätze erzeugen
  • Mehrere Checkout-Flows vergleichen, die jeweils auf andere Geschäftsziele optimiert sind
  • Drei unterschiedliche Informationsarchitekturen anfordern

• In die Tiefe gehen (Go deep)

  • Eine Richtung auswählen und iterieren, Implementierungen vergleichen und bestehende Designs erneut prüfen, während die Übereinstimmung mit dem Designsystem erhalten bleibt
  • Die am häufigsten und zuletzt verwendeten Komponenten als Ausgangspunkt nutzen
  • Durch Auswahl bestimmter Bibliotheken und @-Mentions für Tokens, Variablen und Komponenten die Ausgaberichtung steuern — wie eine Art Kurzbefehle für das Designsystem

• Zusammenspiel mit Figma Make

  • In Figma Design mit dem Agenten Design-Layer erzeugen, um die Absicht von Flow, Status, Copy und Struktur klarer zu machen → an Make senden, um Code-Layer zu erzeugen → wieder in Figma Design einbetten
  • Oder in Figma Make starten → Frames nach Figma Design kopieren → mit dem Agenten iterieren → erneut an Make senden
• Je leichter sich mit KI Designs erzeugen lassen, desto größer wird das Risiko, mittelmäßige Ergebnisse auszuliefern; der Agent ist darauf ausgelegt, mehr Richtungen zu erkunden, um die richtige auszuwählen
• Sobald eine Richtung feststeht, ist direkte Handarbeit oft schneller, natürlicher und token-effizient (token efficient)

Nebenarbeiten automatisieren (Automate busywork)

• Da der Agent auf der Canvas mitarbeitet, kann man frei zwischen KI-Unterstützung und direkter Bearbeitung wechseln
• Automatisiert mühsame Aufgaben, die Kontext und Präzision erfordern
  • Variablennamen für mehr Konsistenz gesammelt umbenennen
  • Dieselbe Komponente über mehrere Screens hinweg ersetzen
  • Padding-Änderungen wiederholt auf einen gesamten Flow anwenden
  • Viele Frames mit realistischen Inhalten füllen

• Konkrete Einsatzbeispiele

  • Typografie in der gesamten Datei aktualisieren
  • Lorem-Ipsum-Texte und Bilder in einem ganzen Grid ersetzen
  • Alle Chip-Komponenten in den Active-Zustand versetzen
  • Screens in den Dark Mode umstellen, ohne Fill und Kontrast manuell anzupassen

• Besonders nützlich für Betreiber von Designsystemen

  • Beschreibungen, Tags und Anwendungsfälle in der gesamten Bibliothek gesammelt aktualisieren
  • Naming Conventions standardisieren
  • Komponenten mit allen Zuständen und Varianten dokumentieren
  • Qualitätsrichtlinien über geteilte Beispiele aus Team-Arbeiten vermitteln

• Übergabe an den Figma-MCP-Server

  • Arbeit kann ohne Verlust an Genauigkeit zwischen Code und Figma verschoben werden
  • In Code starten → per Code-to-Canvas-Funktion nach Figma holen, dort iterieren oder das Designsystem anwenden → wieder an den MCP-Server senden, wobei alles synchron bleibt

Feedback besser nutzen (Do more with feedback)

• In Designarbeit sammeln sich Kommentare und über die Datei verteiltes Feedback an, etwa Crit-Notizen, Reaktionen von Stakeholdern und offene Fragen
• Da das ganze Team in derselben Datei arbeitet, hat der Agent den Kontext bereits; es fühlt sich nicht so an, als würde man einen neuen Kollaborateur briefen, sondern eher, als würde man Gedanken mit jemandem ordnen, der schon im selben Raum ist

• Einsatzweisen

  • Feedback zusammenfassen, Themen identifizieren und Eingaben in nächste Schritte überführen
  • Designs aus verschiedenen Perspektiven einem Belastungstest unterziehen — etwa die Reaktion eines auf Umsatz fokussierten VP modellieren
  • Lange Kommentar-Threads in einen umsetzbaren Plan umwandeln
  • Vor einer Kritikrunde (crit) Gedanken ordnen und die Richtung schärfen

Roadmap und Bedingungen für die Einführung

• In den kommenden Monaten liegt der Fokus auf besserer Unterstützung für Designsysteme, UX-Verbesserungen, einer erweiterten dateiübergreifenden Suche und zusätzlichen Anpassungsmöglichkeiten

• Bedingungen der Beta-Einführung

  • Schrittweiser Beta-Rollout über die kommenden Wochen
  • Während der Beta werden keine Credits verbraucht, mit allgemeiner Verfügbarkeit (GA) gelten dann AI-Credits
  • Eine Eintragung in die Warteliste ist möglich, garantiert aber keinen Zugang

• Verfügbare Pläne

  • Für Full-Seat-Nutzer der Pläne Professional, Organization und Enterprise
  • Collab- und Dev-Seats können den Agenten in Drafts verwenden
  • Starter-, Education- und Government-Pläne sind ausgeschlossen