4 Möglichkeiten, wie wir unseren MCP-Server bei Figma nutzen

Zwei Monate nach dem Öffnen der Arbeitsfläche für Agenten funktioniert der Figma MCP-Server jetzt über Figma Slides, FigJam, Figma Make und den neuen Figma-Agenten. Das bedeutet, dass Decks, FigJam-Whiteboards und Make-Prototypen alle aus einem Prompt heraus erstellt oder aktualisiert werden können. Der MCP-Server unterstützt auch benutzerdefinierte Schriftarten und ermöglicht das Herunterladen von Bildern und Icons – als SVG, PDF, JPG oder PNG – aus Design-Dateien über das neue Tool download_assets.

Hier sind vier Workflows, die Figmates gerade mit diesen neuen Fähigkeiten ausführen.

1. Erstelle und aktualisiere Decks in Figma Slides

Mallory Dean, Designer Advocate bei Figma, pflegt ein stets aktuelles Deck, das KI-Produktveröffentlichungen von Figma abdeckt. Es ist ein ständig aktualisiertes Deck, das sie alle paar Wochen erneuert, damit ihre Präsentationen bei Designvorträgen und Kundenmeetings aktuell bleiben, während wir Produkte versenden.

Nachdem wir den Figma-Agenten gestartet hatten, promptete sie in ihrem Code-Editor: „Aktualisiere mein Figma AI-Deck, um unseren neuen Figma-Agenten einzuschließen. Ziehe Inhalte von Slack, Google Drive, unserem Tastenkürzel-Blog und der Release Notes-Webseite. Gib mir Vorschläge, was aktualisiert werden soll, sowie Ideen für neue Slides.“ Der Agent zog relevante Konversationen, Briefings und Startnachrichten und verwendete dann das Tool use_figmasowie die /figma-use-slides -Funktion in Figma Slides, um das Deck gemäß ihrer Vorlage zu aktualisieren.

Die neuen Folien benötigten noch eine Überprüfung, Bilder als Platzhalter und Textkorrekturen, aber die ersten 80 % des Inhalts waren bereits erledigt, als sie einstieg. Mit unserer neuen Unterstützung für benutzerdefinierte Schriftarten wurden die Schriften in den hochgeladenen benutzerdefinierten Fonts der Agentur gerendert – keine web-sicheren Annäherungen –, sodass das Deck markentreu blieb.

Dieses gleiche Setup erscheint im gesamten Produktentwicklungsprozess, ganz gleich, ob du etwas von Grund auf neu erstellst oder ein bestehendes Dokument aktualisierst. Ein PM erstellt ein Kickoff-Deck. Ein*e Designer*in präsentiert eine Designerkundung. Das Marketingteam erstellt einen GTM-Abo für ein Feature. Der Vertrieb aktualisiert ein kundengerichtetes Deck mit den neuesten Produktänderungen. Die Arbeit ist nicht nur schneller – sie bleibt auch markentreu und basiert auf dem Designsystem deines Teams.

2. Generiere FigJam-Whiteboards aus Live-Daten

Als Produktmanager*in bei Figma leitet Prasant Lokinendi oft Feature-Startup-Workshops. Die Vorbereitung eines ansprechenden FigJam für diese Workshops, bei dem Kontext aus dem gesamten Unternehmen eingebracht und Abschnitte formatiert werden, um zur Session zu passen, kostet Zeit. Deshalb hat er /figjam-builder entwickelt, eine benutzerdefinierte Fähigkeit, die diese Anweisungen trägt, sodass er sie nicht jedes Mal erneut eingeben muss.

Für unseren Make-Voice-to-Text-Start Anfang dieses Jahres veranlasste er seinen Agenten, ein FigJam-Board aus dem Kontext zu generieren, der über Slack, Asana und Notion für die Projektstruktur und Hex für Analytics gezogen wurde. Anstatt mit einem leeren FigJam begann er mit den aktuellsten Daten, einschließlich Produktvision, Insights und wichtigen Entscheidungen.

3. Verschiebe Designs mit Figma Make zwischen Code und Arbeitsfläche

Der MCP-Server funktioniert jetzt auch in Figma Make – der Kreis von Designänderungen bis zur Produktions-PR wird geschlossen, ohne Figma jemals zu verlassen. Iris Lin, eine Produktdesignerin bei Figma, führt diesen Kreislauf bei echter Produktarbeit durch.

Zum Beispiel, als Iris und ein Teamkollege kürzlich einen Beispiel-Audio Editor als Demodatei erstellten, veröffentlichte ihr Teamkollege eine erste Version, aber Iris wollte die Designs aktualisieren. Interaktionen sind in einer statischen Datei schwer darzustellen, also hat sie den Code verzweigt und das echte Ding in Figma Make gebaut: Audiodateien, die man ziehen und in der Reihenfolge ändern kann, ein Popover mit Pegelsteuerungen und ein Abspielkopf, der Scrubbing kann.

Da Iris Änderungen an ihrem Designsystem für ihre Demodatei vornehmen wollte, brachte sie die Make-Vorschau auf die Arbeitsfläche, indem sie im Make-Prompt-Feld Folgendes eingab: „Kannst du die Vorschau hier als Design-Ebenen in Figma zurückbringen?” Der Bildschirm landete auf der Arbeitsfläche, neu aufgebaut mit den relevanten Komponenten aus ihrer Bibliothek. Iris änderte die Audioclip-Komponente, indem sie ihrem üblichen Designmuster auf der Arbeitsfläche folgte und ihr einen klaren Standard-, Hover- und Drag-Zustand gab. Dann schickte sie es in die andere Richtung: „Ziehe diese neuen Zustände in den Code zurück.“ Der Agent las ihre Designänderungen und schrieb alle drei in die Komponente, bereit für den Push zu GitHub als PR.

Dieser Workflow gibt dir die Kontrolle darüber, was versendet wird, und das alles innerhalb von Figma. Der Agent liest und schreibt deine echten Komponenten auf beiden Seiten – genau so, wie Code Connect deine Bibliothek mit dem Produktionscode abbildet. Designentscheidungen, die früher zwischen Übergabe und Überprüfung an Genauigkeit verloren, gelangen jetzt bis zum PR.

4. Teile die Arbeit mit dem Figma-Agenten

Als Produktmanager*in hinter dem Figma MCP Server weiß Yarden Katz, wie man unseren MCP mit vollem Push an seine Grenzen bringt. Ein Szenario, das sie immer wieder aufgreift, ist ein Bildschirm, der nur im Code existiert und keinerlei Arbeitsfläche hat. Das Ziel ist, ihn in Figma zu bringen und dem richtigen Designsystem anzuhängen, damit Designer*innen damit arbeiten können.

Bei der Arbeit in einer Beispiel-App mit einem Login Flow und einem Dashboard gab sie in ihrem Code-Editor ein: „Schiebe dieses Dashboard und den Login-Flow in Figma. Verwende meine vorhandenen Komponenten und Variablen, wenn es welche gibt, und generiere geeignete Komponentensets und Variablen, wenn es keine gibt.“ Das Figma-Plugin wird mit Fähigkeiten geliefert, die dem Agenten Kontext darüber geben, wie Figma verwendet wird. So hat es ihre Bibliothek sowohl in Figma als auch in ihrem Code gelesen und entschieden, was wiederverwendet und was neu erstellt werden muss, anstatt die bereits geleistete Arbeit zu duplizieren.

Es war ein starker erster Durchgang, aber kein fertiger. Das Auto-Layout, die Schriftarten und einige nicht zugeordnete Farben benötigten noch Arbeit. Dort setzte der Figma-Agent an – arbeitet neben ihr auf der Arbeitsfläche mit fundiertem Wissen über ihr Designsystem. Sie forderte ihn auf, das Layout zu korrigieren, den Text zu berichtigen und jede Farbe der richtigen Variable zuzuordnen. Als es an dem Punkt war, wo sie es wollte, brachte sie es über den MCP-Server wieder zurück in den Code. Bei Bedarf konnte sie auch Quellbilder und Icons direkt über den Agenten mit unserem neuen Tool download_assets abrufen, ohne sie separat exportieren zu müssen.

In diesem Anwendungsfall arbeiten der MCP-Server und der Figma-Agent im Team, um zu den endgültigen Entwürfen zu gelangen. Der Server verbindet Figma mit dem Agenten, in dem du dich bereits befindest, und bringt einen reinen Code-Bildschirm auf die Arbeitsfläche, der aus echten Komponenten besteht. Dann übernimmt der Figma-Agent von dort aus. Nativ auf der Arbeitsfläche erforscht er Richtungen, bleibt dabei aber in deinen Komponenten und Token verankert, genau dort, wo du und dein Team entwerfen.

Der Figma-Agent und die Integration der Figma Make-Produktionscodebasis befinden sich derzeit in der geschlossenen Beta-Version. Die Schreibfunktionen im Figma MCP-Server befinden sich in der offenen Beta-Version – sieh dir unseren Einrichtungsleitfaden an, um loszulegen, und wir würden gerne sehen, was du erstellst.