(9. FS) Figma Basics Vol.1: Einführung in das komponentenbasierte Gestalten

In diesem Projektwochen-Workshop widmeten wir uns den Grundfunktionen von Figma und setzten uns mit dem Konzept des komponentenbasierten Gestaltens auseinander.

• App Recherche

Nachdem Philipp uns eine Einführung in das komponentenbasierte Gestalten gegeben hat, suchten wir uns anschließend eine geeignete App, die wiederholende Elemente enthalten sollte. Ich habe mich für die Galileo-App entschieden.

Ich hielt folgende vier Screens für geeignet, da ich die obere »Segmented Control-Leiste«, sowie die »Karten« mit lediglich anderem Textinhalt gut als Komponente umsetzen konnte.

• Analyse

Anhand der Screenshots sollten wir dann grob die möglichen Komponenten von groß nach klein identifizieren.

• Style-Guide

Wir legten Color-Styles für spezifische Anwendungsgebiete wie Hintergründe, Icons oder Textfarben an und erfassten ebenfalls alle in der App verwendeten Textformatierungen, die wir ebenfalls als Style anlegten.

• Komponenten

Nun arbeiteten wir uns von klein nach groß und legten in sich verschachtelte Komponenten an. Wir lernten dabei, was eine Mutterkomponente ist, in der man alle Veränderungen steuert und dass ihre Ableger sogenannte Instanzen sind, mit denen man modular an den Screens arbeitet. Hierbei lernten wir ebenfalls wie man Varianten bildet, welchen Nutzen Sie in der Anwendung haben und wie man Abstände von Objekten zueinander mittels Autolayout steuert. Ebenfalls sollten wir die Screens am Ende so aufbereitet haben, sodass sie ohne Probleme variabel in verschiedenen Screengrößen skaliert und präsentiert werden können. Hierfür mussten wir die Contrains einstellen, damit sich die Objekte der jeweiligen Screengröße entsprechend ausrichten.

• Ergebnis

• Prototyp

• Fazit

Ich war wirklich erstaunt wieviel man innerhalb von nur 2 Wochen lernen kann und erschüttert zugleich, dass ich die letzten 9 Semester nicht einmal etwas über Komponenten gehört habe. Das modulare Gestalten hätte mir tatsächlich einiges an Arbeit erspart. Umso dankbarer bin ich aber, dass Philipp uns mit viel Sympathie und Geduld das komponentenbasierte Gestalten nahegebracht hat. Er hat eine hervorragende Arbeit geleistet. Wir alle hatten eine schöne Zeit und würden uns eine Fortsetzung dieses Kurses wünschen!