Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Figma Basics Vol.1: Einführung in das komponentenbasierte Gestalten

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 müssten 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 modulate 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!

Ein Projekt von

Fachgruppe

Perspektiven und Social Skills

Art des Projekts

Studienarbeit im Hauptstudium

Betreuung

Philipp Pfingsttag

Zugehöriger Workspace

Figma Basics Vol.1: Einführung in das komponenten-basierte Gestalten

Entstehungszeitraum

Wintersemester 2021 / 2022

Keywords