1.4 Figma & Übergabe
Erklärt, wie Design-Dateien vorbereitet, benannt und strukturiert werden müssen, damit der Übergang von Design zu Entwicklung einfach und fehlerfrei bleibt.
Inhaltsverzeichnis
A. Figma-Datei – Mindestanforderungen
- Pages: 01_Moodboard, 02_Components, 03_Pages
- Komponenten: Buttons, Inputs, Cards, Sections
- Typo-Stile: H1–H6, Body, Links, Buttons
- Spacing: Basisskala dokumentiert
B. Dev-Übergabe – was wir brauchen
- Export: Logos/SVGs, Bilder (JPG, max 1600px), korrekte Dateinamen
- Fonts: Finaler Familienname & Gewichtungen (lokal)
- Interaktionen: Hover/Active/Focus definieren
- Notes: Besonderheiten/Edge Cases
C. Übergabe-Checkliste (Designer → Dev)
- Typo- und Farbstyles konsistent?
- Komponenten sauber dokumentiert?
- Bildergrößen/Seitenverhältnis festgelegt?
- Mobile States und Wrap-Verhalten geregelt?
Tipp
Benenne Exporte präzise: seite-bereich-element-version.jpg (z. B. home-hero-bg-v1.jpg). Spart Zeit bei Medien & SEO.
- Globale Typo verwenden
- Nur Margin-Bottom für Abstände
- Keine verschachtelten Container