RedOrange · Figma Layout Guide

Style Guide für Grafiker und UI-Designer

Eine statische HTML-Dokumentation für Figma-Layouts, abgestimmt auf das bestehende Grid und die TYPO3-Container-Logik.

Überblick

Der Guide ist in mehrere Unterseiten gegliedert

So kann die Grafik gezielt einzelne Themen nachschlagen, statt durch ein langes Einzeldokument zu scrollen.

Kurzfassung

Was für die Grafik verbindlich ist

Es wird immer auf dem freigegebenen 12-Spalten-Grid gestaltet.
Es werden nur die freigegebenen Container-Layouts verwendet.
Responsive Verhalten läuft über Presets, nicht über freie Breakpoints.
Container-Einstellungen wie Breite, Hintergrund und Abstand werden im Layout mitgedacht.
Figma-Struktur soll die spätere TYPO3-/Frontend-Umsetzung bereits spiegeln.
Für jede Sektion gibt es beim Handoff eine kurze Spezifikation.