Von Figma zum Code — Mein Design-zu-Development Workflow

Als Product Designer bin ich beides: Gestalter und Entwickler. Das bedeutet, dass mein Design-zu-Code-Workflow keine Übergabe zwischen zwei Personen ist — es ist ein nahtloser Prozess innerhalb meines eigenen Arbeitsablaufs. Trotzdem habe ich über die Jahre eine klare Struktur entwickelt, die sicherstellt, dass kein Pixel verloren geht.

In diesem Beitrag zeige ich dir, wie ich von einer leeren Figma-Canvas zu einer live geschalteten Website komme.

Phase 1: Strategie (bevor Figma geöffnet wird)

Bevor ich auch nur eine Linie in Figma zeichne, kläre ich drei Dinge:

Was ist das Ziel der Seite? — Soll sie verkaufen, informieren, Leads generieren?
Wer ist die Zielgruppe? — Welche Erwartungen hat sie, welche Fragen bringt sie mit?
Was ist der Kerninhalt? — Welche Informationen müssen auf jeden Fall sichtbar sein?

Erst wenn diese Fragen beantwortet sind, öffne ich Figma. Das spart mir später unzählige Iterationen.

Phase 2: Wireframes in Figma

Ich starte mit Low-Fidelity-Wireframes — schwarz-weiß, ohne Bilder, ohne Schriftwahl. Nur Kästchen, Linien und Platzhalter.

Warum Wireframes? Weil sie den Fokus auf die Struktur legen, nicht auf das Aussehen. In dieser Phase entscheide ich:

Welche Informationen auf welcher Seite stehen
In welcher Reihenfolge sie erscheinen
Wie der Nutzer durch die Seite navigiert

Ein Wireframe ist fertig, wenn die Informationsarchitektur stimmt. Das Design kommt später.

Phase 3: Das Design-System

Bevor ich mit dem eigentlichen Design beginne, definiere ich die Bausteine:

Farben:

Primärfarbe, Sekundärfarbe, Akzentfarbe
Textfarben (primär, sekundär)
Hintergrundfarben (primär, sekundär)
Status-Farben (erfolg, fehler, warnung)

Typografie:

Schriftart (Überschriften, Fließtext, Monospace)
Schriftgrößen (h1–h6, body, small, meta)
Zeilenabstände und Laufweiten

Abstände:

Ein Raster (z. B. 8er-Raster oder 4er-Raster)
Section-Abstände, Komponenten-Abstände

Komponenten:

Buttons (primary, secondary, outline, ghost)
Cards, Form-Elemente, Navigation

Alles wird in Figma als Component Library angelegt. Später wird genau dieses System in Tailwind CSS übersetzt.

Phase 4: High-Fidelity Design

Jetzt kommt der eigentliche Design-Prozess. Ich designe Seite für Seite im vorgegebenen Raster. Dabei halte ich mich an folgende Prinzipien:

Mobile First — Ich designe zuerst die mobile Ansicht, dann Tablet, dann Desktop
Echte Inhalte — Kein Lorem Ipsum. Ich verwende die tatsächlichen Texte (oder so nah dran wie möglich)
Zustände — Jede Komponente wird in allen Zuständen designt (hover, active, disabled, error, empty)

Auto Layout ist mein wichtigstes Werkzeug in Figma. Jeder Frame verwendet Auto Layout mit definierten Abständen und Padding. Das stellt sicher, dass das Design responsiv ist und die Abstände konsistent bleiben.

Phase 5: Der Handoff (an mich selbst)

Der Handoff-Prozess ist bei mir intern, aber ich habe mir einen Standard etabliert:

Figma-Design wird eingefroren — keine Änderungen mehr während der Entwicklung
Design-Tokens werden exportiert — Farben, Abstände, Schriftdefinitionen
Assets werden optimiert — Bilder werden auf die richtige Größe zugeschnitten und komprimiert
CSS-Werte werden notiert — border-radius, box-shadow, transitions

Da ich selbst entwickle, gibt es keinen klassischen „Handoff-Fehler”. Aber ich dokumentiere trotzdem alles, falls ich später darauf zurückkommen muss.

Phase 6: Entwicklung

Die Umsetzung folgt einem klaren Schema:

1. Tailwind-Konfiguration

// tailwind.config.js
const colors = {
  primary: '#08163C',
  secondary: '#7FB5FF',
  // ...
}

2. Grundgerüst in Astro Ich erstelle die Astro-Komponenten-Struktur, die dem Figma-Aufbau entspricht. Jeder Abschnitt (Hero, Services, FAQ, Footer) wird eine eigene Komponente.

3. Komponenten-Entwicklung Ich entwickle von unten nach oben: erst die kleinen Komponenten (Button, Card, Badge), dann die zusammengesetzten (Section, Grid), dann die Seiten.

4. Responsive Anpassungen Mobile First bedeutet, dass ich mit der kleinsten Ansicht beginne und dann Breakpoints nach oben arbeite. Tailwind macht das einfach mit seinen responsiven Präfixen (md:, lg:).

Phase 7: Review und Feinschliff

Nach der Entwicklung vergleiche ich das Ergebnis pixelgenau mit dem Figma-Design:

Perfect Pixel Check — Ich lege das Figma-Design als Overlay über die entwickelte Seite
Abstände messen — Stimmen die margins und paddings?
Typografie prüfen — Sind Schriftgrößen, Zeilenabstände und Laufweiten korrekt?
Zustände testen — Hover, Focus, Active — alles wie designt?

Tools, die ich verwende

Tool	Wofür
Figma	Design, Wireframes, Prototyping
Tailwind CSS	Design-System im Code
Astro	Komponenten-Struktur
Perfect Pixel	Browser-Erweiterung für Pixel-Checks
Squoosh	Bildoptimierung
SVGOMG	SVG-Optimierung

Warum dieser Prozess?

Weil er mich vor den häufigsten Fehlern bewahrt:

Keine unnötigen Iterationen — Wireframes und Design-System sparen Zeit
Keine Überraschungen — Der Kunde sieht das Design, bevor Code geschrieben wird
Keine Pixel-Drift — Das Endergebnis entspricht dem Design
Saubere Codebasis — Tailwind-Konfiguration basiert auf dem Design-System

Der beste Nebeneffekt: Wenn ich ein Projekt nach Monaten wieder aufnehme, finde ich mich sofort zurecht. Das Design-System, die Dokumentation und die saubere Komponenten-Struktur machen jede Wiederaufnahme zum Kinderspiel.

Du hast ein Design und brauchst eine erstklassige Umsetzung? Ich setze dein Figma-Design pixelgenau um. Schreib mir an arnaut@miran.at.