Figma-Designsystem und Übergabe an Webflow oder Entwickler

Kurzantwort: Eine Übergabe ist sauber, wenn das Figma-Designsystem und die Umsetzung dieselbe Struktur haben. Komponenten in Figma werden zu Komponenten in Webflow oder im Code, Variablen für Farben, Schriften und Abstände werden eins zu eins übertragen, und Namen folgen einer festen Konvention. Dazu gehören dokumentierte Zustände, Breakpoints und ein klarer Freigabestatus. Du erkennst eine gute Agentur daran, dass sie diese Punkte vor dem Start erklären kann, nicht erst bei der Abnahme.

Das Wichtigste in Kürze:

• Ein Designsystem ist mehr als eine Komponentenbibliothek: Es besteht aus Regeln, Variablen, Komponenten und Dokumentation.
• Figma und Webflow haben beide Variablen mit Collections und Modes, aber nicht dieselben Typen. Die Zuordnung muss geplant werden.
• Der Status "Ready for dev" zeigt Entwicklern, was freigegeben ist. Er ersetzt keine Spezifikation von Zuständen und Verhalten.
• In Webflow sind Komponenten mit Props, Slots und Varianten sowie eine Klassenkonvention wie Client-First das Gegenstück zur Figma-Bibliothek.
• Prüf die Übergabe an einem konkreten Bauteil, nicht an einer Präsentation.

Inhalt

• Was gehört in ein Designsystem?
• Figma: Komponenten, Variablen und Dev Mode
• Webflow: Variablen, Komponenten und Libraries
• Figma und Webflow im Vergleich
• Übergabe an andere Entwickler und Systeme
• Die Übergabe in sieben Schritten
• Checkliste: Ist die Übergabe sauber?
• Fünf Fragen an jede Agentur
• Häufige Fehler
• Wie wir das umsetzen
• Häufige Fragen

Was gehört in ein Designsystem?

Ein Design-System ist eine gemeinsame Sprache zwischen Design und Entwicklung: dieselben Farben, Schriften, Abstände und Bausteine, mit klaren Regeln, wann man was einsetzt. Die Bibliothek in Figma ist nur ein Teil davon.

Ein brauchbares System für eine Unternehmenswebsite besteht aus vier Ebenen:

Ebene	Inhalt	Beispiel
Grundlagen	Farben, Typografie, Abstände, Radien, Schatten, Raster	Primärfarbe, Überschrift Stufe 2, Abstand groß
Bausteine	wiederverwendbare Komponenten mit Zuständen	Button (Standard, Hover, Fokus, deaktiviert), Karte, Navigation
Muster	Kombinationen aus Bausteinen für wiederkehrende Aufgaben	Hero, Referenz-Raster, FAQ-Block, Footer
Regeln	Wann, wo und wie man etwas einsetzt	maximal ein Primär-Button pro Section, Kontrast, Bildformate

Wer bei der Übergabe nur eine Figma-Bibliothek liefert, überlässt die Regeln dem Raten. Wer nur ein PDF liefert, überlässt die Struktur dem Zufall. Gut ist beides: eine saubere Bibliothek und kurze, lesbare Regeln, am besten im selben Dokument.

Für die meisten Unternehmenswebsites reicht ein schlankes System. Ein Konzern mit mehreren Marken und Teams braucht mehr Governance, ein Mittelständler mit einer Website vor allem Konsequenz. Eine Agentur für UX und UI sollte beides erklären können, mehr dazu im Ratgeber UX/UI-Agentur auswählen.

Figma: Komponenten, Variablen und Dev Mode

Variablen, Collections und Modes

Figma-Variablen speichern wiederverwendbare Werte. Laut Figma-Hilfe gibt es sechs Typen: Color, Number, String, Boolean, Timing und Easing. Variablen liegen in Collections, die zusammengehörige Werte ordnen und in Gruppen gegliedert werden können. Eine Collection fasst bis zu 5.000 Variablen. Ein Mode ist eine Liste von Werten, ein Wert pro Variable, etwa für helles und dunkles Farbschema, verschiedene Sprachen oder Gerätegrößen (Figma Hilfe: Variables, Collections, Modes).

Für die Übergabe heißt das: Wenn ein Designer Farben nur als Stile oder, schlimmer, als lose Hex-Werte angelegt hat, fehlt die Verbindung zu den Variablen, die Entwickler später brauchen. Gute Praxis ist ein Zwei-Stufen-Aufbau. Die erste Stufe hält Rohwerte wie blau-500, die zweite gibt ihnen Bedeutung wie farbe-primaer oder text-standard. Komponenten nutzen nur die zweite Stufe.

Komponenten und Varianten

Komponenten in Figma haben Varianten und Properties. Entwickler sehen sie im Inspect-Panel, einschließlich der Informationen zu Varianten und der Änderungen gegenüber der Hauptkomponente (Figma Hilfe: Dev Mode). Damit eine Komponente übersetzbar ist, braucht sie:

• einen sprechenden Namen mit festem Muster, etwa Button/Primär oder Karte/Referenz,
• alle Zustände als Varianten: Standard, Hover, Fokus, aktiv, deaktiviert, wo es sie gibt,
• saubere Properties für Text, Icons und Sichtbarkeit,
• Layout, das mitwächst, also Auto Layout statt fest positionierter Ebenen. Texte werden länger, Bildschirme enger.

Dev Mode und "Ready for dev"

Dev Mode ist der Entwickler-Arbeitsbereich in Figma. Dort lassen sich Eigenschaften und Code-Snippets einsehen, Assets exportieren, Änderungen vergleichen und die Übergabe steuern. Designer markieren Komponenten, Frames und Sections mit dem Status "Ready for dev", Entwickler mit passendem Seat werden benachrichtigt, wenn ein Design erneut als bereit markiert wird (Figma Hilfe: Dev Mode). Dev Mode steht in den Tarifen Professional, Education, Organization, Government und Enterprise zur Verfügung. Die Seite zum Produkt nennt außerdem die Funktion "Compare changes" und Code Connect (Figma: Dev Mode).

Code Connect verknüpft Figma-Komponenten mit echtem Produktionscode, sodass Entwickler diesen Code statt generierter Snippets sehen. Es ist für Teams gedacht, die ein Designsystem im Code pflegen, etwa in React. Bei einer klassischen Webflow-Website ohne eigenen Komponentencode spielt es keine Rolle.

Wichtig: Dev Mode zeigt, was im Design steht. Es zeigt nicht, was im Design fehlt. Ein Hover-Zustand, den niemand gestaltet hat, taucht dort nicht auf. Deshalb ersetzt der Status keine Spezifikation.

Webflow: Variablen, Komponenten und Libraries

Variablen

Webflow kennt laut Hilfe fünf Variablentypen: Color, Size, Percentage, Number und Font family. Size deckt Abstände, Schriftgrößen, Radien, Breiten und mehr ab. Variablen liegen in Collections (Standard ist "Site variables"), Modes erlauben mehrere Werte pro Variable. Modes lassen sich einem Breakpoint zuweisen (Tablet, Mobile landscape, Mobile portrait), manuell auf Klassen anwenden oder als Themes einsetzen (Webflow Hilfe: Variables).

Der Unterschied zu Figma fällt sofort auf: Webflow hat keine Typen String, Boolean, Timing und Easing, dafür den Typ Size mit Einheiten und Percentage. Das ist kein Problem, solange man es vorher weiß. Eine Figma-Variable "Abstand/groß" wird zu einer Size-Variable, eine Schriftfamilie zu Font family. Boolean-Variablen, die in Figma Ebenen ein- und ausblenden, haben in Webflow kein Gegenstück und werden über Komponenten-Properties oder Varianten gelöst.

Komponenten

Webflow-Komponenten haben laut Hilfe drei Hebel (Webflow Hilfe: Components):

• Properties (Props) verknüpfen Texte, Links, Bilder oder Videos mit der Instanz, ohne Aufbau oder Design zu verändern. Sie lassen sich mit CMS-Feldern verbinden.
• Slots sind Platzhalter, in die andere Komponenten eingesetzt werden. Jede Instanz kann dort anderes enthalten.
• Variants sind Gestaltungsoptionen, zum Beispiel Button als Vollton oder Umriss. Alle Varianten übernehmen Stile der Basisvariante.

Änderungen am Main Component wirken auf alle Instanzen, ausgenommen Elemente mit zugewiesenen Props. Eine Komponente hat nur eine Variant-Property, die Zahl der Varianten ist aber nicht begrenzt. Das ist die praktische Grenze, die man beim Zuschneiden einer Figma-Komponente im Kopf haben sollte: Eine Figma-Komponente mit vier Variant-Properties muss in Webflow oft anders geschnitten werden.

Shared Libraries

Mit Shared Libraries teilen Teams Komponenten, Variablen und Assets über mehrere Websites. Updates werden nicht erzwungen: Jeder Designer prüft und übernimmt Änderungen selbst (Webflow: Shared Libraries). Das ist relevant, wenn ein Unternehmen mehrere Websites mit derselben Marke betreibt, etwa eine Hauptseite, Karriereseite und Länderseiten.

Klassenstruktur

Variablen und Komponenten reichen nicht, wenn die Klassen darunter ein Durcheinander sind. Eine Konvention wie Client-First legt fest, wie Sections, Container und Klassen heißen. Der Nutzen zeigt sich bei Übergabe und Teamwechsel: Finsweet beschreibt als Ziel, dass ein Projekt ohne Reibung an eine andere Agentur oder einen anderen Webflow-Entwickler übergeben werden kann (Finsweet: Client-First Intro).

Webflow University bietet einen Einsteigerkurs zu Designsystemen in Webflow an, der laut Kursseite etwa 20 Minuten dauert und Variablen, Komponenten und Templates behandelt. Zum Zeitpunkt unseres Abrufs waren einige Lektionen noch als "Coming soon" markiert (Webflow University: Design systems in Webflow).

Figma und Webflow im Vergleich

So lassen sich die Bausteine zuordnen. Die Spalte "Hinweis" nennt die Stolpersteine.

Figma	Webflow	Hinweis
Variable Color	Variable Color	direkte Entsprechung, Werte und Namen übernehmen
Variable Number (Abstände, Radien)	Variable Size	Einheit festlegen, bei Webflow rechnet man oft in rem oder em
Variable String (Schriftname)	Variable Font family	Schrift muss in Webflow verfügbar sein (Upload, Google, Adobe)
Variable Boolean	Prop oder Variant	kein direktes Gegenstück
Timing, Easing	Interactions, Custom Code	kein Variablentyp in Webflow
Mode (hell/dunkel, Sprache)	Mode (Theme)	Modes pro Breakpoint oder als Theme
Komponente mit Varianten	Komponente mit Variants und Props	Webflow erlaubt eine Variant-Property pro Komponente
Text-, Effekt-Style	Klasse mit Variablen	Klassenname nach Konvention
Auto Layout	Flexbox, Grid	Verhalten beim Wachsen testen
Ready for dev	Freigabe im Projekt	Prozess klären, wer wann freigibt

Was sich automatisch übertragen lässt: Webflow bietet das Plugin und die App "Figma to Webflow". Laut Webflow-Hilfe werden damit Figma-Variablen zu Webflow-Variablen, wobei Einheiten in px, em oder rem wählbar sind, und Text- und Effekt-Styles werden zu Klassen. Frames und Komponenten mit Auto Layout werden zu Webflow-Komponenten und -Elementen, Bilder und Vektor-Icons landen im Assets-Panel (Webflow Hilfe: Figma to Webflow). Seit dem Update vom 24.09.2025 lassen sich laut Webflow mehrere Variablen-Collections und Modes gezielt auswählen, Aliase werden als Aliase übernommen und mehr Typografie-Styles mit Variablenbezug mitgenommen (Webflow Updates). Die Hilfeseite nennt weiterhin Grenzen: Varianten werden nicht unterstützt, Layer brauchen Auto Layout, eigene Schriften gehen verloren, wenn sie nicht vorher in Webflow hochgeladen sind, und der Safari-Browser wird nicht unterstützt. Welche Variablentypen genau mitgehen, nennt keine der beiden Seiten. Das Plugin spart also Tipparbeit, ersetzt aber nicht die Prüfung: Kontrolliere das Ergebnis am Bauteil, Variable für Variable.

Beispiel: Ein Button von Figma nach Webflow

Wie die Zuordnung am kleinsten Baustein aussieht, zeigt ein Button:

1. Figma: Die Komponente Button hat die Varianten Primär und Sekundär, jeweils mit den Zuständen Standard, Hover, Fokus und deaktiviert. Farben, Schriftgröße, Innenabstand und Radius hängen an Variablen wie farbe-primaer, abstand-m und radius-s.
2. Webflow: Dieselben Variablen existieren als Color- und Size-Variablen mit denselben Namen. Der Button ist eine Webflow-Komponente mit einer Variant-Property (Primär, Sekundär), einer Prop für den Text und einer für den Link.
3. Klassen: Der Button folgt der Konvention, zum Beispiel eine Basisklasse button mit einer Combo-Klasse für die Variante, wie Client-First sie beschreibt.
4. Abnahme: Nebeneinander prüfen: Abstände, Schrift, Farben, Hover und Fokus, auf Desktop, Tablet und Mobil.

Wenn dieser Test für Button, Karte und Navigation sauber läuft, trägt das System die ganze Website. Wenn nicht, zeigt er genau, wo die Übergabe nachgebessert werden muss.

Dokumentation, die wirklich gelesen wird

Lange Dokumente bleiben ungelesen. Drei kurze Seiten reichen meist:

• Grundlagen: Liste der Variablen mit Namen und Zweck, Typografie-Stufen, Raster und Breakpoints.
• Komponenten: je Baustein ein Satz zum Einsatz, die Varianten und was nicht erlaubt ist.
• Regeln für die Pflege: wer Komponenten ändern darf, wie neue Seiten angelegt werden und was Redakteure besser nicht anfassen. Die Rollenfrage behandelt der Ratgeber Webflow-CMS selbst pflegen.

Ein Designsystem lebt davon, dass es gepflegt wird. Plane nach dem Launch einen festen Termin, zum Beispiel einmal im Quartal, an dem neue Muster geprüft und Altlasten entfernt werden.

Übergabe an andere Entwickler und Systeme

Nicht jede Übergabe geht an Webflow. Die Grundregel bleibt gleich, die Details unterscheiden sich:

Ziel	Was zusätzlich zählt
Webflow	Variablen, Komponenten, Klassenkonvention, CMS-Struktur
WordPress (Theme oder Block-Editor)	Muster als Blöcke, Design-Tokens im Theme, Pflegbarkeit im Editor
TYPO3	Komponenten als Fluid-Templates, redaktionelle Elemente, Mehrsprachigkeit
Eigener Code (React, Vue)	Code Connect, Token-Export, Storybook oder ähnliche Dokumentation

Bei allen Zielen gilt: Frag den Entwickler früh, nicht erst bei der Übergabe. Ein kurzer Termin im Designprozess, in dem die Entwicklung Komponentenschnitt und Variablen prüft, spart später mehr Zeit als jede Nachbesserung. Das ist auch der Grund, warum eine Aufteilung in Design-Agentur und Entwicklungs-Agentur nur mit klarer Schnittstelle funktioniert. Mehr dazu im Ratgeber Design und Entwicklung aus einer Hand.

Die Übergabe in sieben Schritten

1. Gemeinsames Vokabular festlegen. Wie heißen Farben, Abstände, Komponenten? Eine Namenskonvention für Figma und Webflow, am besten dieselbe.
2. Variablen in Figma sauber anlegen. Rohwerte und Bedeutungsebene trennen, Modes dort einsetzen, wo es sie wirklich gibt.
3. Komponenten mit allen Zuständen bauen. Standard, Hover, Fokus, aktiv, deaktiviert, plus Leer- und Fehlerzustände bei Formularen.
4. Breakpoints gestalten. Mindestens Desktop, Tablet, Mobil, dazu das Verhalten dazwischen. Webflow arbeitet mit Breakpoints, Modes können pro Breakpoint wirken.
5. Verhalten dokumentieren. Hover, Scroll-Effekte, Übergänge, Reihenfolge von Einblendungen, auch Bewegungen, die bei reduzierter Bewegung entfallen.
6. Dev-Review vor der Freigabe. Die Entwicklung prüft Komponentenschnitt, Variablen und offene Fragen. Danach "Ready for dev".
7. Abnahme am Bauteil. Nicht die Seite insgesamt, sondern einzelne Komponenten werden gegen Figma geprüft: Abstände, Typografie, Zustände, Breakpoints.

Checkliste: Ist die Übergabe sauber?

Design

• ☐ Alle Farben, Schriftgrößen und Abstände sind Variablen, keine Einzelwerte
• ☐ Komponenten haben alle Zustände als Varianten
• ☐ Namen folgen einem festen Muster, ohne "Copy" oder "Frame 123"
• ☐ Auto Layout statt fest positionierter Ebenen
• ☐ Breakpoints sind gestaltet, nicht nur Desktop
• ☐ Bewegungen und Hover-Verhalten sind beschrieben

Umsetzung

• ☐ Figma-Variablen sind in Webflow als Variablen angelegt, gleiche Namen
• ☐ Wiederkehrende Bausteine sind Komponenten mit Props und Slots
• ☐ Klassennamen folgen einer Konvention wie Client-First
• ☐ Der Navigator ist lesbar: Sections haben sprechende Namen
• ☐ Abstände und Schriftgrößen stehen nicht an jedem Element einzeln

Übergabe an dich

• ☐ Du bekommst Zugriff auf Figma-Datei und Webflow-Projekt
• ☐ Es gibt eine kurze Dokumentation: Variablen, Komponenten, Regeln
• ☐ Dein Team wurde eingewiesen und weiß, was es selbst ändern darf
• ☐ Klar ist, wer das Designsystem nach dem Launch pflegt

Fünf Fragen an jede Agentur

1. Zeig mir ein Bauteil in Figma und in Webflow nebeneinander. Wenn Namen, Varianten und Abstände übereinstimmen, ist das System echt.
2. Wie werden Variablen übertragen und wer prüft das? Gute Antworten nennen einen konkreten Weg, schlechte sprechen von "Übernahme aus dem Design".
3. Welche Klassenkonvention nutzt ihr? Wenn das Projekt später von deinem Team oder einer anderen Agentur weitergebaut werden soll, ist die Antwort Pflicht.
4. Wer pflegt das System nach dem Launch? Eine Bibliothek, die niemand pflegt, veraltet in Monaten.
5. Was passiert, wenn wir die Agentur wechseln? Du solltest Figma-Datei, Webflow-Projekt und Dokumentation behalten.

Wie du Angebote insgesamt vergleichst, steht im Ratgeber Webagentur-Angebot vergleichen.

Häufige Fehler

• Eine Bibliothek, aber keine Regeln. Komponenten ohne Hinweis, wann man sie nutzt, werden falsch kombiniert.
• Variablen nur halb eingeführt. Ein Teil der Abstände ist variabel, der Rest fest. Dann bricht das System bei der ersten Änderung.
• Design und Entwicklung reden nicht miteinander. Die Designer bauen Varianten, die sich in Webflow nur umständlich nachbauen lassen.
• Nur der Desktop ist gestaltet. Tablet und Mobil werden in der Umsetzung improvisiert.
• "Ready for dev" als Schlusspunkt. Der Status ist ein Signal, keine Garantie. Zustände und Verhalten müssen dokumentiert sein.
• Zu viel System für zu wenig Seite. Eine Website mit zehn Seiten braucht kein Konzern-Designsystem. Ein schlankes Set mit sauberen Variablen und zwölf Komponenten kann reichen.

Wie wir das umsetzen

Bei Webwavers entsteht das Design vor der Entwicklung: Laut Prozessseite gibt es zuerst drei Moodboards, dann die ersten drei Startseiten-Sektionen in Figma, danach Startseite und Unterseiten, und die Entwicklung in Webflow, Framer oder WordPress beginnt nach deiner finalen Freigabe. Zum Launch gehört eine persönliche Einschulung. Mehr zu Design und Umsetzung findest du auf den Seiten UX/UI-Design und Webentwicklung.

Fazit

Eine saubere Übergabe ist keine Frage des Werkzeugs, sondern der Struktur: dieselben Namen, dieselben Variablen, dieselben Komponenten auf beiden Seiten. Figma und Webflow haben dafür passende Bausteine, aber nicht deckungsgleiche. Die Zuordnung gehört an den Anfang des Projekts. Prüf eine Agentur an einem konkreten Bauteil, und frag nach dem, was nach dem Launch passiert.

Häufige Fragen

Was ist der Unterschied zwischen einem Designsystem und einer Styleguide-Seite? Ein Styleguide zeigt Farben, Schriften und Bausteine. Ein Designsystem enthält zusätzlich Regeln, Variablen, wiederverwendbare Komponenten und eine Pflege. Ein Styleguide ist oft ein Ausschnitt davon.

Brauche ich als Mittelständler ein Designsystem? Ein schlankes ja. Variablen für Farben, Schriften und Abstände sowie eine Handvoll gut gebauter Komponenten genügen für die meisten Unternehmenswebsites. Ein umfangreiches System lohnt sich bei mehreren Marken, Teams oder Websites.

Wie übertrage ich Figma-Variablen nach Webflow? Figma kennt sechs Variablentypen, Webflow fünf. Farben lassen sich direkt zuordnen, Abstände und Radien werden zu Size-Variablen, Schriften zu Font family. Booleans und Easing haben kein direktes Gegenstück. Für die Übertragung bietet Webflow das Plugin "Figma to Webflow" an, das Variablen, Text- und Effekt-Styles sowie Layer mit Auto Layout übernimmt. Komponentenvarianten werden damit nicht übertragen. Prüf das Ergebnis immer am Bauteil.

Was bedeutet "Ready for dev" in Figma? Es ist ein Status für Komponenten, Frames und Sections, der Entwicklern zeigt, dass ein Design bereit zur Umsetzung ist. Entwickler mit passendem Seat werden benachrichtigt, wenn ein Design erneut als bereit markiert wird. Zustände und Verhalten muss das Design trotzdem selbst abdecken.

Kann mein Team das Designsystem später selbst erweitern? Ja, wenn Variablen, Komponenten und Klassen konsequent aufgebaut sind und dein Team eingewiesen wurde. Welche Rechte Redakteure in Webflow haben, erklärt der Ratgeber Webflow-CMS selbst pflegen.

Funktioniert das auch bei WordPress oder TYPO3? Das Prinzip ja: Variablen werden zu Design-Tokens, Komponenten zu Blöcken oder Templates. Die Umsetzung unterscheidet sich je System. Frag den Entwickler früh nach dem Schnitt der Komponenten.

Woran erkenne ich, dass eine Übergabe schlecht war? Das Team ändert eine Farbe und muss sie an vielen Stellen einzeln anpassen, Abstände weichen von Seite zu Seite ab, und niemand weiß, welche Klasse wofür steht.

Quellen

• Figma Hilfe: Dev Mode
• Figma: Dev Mode
• Figma Hilfe: Variables, Collections und Modes
• Webflow Hilfe: Variables
• Webflow Hilfe: Components
• Webflow: Shared Libraries
• Webflow Hilfe: Figma to Webflow Plugin und App
• Webflow Updates: Mehrere Variablen-Collections und Modes aus Figma synchronisieren
• Webflow University: Design systems in Webflow
• Finsweet: Client-First Intro
• Webwavers: Prozess

Autor: Edip Kilinc, Gründer von Webwavers. Zuletzt aktualisiert am 31.10.2026.

Änderungslog: 31.10.2026, Erstveröffentlichung.