Figma Code Layers: Bezahlpläne bis 4. November gratis, dann 250+ Credits je Layer aus Frames

Was hat Figma am 15. Oktober angekündigt?

Figma hat auf der Config India sieben Neuerungen veröffentlicht, die wichtigste davon: Code Layers sind in der Open Beta. Laut den Figma Release Notes zur Config India 2026 kamen dazu:

MCP steht für Model Context Protocol: ein offener Standard, über den KI-Assistenten und Coding-Agenten auf Figma-Dateien zugreifen. Laut Figmas Übersichtsbeitrag „Build by design“ stehen Code Layers allen Plänen offen, und zu den neuen MCP-Partnern gehören unter anderem OpenCode, Junie von JetBrains und der KI-Browser Dia.

Was sind Figma Code Layers genau?

Ein Code Layer ist ein funktionierender Prototyp aus echtem Code, der als Ebene neben deinen Designs auf dem Canvas liegt. Du kannst ihn kommentieren, duplizieren und Versionen nebeneinanderlegen wie jeden anderen Frame. Laut Figma-Beitrag zu Code Layers gibt es fünf Wege hinein:

• Aus einem Design: vorhandene Frames in einen klickbaren Prototyp umwandeln
• Aus GitHub oder einem lokalen Ordner: allerdings nur eine „supported, lightweight prototyping codebase“, keine ausgewachsene Produktiv-App
• Aus einer Website: eine laufende Seite mit der Figma-Erweiterung für Chrome einfangen
• Aus einem Coding-Tool: Prototypen über den MCP-Server herüberholen
• Per Prompt: den Figma Agent bauen oder ändern lassen

Zwei Funktionen machen den Unterschied zu bisherigen Prototypen. „Extract designs“ verwandelt Screens aus dem Code zurück in editierbare Figma-Frames, damit Designer visuelle Details im gewohnten Werkzeug anpassen. Und Änderungen lassen sich auf einen Branch pushen und als Pull Request ins Entwicklerteam geben. Der Weg von der Idee zum Code ist damit keine Einbahnstraße mehr.

Was kosten Code Layers ab dem 5. November?

Code Layers verbrauchen AI-Credits, nur bis einschließlich 4. November ist das Erstellen und Bearbeiten auf bezahlten Plänen gratis. Die Figma-Hilfe zu AI-Credits nennt Richtwerte, alle als Mindestwert mit Plus:

Die rechte Spalte ist eine Obergrenze, kein Versprechen: Komplexere Aufgaben kosten mehr, und Code Layers teilen sich den Topf mit Figma Make und dem Figma Agent. Credits verfallen jeden Monat und werden nicht in den Folgemonat übertragen. Organization-Seats haben 3.500, Enterprise-Seats 4.250 Credits im Monat. Wie wir die Kontingente für den Figma Agent durchgerechnet haben, steht in unserem Beitrag Figma Agent kostet jetzt Credits.

Ein Haken für kleine Teams: Im kostenlosen Starter-Plan und für View Seats gilt ein Tageslimit von 150 Credits. Ein einzelner Code Layer aus Frames liegt mit 250+ schon darüber. Ob Figma die Aktion dann abbricht oder auf den nächsten Tag verschiebt, sagt die Hilfe nicht. Unsere Einschätzung: Ernsthaft arbeiten lässt sich mit Code Layers nur mit einem Full Seat in einem bezahlten Plan.

Was bringen Specs und Payload zusätzlich?

Specs holen das Konzeptdokument auf den Canvas. Laut Figma-Beitrag zu Specs legst du eine Spec mit der Taste D an oder ziehst eine vorhandene .md-Datei auf den Canvas. Darin lassen sich Frames und FigJam-Boards einbetten, der Figma Agent liest Kommentare und antwortet darauf. Für die Übergabe kopierst du den Link der Spec in den Prompt deines Coding-Agenten, der über MCP auch die verlinkten Frames und Code Layers liest. Damit liegen Briefing, Entwurf und Prototyp an einem Ort statt verteilt über Notion, Figma und Tickets.

Payload ist ein Open-Source-CMS, dessen Team zu Figma gewechselt ist. Laut Figma-Beitrag zu Payload legt Figma Make jetzt beim Prompten einer App gleich Datenbank, Dateispeicher, Login und ein Admin-Panel an, erreichbar unter /admin. Das Hosting dafür ist in der Beta kostenlos, Preise will Figma vorher ankündigen. Für Landingpages mit Blog ist das interessant, als Ersatz für eine gepflegte Unternehmenswebsite mit SEO-Anforderungen würden wir es heute noch nicht einsetzen: Zu Domains, Export und Kosten im Regelbetrieb schweigt der Beitrag.

Was heißt das für dein Team?

Auf bezahlten Plänen sind die nächsten drei Wochen ein kostenloses Testfenster, das du gezielt nutzen solltest. Unsere Empfehlung für die freie Phase:

1. Einen echten Flow umwandeln: Nimm einen Flow mit drei bis fünf Screens aus einem laufenden Projekt und mach daraus einen Code Layer. Prüfe, ob Abstände, Schriften und Komponenten aus deinem Design System sauber ankommen.
2. Rückweg testen: Ändere im Code Layer etwas per Prompt, zieh die Screens mit „Extract designs“ zurück und prüfe, ob die Frames sauber benannt und weiter nutzbar sind.
3. Übergabe proben: Schreib eine Spec zum Flow und gib den Link deinem Entwicklungsteam oder einem Coding-Agenten. Miss, wie viele Rückfragen weniger entstehen.

Zähle dabei mit, wie oft du Code Layers erstellst und änderst. Rechne das mit den Richtwerten oben auf einen normalen Monat hoch: Dann weißt du vor dem 5. November, ob ein Professional-Seat reicht oder ob du Credits zukaufen musst.

Unsere Einschätzung: Code Layers ersetzen keine Entwicklung, sie verkürzen den Weg vom Entwurf zum testbaren Prototyp. Für Stakeholder-Abnahmen und Nutzertests ist das ein echter Gewinn. Wer schon mit Lovable oder Make Prototypen baut, bekommt hier vor allem den Vorteil, dass Design und Prototyp in derselben Datei leben. Wann sich ein Prototyp lohnt und wann ein MVP, haben wir in MVP entwickeln 2026 aufgeschlüsselt. Wenn du Hilfe beim Aufsetzen eines Design Systems willst, das auch für Agenten taugt: Sprich uns an.