Leitfaden: Figma zu Code mit AI und MCP

Von Figma zu Code: Eine Schritt-für-Schritt-Anleitung mit KI

Um den Übergang vom Figma-Design zum Code zu automatisieren, verwenden Sie den Dev Mode mit MCP. Voraussetzungen: Zugriff auf Figma Dev Mode, einen KI-Assistenten wie Cursor basierend auf GPT-4o oder einem ähnlichen Modell, Verständnis grundlegender Layout-Prinzipien und Fähigkeiten im Erstellen präziser Prompts. Der Prozess basiert auf einer systematischen Frame-Struktur für Wiederholbarkeit.

Frame-Namensstruktur:

%Seitenname %Typ [%Bildschirmbreite · %Theme]

Beispiel: Startseite Standard [1920 · Hell]. Breakpoints: 1920px, 1280px, 768px, 375px. Themes: hell/dunkel.

Vorbereitung Ihres Layouts

Befolgen Sie fünf Schlüsselregeln, um KI-Fehler zu minimieren.

Regel 1: Inhalt und Stile. Fügen Sie finale Texte und Grafiken in Container der tatsächlichen Größe ein. Erstellen Sie Stile: Hell/Primär, Dunkel/Primär.

Regel 2: Blockstruktur. Verwenden Sie separate Frames für Blöcke (Hero, Menü, Footer), nicht nur ganze Seiten. Dies ermöglicht lokalisierte Bearbeitungen.

Regel 3: Größenänderungslogik. Erstellen Sie einen Layout-Frame mit visuellen Indikatoren: Pfeile für Dehnung, feste Größen, Min-/Max-Breite, Umbruch.

Regel 4: UI-Zustände. Separate Frames für Hover, Aktiv, Deaktiviert. Zeigen Sie den vollständigen Kontext, z.B. Menü Hover [1920 · Hell].

Regel 5: Themes. Duplizieren Sie Frames für hell/dunkel mit Farben aus den Stilen.

Aktivieren Sie MCP: Dev Mode → Inspect → MCP (Serverstatus: Aktiviert, Bildquelle: Herunterladen). Erwarten Sie niedrigqualitative SVG/Raster – ersetzen Sie manuell oder via Prompts.

Schritte zur Code-Übertragung

Arbeiten Sie schrittweise und vermeiden Sie globale Anfragen. Die KI sollte Figma-MCP-Ebenen analysieren, nicht Screenshots.

Schritt 1: Projektgrundlage

Erstellen Sie einen initialen Prompt:

Wir bauen eine Website über [Beschreibung]. Figma MCP: [Link]. Breakpoints in Frame-Namen: [Liste]. Ressourcen aus Figma. Schritte: Fragen klären.

Die KI analysiert und unterteilt es in Schritte. Fügen Sie Navigation hinzu.

Schritt 2: Agent mit Regeln

Generieren Sie AGENTS_BASE.md, um den Stil festzulegen:

• Komponenten wiederverwenden.
• Responsives Design nach Breakpoints.
• Retina-Unterstützung (@2x).
• Kein Code-Überschreiben ohne Bestätigung.

Schreiben Sie auf Russisch oder Englisch – die Qualität ändert sich nicht.

Schritt 3: Iterative Zusammenstellung

Verfeinern Sie Blöcke nach Frames:

In Feature [768 · Hell] Galerie mit horizontalem Scrollen: [Link]. +20px Padding unten für Scrollleiste.

Gehen Sie nach Korrekturen zum nächsten Block.

Schritt 4: Asset-Ersetzung

• Manuell: Dateien umbenennen.
• Via KI:

> In Hero, ersetzen Sie [id] mit [email protected].

> In Feature List: ic_unlimList_BENEFIT_24 (32x32px) statt Platzhalter.

Schritt 5: Funktionalität

Fügen Sie isoliert hinzu:

Lokalisierung: Dropdown RU/EN via Button [Name]. Fragen klären.

Unterstützung: responsiv, Retina, Themes, Animationen.

Wichtige Erkenntnisse

• Systematische Frame-Namensgebung gewährleistet Wiederholbarkeit.
• Visuelle Layout-Anweisungen kompensieren KI-Schwächen im Auto-Layout.
• Ein schrittweiser Ansatz mit einem Agent minimiert Code-Regressionen.
• Manuelle Asset-Ersetzung ist für Qualität entscheidend.
• Fokus auf Details: Übernehmen Sie nicht alle Rollen gleichzeitig, um Burnout zu vermeiden.

— Editorial Team