Figma-Codeebenen und Specs: Was sie sind, wie sie funktionieren und wo sie aufhören12 min read

Figma-Codeebenen platzieren laufenden Code auf der Leinwand, und Figma Specs platziert auch Markdown dort. Beide sind am 15. Oktober 2026 unter Config India in die offene Betaphase eingetreten, sodass eine Designdatei nun Rahmen, einen funktionierenden Prototyp und den schriftlichen Plan enthalten kann, nach dem ein Agent baut.

Dieser Leitfaden richtet sich an Designer, PMs und Front-End-Ingenieure, die entscheiden, ob Prototypen- und Spezifikationsarbeiten in Figma verschoben werden sollen. Es behandelt, was die einzelnen Funktionen bewirken, wie man startet, was sie an KI-Credits kosten und wo die Arbeit Figma für Teamkollegen in Claude, ChatGPT oder Cursor verlassen muss.

Im Zeitalter der KI ist Design Code. Um mit KI direkt im Code zu entwerfen oder Ihre Figma-Designs in Code umzuwandeln, verwenden Sie Anima Playground: Beschreiben Sie einen Bildschirm oder beginnen Sie mit einem Figma-Design und iterieren Sie dann weiter mit einer bearbeitbaren App, die Sie in der Vorschau anzeigen und veröffentlichen können.

Entwerfen Sie direkt im Code mit KI

Entwerfen Sie mit KI: Beschreiben Sie einen Bildschirm oder verwandeln Sie Figma-Designs in Code.

Was hat Figma auf der Config India 2026 eingeführt?

Codeschichten und Specs waren die Schlagzeilen, aber sie kamen mit einer Reihe von Agentenfunktionen an. Hier ist der aktuelle Status aus dem Hilfecenter von Figma:

Beide Betas werden über mehrere Wochen veröffentlicht, sodass Sie sie möglicherweise vor oder nach dem Rest Ihres Teams sehen.

Was sind Figma-Codeebenen?

Eine Codeschicht ist eine Schicht, die echten, laufenden Code enthält. Anstelle eines Prototyps, der Interaktionen mit Frame-Links vortäuscht, erhalten Sie einen funktionierenden, Code-gestützten Prototyp, der auf der Leinwand neben Ihren Designs sitzt. Teamkollegen können durchklicken, kommentieren und duplizieren, um gemeinsam eine andere Richtung auszuprobieren.

Figma bietet Ihnen vier Möglichkeiten, eine zu starten:

• Aus einem Entwurf. Wählen Sie Frames aus und bitten Sie den Figma-Agenten, sie in eine Codeschicht umzuwandeln.
• Von einer Live-Website. Erfassen Sie eine Seite mit der Erweiterung Figma Chrome und fügen Sie sie auf der Leinwand ein.
• Aus einem Repo. Importieren Sie eine unterstützte, schlanke Prototyping-Codebasis aus GitHub oder einem lokalen Ordner. Ein GitHub-Import bleibt mit diesem Repository verbunden.
• Von Grund auf. Fügen Sie eine leere Codeebene hinzu und fordern Sie den Agenten zum Erstellen auf.

Sie können auch einen Prototyp, den Sie in einem Codierungstool erstellt haben, über den Figma MCP-Server auf die Leinwand bringen.

Die Bearbeitung erfolgt auf drei Arten. Sie fordern den Agenten auf, kommentieren Frames, um zu zeigen, wo eine Änderung hingehört, oder Sie öffnen den Code-Editor und ändern den Code selbst. Wenn die visuellen Details wichtiger sind als der Code, Extract designs Wandelt Bildschirme von einer Codeebene wieder in bearbeitbare Figma-Frames um. Wenn der Code für Ingenieure bereit ist, können Sie ihn in einen Zweig verschieben und eine Pull-Anfrage öffnen.

Was ist Figma Specs?

Figma nennt Specs „ein natives Zuhause für Kontext“. In der Praxis handelt es sich um ein kollaboratives Markdown-Dokument, das entweder auf der Leinwand einer Figma Design-Datei oder eines FigJam-Boards oder als eigene Spec-Datei gespeichert ist.

Der Einstieg geht schnell:

1. Erstellen Sie über den Dateibrowser ein eigenständiges Spec oder gehen Sie zu figma.com/spec/new.
2. Klicken Sie in einer Designdatei oder einem FigJam-Board in der Symbolleiste auf Spec oder drücken Sie D.
3. Habe bereits ein .md Datei? Ziehen Sie es auf die Leinwand und es wird zu einer Spezifikation.
4. Schreiben Sie mit dem Markdown, den Sie bereits kennen: # für Überschriften, - für Kugeln, [] für To-Dos, > für Anführungszeichen, drei Backticks für Code. Typ / für Bilder, Figma-Einbettungen und Trennwände.

Was eine Spezifikation zu mehr als einer Markdown-Datei macht, ist das, was den Text umgibt. Sie können einen Rahmen, ein FigJam-Board oder einen beliebigen Knoten aus der Leinwand einbetten, sodass die Anforderung und das beschriebene Design nebeneinander bleiben. Teamkollegen kommentieren dazu und der Figma-Agent kann diese Kommentare lesen und darauf antworten.

Specs funktioniert auch außerhalb von Figma. Mit dem Figma MCP-Server verbundene Codierungsagenten können mithilfe von Spezifikationen lesen, erstellen und aktualisieren figma-spec Fähigkeit. Um einen zu übergeben, kopieren Sie den Spezifikationslink in die Eingabeaufforderung Ihres Codierungsagenten und die verknüpften Frames, Diagramme, Codeebenen und Code Connect-Schnipsel werden mitgeliefert.

Warum Markdown zum Übergabeformat wurde

Der eigene Einführungsbeitrag von Figma bringt es auf den Punkt: Markdown ist jetzt das De-facto-Format für den Kontextaustausch mit Agenten. Jeder Programmieragent liest es. Die meisten Produktteams verfügen bereits über Pläne, PRDs und Agentenanweisungen .md Dateien.

Ich habe gelesen, dass Specs Figma ist, das akzeptiert, dass die Übergabe an einen Agenten Text ist, und diesen Text dann zum Mehrspielermodus macht. Ein Einheimischer AGENTS.md oder PRD ist aufgrund des Formats nie fehlgeschlagen. Es scheiterte, weil nur eine Person es bearbeitete, es von den Entwürfen abwich und niemand sehen konnte, welche Version der Agent verwendete.

In Figma behebt Specs dieses Problem. Die offene Frage ist, was außerhalb passiert. Die Einbettungen, Kommentare und Live-Design-Referenzen sind Figma-Funktionen und Agenten erreichen sie über Clients, die im Figma MCP-Katalog aufgeführt sind. Wenn Ihre Ingenieure, der ChatGPT Ihres PM und Claude Ihres Marketingteams alle denselben Plan benötigen, müssen Sie dennoch entscheiden, wo die gemeinsame Kopie gespeichert ist.

Ein praktischer Workflow: vom PRD über den Code-Layer bis zum Pull-Request

Hier sehen Sie, wie die beiden Funktionen in einer echten Funktion zusammenpassen, wobei nur die heutigen Dokumentationen von Figma verwendet werden.

1. Ziehen Sie Ihr PRD auf die Leinwand. Ihr bestehendes .md Datei wird zu einer Spezifikation. Es wird nichts neu geschrieben und für die manuelle Bearbeitung werden keine KI-Credits benötigt.
2. Betten Sie die Frames ein, über die es spricht. Benutzen / um die von PRD beschriebenen Abläufe hinzuzufügen. Prüfer sehen nun die Anforderung und den Bildschirm zusammen.
3. Verwandeln Sie die Schlüsselbilder in eine Codeebene. Wählen Sie sie aus und fragen Sie den Agenten. Wenn Sie bereits über ein Prototyp-Repo verfügen, importieren Sie es stattdessen aus GitHub.
4. Rezension an einem Ort. Sammeln Sie Kommentare zur Spezifikation und zur Codeschicht. Bitten Sie den Figma-Agenten, auf jeden offenen Kommentar mit einem Lösungsvorschlag zu antworten, während sich die Leute zu denselben Threads äußern.
5. Geben Sie die Spezifikation ab. Fügen Sie den Spezifikationslink in Codex, Claude Code oder Cursor ein, das mit dem Figma MCP-Server verbunden ist. Der Agent erhält den Markdown plus den verknüpften Designkontext.
6. Versenden Sie den Prototypcode. Schieben Sie die Änderungen der Codeschicht in einen Zweig und öffnen Sie eine Pull-Anfrage, damit Ingenieure sie vor dem Zusammenführen überprüfen können.

Die Ausgabe ist eine Spezifikation, die Ihr Programmieragent lesen kann, und ein funktionierender Prototyp, den Ihr Team tatsächlich durchgeklickt hat. Testen Sie den generierten Code wie jeden anderen Code. Ein ausgeführter Prototyp ist nicht dasselbe wie produktionsreifer Code.

Wenn der nächste Schritt darin besteht, einen Figma-Entwurf in Code umzuwandeln, den Sie ausführen können, oder in Code über eine Eingabeaufforderung zu entwerfen, ist das die Aufgabe von Anima Playground.

Was kosten Codeschichten und Specs?

• Codeschichten nutzen KI-Credits. Bei kostenpflichtigen Plänen ist das Generieren und Bearbeiten innerhalb einer Codeebene bis zum 4. November 2026 kostenlos. Für die Arbeit anderer Agenten in derselben Eingabeaufforderung werden weiterhin Credits benötigt, und nach dem 4. November werden für alle Aufgaben auf der Codeebene Credits benötigt.
• Specs kann kostenlos geschrieben werden. Wenn Sie eine Spezifikation selbst eingeben und bearbeiten, werden keine Credits verbraucht. Die Verwendung des Agenten mit einer Spezifikation reicht aus. Bewegen Sie den Mauszeiger nach jeder Aufforderung über die Quittung, um zu sehen, was sie kostet.
• Payload und Richtlinien erhöhen die Kosten. Figma weist darauf hin, dass beide dem Agenten mehr Kontext und mehr Arbeit geben, sodass dieselbe Eingabeaufforderung mehr Credits verbrauchen kann.

Grenzen, die Sie überprüfen sollten, bevor Sie planen, sie zu umgehen

• Rollout. Bei beiden Funktionen handelt es sich um offene Betas, die über Wochen hinweg eingeführt werden. Suchen Sie nach dem Code-Symbol in der Symbolleiste Figma Design und der Option Spec im Dateibrowser.
• Pläne. Specs benötigt einen kostenpflichtigen Plan. Starter-Benutzer erhalten Codeebenen, jedoch nicht Specs. Beide benötigen zum Erstellen Bearbeitungszugriff.
• Abmelden. Nur Unternehmensadministratoren können Codeebenen deaktivieren, und zwar nur durch Deaktivieren aller Figma-KI-Funktionen.
• Repo-Größe. Der GitHub-Import ist für einfache Prototyping-Codebasen gedacht, nicht für eine vollständige Produktions-App.
• Entwerfen Sie Systemcode. Das Verbinden Ihres echten Komponentencodes über Codequellen ist noch eine geschlossene Betaversion, sodass Codeebenen Ihre Produktionskomponenten möglicherweise noch nicht verwenden.

Wo Figma aufhört und wo Anima und AgentGrid.io passen

Wenn Ihr gesamtes Team in Figma arbeitet, sind Codeebenen und Specs eine starke Standardeinstellung. Der Prototyp, der Plan und die Kommentare befinden sich in derselben Datei und der Agent von Figma und die Clients von MCP können daran arbeiten.

Zwei häufige Situationen fallen immer noch nicht in diese Datei.

Die Idee begann woanders. Ein Claude Design-Prototyp, eine von ChatGPT generierte HTML-Seite oder eine Live-Site, von der Sie lernen möchten. Der MCP-Server von Figma verfügt jetzt über eine html_to_figma Tool für vom Agenten generiertes HTML. Animas Buddy, unser KI-Design-Agent in Figma, dreht sich ebenfalls HTML, Claude-Artefakte, Bilder und URLs in bearbeitbare Figma-EbenenDies ist nützlich, wenn Sie mit Ihrem Designsystem weiterhin auf diesen Ebenen entwerfen möchten.

Das Ergebnis muss Figma verlassen. Ihre Spezifikation oder Ihr Prototyp muss von Personen außerhalb Ihres Figma-Teams überprüft, von Agenten mehrerer Anbieter bearbeitet oder als Live-Link veröffentlicht werden. Das ist die Aufgabe von AgentGrid.io, erstellt von Anima. Ein Markdown-Artefakt auf AgentGrid.io ist ein Live-Dokument mit automatischer Speicherung, das Personen und verbundene Agenten wie Claude, ChatGPT, Cursor und Grok Bot bearbeiten können, wobei jede Änderung im Versionsverlauf namentlich zugeordnet wird. Ein HTML-Artefakt ist eine laufende Seite, die Sie kommentieren und nach Genehmigung unter einer öffentlichen URL veröffentlichen können. Sie können auch einen Figma-Frame als App-Artefakt in AgentGrid.io importieren. Dieser Import erfolgt unidirektional, sodass spätere Figma-Änderungen nicht synchronisiert werden.

Die beiden konkurrieren nicht um denselben Schritt. Figma ist Eigentümer der Design-Leinwand. AgentGrid.io ist der Ort Markdown und HTML-Artefakte gehen verloren, wenn die Arbeit werkzeuge- und teamübergreifend ist.

Versuchen Sie es mit AgentGrid.io um eine Spezifikation oder einen Prototyp zu behalten, den jeder Agent in Ihrem Team bearbeiten und veröffentlichen kann.

Verwenden Sie jedes Werkzeug wann

• Verwenden Sie Figma-Codeebenen wenn Stakeholder neben den Entwürfen auf einen funktionierenden Prototypen klicken und die Anweisungen nebeneinander vergleichen müssen.
• Verwenden Sie Figma Specs wenn der Plan neben den Frames leben und von einem Codierungsagenten über den Figma MCP-Server gelesen werden soll.
• Benutzen Anima Playground Wenn Sie mit KI direkt im Code entwerfen oder ein Figma-Design in eine bearbeitbare App umwandeln möchten, können Sie eine Vorschau anzeigen und veröffentlichen.
• Benutzen Buddy wenn der Startpunkt außerhalb von Figma liegt und Sie bearbeitbare Ebenen auf der Leinwand wünschen. Einen ausführlicheren Vergleich der Erstellung in Figma mit einem Browser-Builder finden Sie unter Figma Make vs. Anima Playground.
• Verwenden Sie AgentGrid.io wenn die Spezifikation oder der Prototyp von Personen und Agenten werkzeugübergreifend bearbeitet, mit Kommentaren überprüft und als Live-Link veröffentlicht werden muss.

Häufig gestellte Fragen

Was sind Codeebenen in Figma?

Eine Codeebene ist eine Ebene auf der Figma-Zeichenfläche, die echten, ausgeführten Code enthält. Sie können eines aus ausgewählten Frames, einer mit der Figma Chrome-Erweiterung erfassten Live-Website, einem GitHub-Prototyping-Repo oder einer leeren Eingabeaufforderung erstellen, dann darauf klicken, es kommentieren und es duplizieren, um die Anweisungen zu vergleichen.

Ist Figma Specs nur Markdown?

Specs verwendet Markdown für seinen Text und Sie können eine beliebige MD-Datei auf die Leinwand ziehen, um eine zu erstellen. Es fügt diesem Text Figma-Funktionen hinzu: eingebettete Frames und FigJam-Boards, Kommentare und einen Agenten, der diese Kommentare lesen und beantworten kann.

Kosten Figma-Codeebenen AI-Credits?

Ja. Bei kostenpflichtigen Plänen ist das Generieren und Bearbeiten innerhalb einer Codeschicht bis zum 4. November 2026 kostenlos. Für die Arbeit anderer Agenten in derselben Eingabeaufforderung werden weiterhin Credits benötigt, und nach dem 4. November werden für alle Aufgaben auf der Codeebene KI-Credits verwendet.

Können Claude Code, Codex oder Cursor einen Figma Spec lesen?

Ja, wenn sie mit dem Figma MCP-Server verbunden sind. Codierungsagenten können mit dem Skill figma-spec Spezifikationen lesen, erstellen und aktualisieren, und Sie können einen Spezifikationslink in Ihre Eingabeaufforderung einfügen, um den verknüpften Designkontext weiterzugeben.

Welche Figma-Pläne beinhalten Specs?

Specs befindet sich in der offenen Betaversion für kostenpflichtige Pläne: Professional, Organization, Enterprise und Education sowie Government gemäß dem Config India-Artikel von Figma. Es ist nicht im kostenlosen Starter-Plan enthalten. Codeebenen werden für alle Pläne eingeführt, einschließlich Starter.