Der Entwurfsprozess von Figma bis Shopify ist der Workflow, bei dem ein Interface in Figma gestaltet und in die Liquid-Templates eines Shopify-Themes übertragen wird. Ein Design von Grund auf umfasst vier Schritte: Zielgruppe und Wireframe, visuelles Design und Prototyping, Design Tokens und Übertragung in Code. Ein fertiges Theme beschleunigt den Start, KI-Werkzeuge wie Figma MCP automatisieren die Code-Übertragung weitgehend.
In den Shopify-Designprojekten, die wir bei Nodus Works betreuen, haben wir eines immer wieder gesehen: Beim Weg von Figma zu Shopify geht die meiste Zeit nicht in der Designphase verloren, sondern dann, wenn das Design in Code übertragen wird. Der Entwurfsprozess von Figma bis Shopify ist ein durchgängiger Workflow. Ein Interface-Design durchläuft Wireframe, visuelles Design und Prototyping und wird anschließend in Shopifys Template-Sprache Liquid übertragen. In diesem Leitfaden zeigen wir, wie Sie den Prozess mit einem Figma-Design von Grund auf durchführen, wie Sie ihn mit einem fertigen Theme beschleunigen und wie neue KI-Werkzeuge wie Figma MCP diesen Prozess verändern.
Was ist der Entwurfsprozess von Figma bis Shopify?
Der Entwurfsprozess von Figma bis Shopify ist der Workflow, bei dem ein Interface in Figma gestaltet und anschließend in ein Shopify-Theme (Liquid-Templates) übertragen wird. Figma vereint Wireframe, visuelles Design und Prototyping in einem Werkzeug. Auf der Shopify-Seite muss dieses Design dagegen in HTML-, CSS- und Liquid-Code umgewandelt werden. Die Brücke zwischen diesen beiden Werkzeugen ist der entscheidende Punkt, der bestimmt, wie originalgetreu das Design in Code übertragen wird.
Schnellstart: Fertiges Theme oder Figma-Design von Grund auf?
Nicht jedes Projekt muss mit einem Figma-Design von Grund auf beginnen. Eines der mehr als 800 fertigen Themes im Shopify Theme Store bietet, ähnlich wie ein Prototyp, einen schnellen Ausgangspunkt. Wenn Sie ein fertiges Theme über die Schaltfläche „Try theme“ (Theme ausprobieren) im Theme Store zu Ihrem Shop hinzufügen und darauf Ihre Markenfarben und Inhalte anpassen, erzielen Sie innerhalb weniger Tage Ergebnisse, deutlich schneller als mit einem Designprozess von Grund auf. Mit unserem Shopify Themen-Finder grenzen Sie in wenigen Fragen das passende Theme für Ihre Branche ein.
Die folgende Tabelle vergleicht beide Ansätze nach Zeitaufwand, Kosten und Tiefe der Anpassung.
Tipp: Mit einem fertigen Theme zu starten und nach und nach eigene Sections hinzuzufügen, ist ein praktischer Weg, beide Ansätze zu verbinden. Für die meisten Marken ist diese Reihenfolge richtig: zuerst mit einem fertigen Theme schnell launchen und, sobald genügend Verkaufsdaten vorliegen, die Bereiche in Figma neu gestalten, die die Conversion senken.
Der Entwurfsprozess von Figma bis Shopify Schritt für Schritt
Wenn Sie sich für ein Figma-Design von Grund auf entscheiden, besteht der Prozess aus vier Schritten: Zielgruppe und Wireframe, visuelles Design und Prototyping, Festlegen der Design Tokens und Übertragung in Code.
Schritt 1: Zielgruppe und Wireframe
Bevor Sie mit dem Design beginnen, sollten Sie klären, über welches Gerät und mit welcher Absicht Ihre Zielgruppe kommt. In der Wireframe-Phase wird das Seitengerüst (Bereiche wie Hero, Produktraster und Footer) mit wenig Detail angelegt. Entscheidungen über Farben oder Typografie fallen in dieser Phase noch nicht.
Schritt 2: Visuelles Design und Prototyping
Nachdem das Wireframe freigegeben ist, entsteht das vollständige visuelle Design mit Farbpalette, Typografie und echten Produktbildern. Mit der Prototyping-Funktion von Figma bauen Sie einen klickbaren Ablauf auf und können so das Nutzererlebnis des Designs testen, bevor eine Zeile Code geschrieben wird.
Schritt 3: Design Tokens festlegen
Wenn Sie Farbcodes, Typografie-Skalen und Abstände (Spacing) in Figma als Variablen definieren, wirkt sich das direkt auf die Genauigkeit der Übertragung in Code aus. Sind diese Werte in der Figma-Datei nicht klar definiert, muss der Entwickler oder das KI-Werkzeug sie schätzen, und es entstehen Abweichungen zwischen Design und Code.
Schritt 4: Übertragung von Figma in Code
Im letzten Schritt wird das Design in HTML, CSS und Shopifys Liquid-Sprache umgewandelt. Traditionell geschieht diese Übertragung von Hand; Werkzeuge wie Figma MCP automatisieren diesen Schritt inzwischen jedoch zu einem großen Teil.
Mit Figma MCP das Design direkt in Shopify-Code umwandeln
Der offizielle Figma-MCP-Server (Remote- oder Desktop-Variante) überträgt die Struktur Ihrer Figma-Datei (Node-Baum, Varianteninformationen, Layout-Constraints, Design Tokens und Asset-Referenzen) über das Model Context Protocol direkt an KI-Coding-Werkzeuge wie Claude Code, Cursor, Windsurf oder VS Code Copilot. Anders als ältere Werkzeuge, die Screenshots interpretieren, liest MCP die tatsächliche Struktur des Designs. Dadurch hält sich der erzeugte Code enger an das Design.
Speziell für Shopify kann der Entwickler in Figma einen bestimmten Frame auswählen und das KI-Werkzeug per Prompt für diesen Bereich Liquid-Code und ein Section-Schema erzeugen lassen. Die einstellbaren Felder im Schema (Image Picker, Textfelder) werden dabei ebenfalls automatisch angelegt. In der Figma Community gibt es außerdem spezielle Plugins wie „Shopdev: Figma to Shopify Liquid“, die diesen Ablauf unterstützen.
Wichtiger Hinweis: Der Figma-MCP-Server ist allgemein verfügbar; die Funktionen zum Schreiben auf die Arbeitsfläche (Canvas) befinden sich noch in der offenen Beta. Lassen Sie den erzeugten Liquid-Code und das Section-Schema unbedingt von einem Entwickler prüfen, bevor sie live gehen. Selbst wenn das KI-Werkzeug die Design Tokens korrekt liest, kann es das Verhalten der Section im Shopify-Adminbereich (etwa bedingte Sichtbarkeit oder die Reihenfolge der Blöcke) nicht immer richtig vorhersagen.
Worauf Sie bei der Übertragung eines Figma-Designs zu Shopify achten sollten
KI-gestützte Übertragungswerkzeuge erhöhen zwar das Tempo, drei Punkte sollten Sie aber von Hand prüfen: den Test der mobilen Ansicht, die Barrierefreiheit (Farbkontrast, Alt-Texte) und ob das Section-Schema für den Shopbetreiber verständlich ist. Auch wenn der Liquid-Code einer Section korrekt funktioniert, kann der Shopbetreiber diesen Bereich nicht richtig bearbeiten, wenn die Bezeichnungen der Einstellungen im Adminbereich in technischem Jargon bleiben.
FAQ
Wie lange dauert die Übertragung eines Designs von Figma zu Shopify? Mit einem fertigen Theme dauert es einige Tage. Bei einem Figma-Design von Grund auf sind es je nach Umfang und Freigabeprozess 2-6 Wochen. Werkzeuge wie Figma MCP beschleunigen die Übertragung in Code, verkürzen aber nicht die Design- und Freigabephase.
Was ist Figma MCP und wie funktioniert es? Der offizielle Figma-MCP-Server (Remote- oder Desktop-Variante) überträgt die Struktur Ihrer Figma-Datei über das Model Context Protocol an KI-Coding-Werkzeuge. Statt eines Screenshots liest das Werkzeug die tatsächliche Node-Struktur, die Design Tokens und die Layout-Constraints des Designs und erzeugt so Code, der sich enger an das Design hält.
Schadet es der Markenidentität, mit einem fertigen Shopify-Theme zu beginnen? Nein, bei richtiger Konfiguration nicht. Wenn Farbpalette, Typografie und Section-Reihenfolge des fertigen Themes an Ihre Marke angepasst werden, bietet es einen schnellen Ausgangspunkt, ähnlich wie ein Prototyp. Mit der Zeit kommen eigene Sections hinzu, und die Markenidentität tritt deutlicher hervor.
Kann ich ein Figma-Design ohne Programmierkenntnisse zu Shopify übertragen? Teilweise. Figma MCP und ähnliche Werkzeuge automatisieren die Codeerzeugung. Um sicherzustellen, dass der erzeugte Liquid-Code und das Section-Schema korrekt funktionieren, brauchen Sie jedoch technisches Grundwissen oder die Unterstützung eines Entwicklers.
Fazit
Der Entwurfsprozess von Figma bis Shopify läuft heute nicht mehr nur über Handarbeit im Code. Er kann in drei unterschiedlichen Geschwindigkeiten ablaufen: von Hand, mit einem fertigen Theme als Schnellstart oder mit KI-Werkzeugen wie Figma MCP. Welchen Weg Sie auch wählen, nur klar in Figma definierte Design Tokens und eine Prüfung des erzeugten Codes vor dem Livegang sichern die Übereinstimmung zwischen Design und Code.
Wenn Sie Ihr Figma-Design in einen Shopify-Shop verwandeln möchten, der zu Ihrer Markenidentität passt, sprechen Sie mit unserem Team über unseren Service für E-Commerce-Branding. Wenn Sie einen Shopify-Shop von Grund auf aufbauen möchten, begleitet unser Service für die Einrichtung von Shopify-Shops den gesamten Prozess vom Design bis zum Livegang.
