Wie das Design-System aufgebaut ist, was du in Figma anders machen musst und wie Code und Design auseinander entstehen.
Alle Farben, Spacings, Schriftgrößen und Radien sind als Tokens definiert. Diese Tokens leben im Code (CSS Custom Properties + Tailwind v4). Figma sollte sie als Variables spiegeln — sonst driften die Welten auseinander.
Tokens & System →Eine Card ist eine Card. Ein Hero ist ein Hero. Designer wählen aus dem Katalog — und kombinieren sie. Spezielle Layouts entstehen durch Anordnung, nicht durch eigene Components.
Use-Case-Index →Eine Card weiß selbst, ob sie in einer 3-Spalten-Reihe oder allein steht — über Container Queries. Du musst nicht für jede Breite ein eigenes Layout designen. Im Zweifel: Werkstatt nutzen, dort kannst du jede Breite live testen.
Mobile-Studio →Jede Component muss in beiden Modi funktionieren. Nicht nur "irgendwie sichtbar" — Kontraste prüfen (WCAG AA), Schatten ggf. durch Border ersetzen, Branding-Farben anpassen.
Light/Dark-Inspector →Wenn ein Designer in Figma eine Card anklickt, soll der echte Astro-Code-Snippet daneben stehen. Das ist Code-Connect — eine Mapping-Datei pro Component. Reduziert Re-Implementierung um den Faktor 5.
Figma-Workflow →Statt eines Wireframe-PDFs: bau die Seite in der Komponenten-Werkstatt, speicher mit Namen, schick den Link. Frontend hat sofort den Astro-Code, Editor sieht direkt was zu pflegen ist.
Werkstatt öffnen →| Frueher | Jetzt |
|---|---|
| Eigene Wireframes pro Seite zeichnen | Aus Components zusammenstellen — Werkstatt oder Figma-Library |
| Spacing per Auge ("sieht gut aus") | Token-Stufen: xs / sm / md / lg / xl — niemals Pixel-Werte |
| Mobile-Designs nachträglich | Container-Queries machen Components von selbst responsive — Mobile-Studio bestätigt |
| Headline-Skala frei wählen | H1-H6-Skala vom System nutzen — Heading-Hierarchie ist Pflicht |
| "Ich brauch eine neue Card-Variante" | Prüfen ob existierende Variante reicht; sonst mit Frontend abstimmen, neue Variante hinzufügen |
| Designer ↔ Frontend: PDF-Spec | Figma-Frame-Link + Werkstatt-Konfig-Link |