RedOrange · Figma Layout Guide

Handoff an Frontend und TYPO3

Welche Informationen bei der Übergabe vorliegen sollten, damit aus dem Layout eine saubere Umsetzung wird.

Handoff

Was bei der Übergabe an Frontend und TYPO3 geklärt sein muss

Checkliste

  • Welche Container-Breite ist gewünscht?
  • Welches Grid-Modul wird verwendet?
  • Wie verhält sich die Sektion mobil?
  • Gibt es besondere Abstände oben/unten?
  • Gibt es eine Hintergrund-Variante?
  • Ist eine Anchor-ID nötig?

Übergabeformat

Optimal ist eine kurze Spezifikation direkt im Figma-Frame oder in einer Entwicklernotiz.

Container: wide
Grid: 2col-4-8
Responsive: standard
Background: light
Spacing top: md
Spacing bottom: lg
Anchor: kontakt
Praxis

Was die Übergabe leichter macht

Kommentare direkt am Frame sind besser als verstreute Slack-Nachrichten.
Ein klarer Name pro Section spart Rückfragen.
Wenn eine Sektion vom System abweicht, muss das explizit markiert werden.
Am saubersten sind Layouts, die das vorhandene System bewusst nutzen statt gegen es zu gestalten.