Recreating Hue Appscreen | Figma Basics Kurs

Als Übung, um das strukturierte arbeiten mit Figma zu lernen, sollte eine beliebige App gewählt werden. Aus dieser dann die Elemente wie Schriften, Farben und Komponenten/Module erkannt, und nachgebildet werden.

1. Elemente identifizieren

Eine beliebige App sollte nachgebaut werden. Für mich kam eine meiner lieblings Apps in Frage. Da diese nicht auf jedem Handy zu finden ist und über ein sehr gelungenes UI verfügt. Mein Ziel war es die Farbe von allen Flächen mit nur einem Klick farblich zu ändern.

2. Design Schemas herausfiltern

Zunächst wurden die Hauptelemente, aus denen der Appscreen aufgebaut ist, mittels Screenshots herausgefiltert.

3. Style Bibliothek anlegen

Danach wurden die Schriften, Farben und Icons extrahiert oder ähnliche verwendet. Icons wurden als 24 x 24 px Komponente angelegt, um diese einfacher austauschen zu können.

Die Diversen Stilvorgaben erhielten alle generische Namen zur besseren Zuordnung.

4. Komponenten und Varianten erstellen

Angelegte Komponenten steuern alle child / Schwester Komponenten. So können mit einer Änderung der Main / Eltern Komponente alle child Komponenten gesteuert und verändert werden.

Besonders bei häufig auftretenden Elementen und großen Projekten spart das Zeit.

5. Komponenten und Varianten strukturieren

Die Komponenten wurden passend benannt und geordnet. So sind Buttons, Icons oder Navigation einfacher zu finden und einzufügen.

6. Module bilden

Aus den diversen Komponenten wurden Module gebildet.

Diese wurden dann auf einem App Layout zusammengefügt.

7. Responsive Design

Um ein späteres responsive Layout darstellen zu können, wurden die Komponenten mit Constrains versehen. So bleibt ein Objekt an der Stelle an, welcher es sich befindet oder vergrößert sich mit dem Layout.

Prototyp vom Userflow Lichter an/aus

Der Prototyp vom Userfolw ist im Folgenden Video dargestellt.

Zum Anfang des Kurses habe ich ausschließlich mit Adobe XD gearbeitet. FIGMA war mir nur ein geläufiger Begriff Programmes das in letzter Zeit häufiger in großen Unternehmen genutzt wird.

Das Kollaborative, strukturierte und einfache arbeiten ohne Abstürze oder Bugs gefiel mir sehr gut. Von 1/10 In FIGMA auf 8/10 Basiswissen in 2 Wochen. Prototyping und ein paar Kleinigkeiten werde ich mir noch selbst beibringen.

Beim Projekt war die fachliche Kompetenz von Phillip und das realitätsnahe Wissen sehr hilfreich. Vielen Dank :).