Heute beschäftigen wir uns mit dem Thema „Advanced Prototyping”. Hilfestellungen bekommen Sie in dem dazu vorgesehenen Training.
Übung 1 - Variablen und Text Styles
Laden Sie das Materialpaket herunter und importieren Sie das enthaltene Projekt in Figma.
- Erzeugen Sie Variablen für alle verwendeten Farben und weisen Sie diese den vorhandenen Elementen zu.
- Erzeugen Sie Variablen für alle verwendeten Schrifgrößen und -schnitte und der eingesetzen Schriftfamilie.
- Leiten Sie aus den zuvor definierten Variablen Text Styles ab und weisen Sie diesen den vorhandenen Textelementen zu.
Übung 2 - Komponenten
- Erzeugen Sie Komponenten und Varianten von Komponenten für Elemente bei denen es sinnvoll ist. Diese helfen dabei ein konsistentes Layout, auch über mehrere Views hinaus, zu ermöglichen.
- Sortieren Sie in diesem Zuge die Elemente in der Ebenenleiste nach einem System, welches Sie sich zuvor überlegt haben. Eine Möglichkeit ist es, die Elemente in der Reihenfolge, wie sie auf der Zeichenfläche vorkommen, zu sortieren und zwar von oben nach unten.
- Achten Sie darauf, dass Sie den Elementen sprechende Namen geben. Überlegen Sie sich ein Schema, welches Sie für die Benamung verwenden.
Übung 3 - Autolayout und Constraints
Für die bestehenden Screens soll ein Layout für das Querformat erzeugt werden.
Konfigurieren Sie die Elemente so, dass sie flexibel auf Größenänderungen der Frames oder der Elemente selbst reagieren.
Duplizieren Sie daraufhin die Frames, stellen Sie sie auf das Querformat ein und justieren Sie die darin enthaltenden Elemente entsprechend der neuen Ausrichtung.
