Die Basis für den heutigen Workshop bilden die Ergebnisse aus dem Workshop komplexe Layouts. Falls ihr Material aus dem «Workshop komplexe Layouts» nicht ausreicht, können Sie auch die unten dargestellte Version verwenden. Zur Nutzung auf den Pfeil oben in der Titelleiste neben view only gehen und aus dem Dropdown Feld Duplicate to your Drafts auswählen. Dann kann mit der Vorlage im persönlichen Bereich in Figma gearbeitet werden.
Wir nutzen für unsere Layouts folgende Geräteklassen/ Viewportgrößen
Erzeugen Sie für die verschiedenen Viewports ein sinnvolles Spaltenraster auf Basis Ihres Abstandkonzepts (T-Shirt Größen). Überprüfen Sie Ihr Raster mit Beispielcontent auf einen mobilen Endgerät mit Hilfe der Figma Mirror App
Erzeugen Sie eine reaktionsfähige, skalierbare Komponente für die Darstellung eines Produkts mit folgendem Inhalt:
Erzeugen Sie nun für jeden Viewport eine Übersichtsseite und nutzen Sie für dynamisch generierten Content das Google Sheets Sync Plugin und folgende Tabelle mit Content. Sie können natürlich auch eine eigene Tabelle verwenden.
Erzeugen Sie eine reaktionsfähige, skalierbare Komponente mit Varianten, um verschiedene Text- und Bildkombinationen für verschiedene Viewportgrößen darzustellen.
