Design-to-Code: Design trifft Entwicklung

Design-to-Code ist einer der kritischsten Punkte in der Produktentwicklung – hier entstehen oft Inkonsistenzen, Verzögerungen und Qualitätsverluste.

Farben weichen ab. Gradients werden inkonsistent umgesetzt. Typografie-Standards werden nicht eingehalten. Jede dieser Abweichungen kostet Zeit und schadet der Produktqualität.

Um dieses Problem zu lösen, haben wir einen Ansatz entwickelt: Eine automatisierte Token-Generierung aus Figma, strukturierter Export und validierte Frontend-Integration. Ein systematischer Ansatz, der Konsistenz sichert, manuelle Fehler eliminiert und Teams auf echte Wertschöpfung konzentriert.

Das Kernproblem: Manuelle Interpretation und Datenverlust

In der Standardpraxis ist der Übergang vom Design zum Code ein interpretativer Prozess:

Designer liefern Spezifikationen. Entwickler interpretieren sie. Mit jeder Interpretation gehen Informationen verloren oder werden fehlerhaft übertragen.

Das Problem wächst mit der Komplexität. Je mehr Farben, Typografie-Varianten, Abstände und Radius-Definitionen vorhanden sind, desto größer wird der Raum für Inkonsistenzen. Was ist die exakte Farbe? Welcher Gradient-Winkel wird verwendet? Die Dokumentation ist oft unvollständig oder wird nicht eingehalten.

Der Design-to-Code Ansatz kehrt diese Logik um: Statt Design-Entscheidungen zu interpretieren, extrahieren wir sie maschinenlesbar aus Figma. Tokens werden normalisiert und direkt als produktiver Code bereitgestellt – CSS-Variablen und strukturierte JSON-Definitionen. Aus Interpretation wird Faktentransfer.

Zentrale Vorteile für die Zusammenarbeit

Einheitliche Semantik: Design-Tokens definieren eine gemeinsame Syntax für Farben, Typografie und Abstände. Statt über subjektive Beschreibungen zu diskutieren, beziehen sich alle auf eindeutig definierte Variablen wie --color–brand-primary.

Sofortige Validierung: Export-Prozesse ermöglichen unmittelbare visuelle Validierung. Jede Änderung in Figma lässt sich in einer Frontend-Preview überprüfen – bevor Code ins Repository geht.

CSS-Generierung: Der automatisierte Export erzeugt präzise, wartbare CSS-Definitionen – einschließlich komplexer Gradients und Animationen. Keine manuellen Fehler, keine Abweichungen vom Design.

Nachvollziehbare Änderungen: Der gesamte Workflow von Figma über Token-Generierung bis zur Frontend-Integration ist dokumentiert. Alle Änderungen sind nachverfolgbar.

Sicherheit durch Isolation: Tokens werden zunächst in einer isolierten Umgebung gepflegt. Ein definierter Proxy-Flow regelt die Übergabe in die Produktionsumgebung.

Design-Teil vs. Code-Teil: Der entscheidende Unterschied

Viele Teams speichern ihre Farben und Schriften in Figma. Das ist ein Anfang – aber nur der Design-Teil. Was wirklich zählt, ist der Code-Teil.

❌ Nur Figma

Designer pflegen die Palette, aber Entwickler müssen die Werte trotzdem händisch ins Frontend übertragen, pflegen sie oft redundant (CSS, TS, Swift, Android …) und laufen Gefahr, veraltete Werte zu verwenden.

✅ Mit Token-Export

Die Werte landen automatisch strukturiert in JSON/CSS – „Single Source of Truth“. Du schiebst das JSON in Style Dictionary, npm-Pakete oder direkt ins Repo und alle Frontends (Web, Mobile, Storybook) ziehen dieselben Farben, Radien, Typo-Stile. Änderungen benötigen keinen manuellen Copy & Paste mehr.

Der Workflow: Sieben Schritte zum Ziel

1. Design pflegen: Farben, Gradients, Typografie und Radien sauber in Figma strukturieren
2. Tokens ziehen: Mit einem Klick Figma-Tokens abrufen oder Demo laden
3. Normalisieren: Tokens in Kategorien mappen und als JSON/CSS generieren
4. Export nutzen: Den :root-Block oder die JSON ins Repository, in Style Dictionary oder als Paket exportieren
5. Frontend anbinden: Tokens in src/styles.scss importieren und in Komponenten via var(...) nutzen
6. Visual Check: UI-Preview und PNG-Vergleiche durchführen, stimmt Design und Code überein?
7. Iterieren: Änderung in Figma → Tokens neu exportieren → sofort in allen Frontends wirksam

Ein konkretes Beispiel: Von Figma zu echtem Code

Nehmen wir ein Beispiel aus einer aktuellen Implementierung. In Figma sind folgende Designentscheidungen definiert:

Brand-Farben: Corporate (#00BE00), Pragmatic Development (#0046FF), Agile Advisory (#00D294), Viable Architecture (#009696)

Typografie: Montserrat in 9 Gewichtungen (100–900) mit Display-Größe 32px und Zeilenhöhe 56px

Schritt 1: Figma-Verbindung konfigurieren

Der erste Schritt ist die Konfiguration einer Figma-Datei. Man benötigt zwei Informationen aus dem Figma-Workspace:

• Figma File-ID: Findest du in der URL deiner Figma-Datei (z.B. figma.com/file/<FILE-ID>/...)
• Figma Access-Token: Generierst du in deinen Figma-Kontoeinstellungen unter „Personal access tokens“

Die Anwendung verbindet sich mit deinem Figma-Workspace, liest die Design-Datei und extrahiert alle strukturierten Tokens automatisch. Keine manuelle Liste, keine Copy&Paste – direkt aus der Quelle.

Schritt 2: Token-Browser – alle Tokens auf einen Blick

Nach dem Laden öffnet sich automatisch der Token-Browser. Er zeigt alle extrahierten Werte visuell aufbereitet in vier Kategorien:

• Farben – jeder Token als farbige Swatch mit CSS-Wert
• Verläufe – Gradients als gerenderter Preview inkl. Referenz-PNG aus Figma
• Typografie – jeder Stil als Live-Preview mit den echten Font-Werten
• Radien – Utility-Werte für Border-Radius

So lässt sich auf einen Blick prüfen, ob alle Tokens korrekt extrahiert wurden – bevor ein einziger Code-Export erfolgt.

Schritt 3: Tokens extrahieren und generieren

Der automatisierte Export generiert einen sauberen :root-Block mit allen Tokens:

src/styles.scss

:root {
  /* Brand Colors */
  --color-brand-corporate: #00be00;
  --color-brand-pragmatic-dev: #0046ff;
  --color-brand-agile-advisory: #00d294;
  --color-brand-viable-arch: #009696;

  /* Typography */
  --font-display-family: 'Montserrat';
  --font-display-size: 32px;
  --font-display-line-height: 56px;
  --font-display-thin: 100;
  --font-display-bold: 700;
}Code-Sprache: CSS (css)

Diese Tokens nutzt man direkt in den Komponenten:

component.scss

.section-heading {
  font-family: var(--font-display-family);
  font-size: var(--font-display-size);
  font-weight: var(--font-display-bold);
  line-height: var(--font-display-line-height);
  color: var(--color-brand-corporate);
}Code-Sprache: CSS (css)

Multi-Plattform-Export: Eine Quelle, alle Zielplattformen

Ein besonders starkes Argument für den Token-Ansatz ist die plattformübergreifende Reichweite. Dieselbe Figma-Quelle generiert mit einem Klick fünf verschiedene Formate:

Das bedeutet: Eine Änderung der Primärfarbe in Figma erzeugt exakt dasselbe Update für Web, iOS und Android – ohne dass ein einziger Entwickler händisch einen Wert anpassen muss.

Style Dictionary JSON ermöglicht zusätzlich die Integration in automatisierte CI/CD-Pipelines. Das JSON wird direkt von Style Dictionary eingelesen und transformiert – kompatibel mit allen gängigen Design-Token-Standards.

Tokens im Frontend einsetzen: Drei konkrete Beispiele

Der entscheidende Vorteil für den Ansatz ist nicht der Export selbst, sondern wie Entwickler die Tokens danach tatsächlich nutzen. Die Anwendung zeigt das in der Integrationsansicht mit echten SCSS-Snippets und gerenderten Ergebnissen nebeneinander.

Beispiel 1: Button-Komponente

// button.component.scss
.btn-primary {
  background: var(--color-brand-corporate);
  color: #fff;
  border-radius: var(--radius-pill);
  font-family: var(--typography-display-font-family);
  font-weight: 700;
}
.btn-secondary {
  color: var(--color-brand-corporate);
  border: 2px solid var(--color-brand-corporate);
  border-radius: var(--radius-pill);
}Code-Sprache: PHP (php)

Ändert sich die Brand-Farbe in Figma, ist der Button in beiden Varianten automatisch aktuell – kein manuelles Suchen und Ersetzen.

Beispiel 2: Karten-Komponente

// card.component.scss
.card {
  border-radius: var(--radius-card);
}
.card__header {
  background: var(--color-brand-corporate);
  font-family: var(--typography-display-font-family);
}
.card__badge {
  background: var(--color-brand-agile-advisory);
  border-radius: var(--radius-pill);
}Code-Sprache: JavaScript (javascript)

In beiden Fällen gilt dasselbe Prinzip: Der Entwickler schreibt var(--token-name) – die Designentscheidung kommt direkt aus Figma, ohne Umweg.

Offline-Workflow: Einmalig verbinden, dauerhaft nutzen

Ein praktisches Problem bei der direkten Figma-API-Integration ist das Rate-Limiting: Figma begrenzt die Anzahl der API-Aufrufe pro IP-Adresse. Das ist für ein Kundenprodukt mit mehreren gleichzeitigen Nutzern eine relevante Einschränkung.

Die Lösung: ein JSON-basierter Offline-Workflow.

Einmalig (erster Aufruf):

1. Figma-Token und File-ID eingeben → Tokens laden
2. Im Header erscheint ↓ JSON → klicken → figma-tokens.json wird lokal gespeichert

Alle weiteren Aufrufe:

1. „JSON hochladen“ → gespeicherte Datei auswählen
2. Sofort fertig – kein API-Aufruf, kein Rate-Limit, funktioniert auch offline

Das bedeutet für Teams: Der technisch versierte Entwickler macht den Figma-API-Aufruf einmalig, speichert die JSON-Datei ins Projekt-Repository, und alle anderen Teammitglieder laden die Datei direkt hoch – ohne Figma-Zugang, ohne Token-Verwaltung.

Zusätzlich cached die Anwendung den letzten erfolgreichen API-Aufruf für 5 Minuten clientseitig. Mehrfaches Klicken auf „Tokens abrufen“ mit derselben File-ID innerhalb dieses Zeitfensters löst keinen neuen API-Aufruf aus.

Warum das wichtig ist

Auf den ersten Blick klingt das nach viel Prozess für „einfach nur Farben exportieren“. Der echte Gewinn liegt in dem, was danach passiert. Wenn der Design-Lead morgen sagt: „Wir ändern die Primary-Farbe“, dann ist das keine dreistündige Suchoperation mehr. Es ist eine einzige Änderung in Figma, ein Export, und die Farbe ist überall aktuell – in Web, iOS und Android gleichzeitig.

Das spart Zeit. Das vermeidet Fehler. Und das gibt deinem Team etwas, das unbezahlbar ist: eine gemeinsame Quelle der Wahrheit.

Dieser Design-to-Code-Ansatz ist eine strukturelle Verbesserung der Zusammenarbeit. Er macht Designentscheidungen sichtbar, überprüfbar und direkt nutzbar. Und vor allem: Er sorgt dafür, dass das Endprodukt wirklich dem Design entspricht.

Abgrenzung: Diese Lösung ist nicht Figma Dev Mode

Diese Anwendung ist nicht das von Figma angebotene Dev Mode Feature. Die Unterschiede sind erheblich:

Figma Dev Mode

Zeigt Spezifikationen und Code-Snippets direkt innerhalb von Figma. Developer Handoff und Dokumentation in der Figma-Oberfläche. Fokus: Informationen für Entwickler:innen auffindbar machen.

Diese Lösung

Externe Anwendung, die Tokens maschinenlesbar aus Figma extrahiert und direkt als produktiven Code generiert (CSS, SCSS, Swift, Android XML, Style Dictionary JSON). Der Code ist sofort einsatzbereit – kein Umweg über Dokumentation. Fokus: Automatisierte Integration in Entwicklungs-Workflows für alle Zielplattformen.

Diese Lösung automatisiert den tatsächlichen Code-Transfer. Sie ist eine Ergänzung zu Figma, keine Konkurrenz – und kann problemlos neben Dev Mode verwendet werden.