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

Dokumentation „Figma Basics“ Kurs

Einführung in das Programm Figma und dessen Grundfunktionen einschließlich des komponentenbasierten Gestaltens und erste Übungen zum Aufbau von Apps oder Webseiten.

Start

Meine Kenntnisse über Figma waren zu Beginn bei null. Dieser war also meine erste Begegnung.

shazam_app-1.pngshazam_app-1.png

App Research

Meine App der Wahl ist Shazam, eine App für mobile Geräte und Personal Computer, die durch die Möglichkeit, laufende Musik zu erkennen.

Anfangs fiel es mir sehr schwer eine Struktur aufzubauen, obwohl wir sie genau analysiert hatte, wusste ich nicht ganz wo und wie ich beginnen sollte.

app research.pngapp research.png

Element Analyse

Wir haben erst die App im Detail betrachtet und auseinandergenommen und einzelne Elemente analysiert. z.B die Schriftarten, Farben, Icons, Bildformat etc.

Dann sollten wir uns einen Screen aus der App heraussuchen und dort erst Elemente erkennen, welche wir dann selbst erstellen und in Styles umwandeln.

Danach beschäftigten wir uns als mit Komponenten. Hierbei haben wir diese zuerst erkannt, dann selber realistisch nachgebaut.

shazam_app_ui (3)-3.pngshazam_app_ui (3)-3.png

Style Guide

Zu Beginn habe ich meine  Komponenten angelegt. Hierbei sind mir viele Fehler unterlaufen, die sich später durch ein detailliertes Tutorial von Phillip selbst erklärt haben. Danach habe ich Icons  als Komponente angelegt und die Tochter-Komponente im nächsten Schritt in einer neuen Komponente eingebaut.

Anfangs hatte ich Schwierigkeiten beim Resizing meiner Icons. Nachdem ich mich noch einmal mit dem Thema auseinandergesetzt und Tutorials dazu gesehen habe, hat es sich doch erledigt.

shazam_app_ui (3)-4.pngshazam_app_ui (3)-4.png

Components

Nachdem nun mein Style-Guide angelegt war, habe ich meine Komponenten vom originalen App-Screen Step by Step nachgebaut.

shazam_app_ui (3)-5.pngshazam_app_ui (3)-5.png

Result

In diesem Kurs habe ich folgendes gelernt:

- beide Seiten meines Gehirns einzusetzen (logisch und kreativ)

- strukturiertes und komponentenbasiertes, systematisches Arbeiten

Ich hätte mir gewünscht, dass ich schon früher gut mitgekommen wäre, da ich bis zum vorletzten Tag sehr überfordert war.

Alles in Einem bin ich sehr froh, dass ich diesen Kurs belegt habe und werde Figma mit Sicherheit zukünftig nutzen. Ich kann Philipp nur herzlich loben für seine Geduld und Kompetenz.

shazam_app_ui (3)-6.pngshazam_app_ui (3)-6.png

Insgesamt habe ich zwei Module nachgebaut. Hier sind meine fertigen Ergebnisse.

Fazit

success-1030x578.jpgsuccess-1030x578.jpg

Persönliche Reflexion

In diesem Kurs habe ich folgendes gelernt:

- beide Seiten meines Gehirns einzusetzen (logisch und kreativ)

- strukturiertes und komponentenbasiertes, systematisches Arbeiten

Ich hätte mir gewünscht, dass ich schon früher gut mitgekommen wäre, da ich bis zum vorletzten Tag sehr überfordert war.

Alles in Einem bin ich sehr froh, dass ich diesen Kurs belegt habe und werde Figma mit Sicherheit zukünftig nutzen. Ich kann Philipp nur herzlich loben für seine Geduld und Kompetenz.

Ein Projekt von

Fachgruppe

Perspektiven und Social Skills

Art des Projekts

Keine Angabe

Betreuung

foto: Philipp Pfingsttag

Zugehöriger Workspace

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

Entstehungszeitraum

Wintersemester 2021 / 2022