In diesem Training befassen wir uns mit der systematisch Erstellung von Prototypen in Figma. Sobald die Kompexität der Screens und damit die Anzahl der benutzten Elemente zu nimmt, steigt auch die Gefahr, dass die Struktur des Projektes sich verschlechtert und irgendwann die Übersicht verloren geht.
Verstärkt wird die Problematik noch, wenn viele unterschiedliche Screens in dem Projekt hinzukommen und zu jedem Screen noch angepasste Screens für unterschiedliche Endgeräte oder Varianten.
Wir werden uns mit Konzepten, Techniken und Funktionen von Figma beschäftigen, die uns dabei helfen systematische, gut strukturierte und konsistente Prototypen zu erstellen.
Was muss ich mitbringen?
sicherer Umgang in Figma
Figma-Fertigkeiten
Hier stehen nur die Figma-Fertigkeiten, die neu dazukommen. Alles andere kennen Sie bereits aus den vorherigen Veranstaltungen.
Variables: In Variables legen Sie Farben, Zahlen und Schriftwerte einmal zentral an und verknüpfen sie mit Ihren Ebenen. Ändern Sie später einen Wert, ändert sich der ganze Podcast Player mit.
Figma-Hilfe · Video
Text Styles: Ein Text Style fasst Schrift, Größe, Schnitt und Zeilenabstand zusammen. Verknüpfen Sie diese Werte mit Ihren Typographie-Variablen, bleiben alle Texte einheitlich.
Figma-Hilfe (englisch) · Video
Variants: Mit Variants packen Sie verschiedene Zustände einer Komponente in ein Component Set, etwa Play und Pause. In der Instanz schalten Sie dann rechts in der Seitenleiste zwischen den Zuständen um.
Figma-Hilfe (englisch) · Video
Component Properties: Mit Properties für Text, Sichtbarkeit und Instance Swap passen Sie Instanzen an, ohne für jede Abwandlung eine neue Komponente zu bauen. Titel oder Icon ändern Sie dann direkt in der Seitenleiste.
Figma-Hilfe · Video
Auto Layout: Auto Layout (Shift + A) ordnet Elemente in einem Frame neben- oder untereinander an, mit festen Abständen und Innenabständen. Kommt ein Eintrag in der Playlist dazu oder fällt einer weg, rutscht der Rest von selbst nach.
Figma-Hilfe · Video
Constraints: Constraints bestimmen, was mit einer Ebene passiert, wenn ihr Frame breiter oder schmaler wird: ob sie am Rand bleibt oder mitwächst. Das brauchen Sie, um aus den Hochformat-Screens die Querformat-Versionen zu machen.
Figma-Hilfe (englisch) · Video
Plugins nutzen: Plugins rüsten Funktionen nach, die Figma selbst nicht hat. Für die Playlist nutzen Sie Google Sheets Sync, das die Einträge aus einer Tabelle in Ihr Design holt.
Figma-Hilfe (englisch)
In diesem Figma-Video wird Schritt für Schritt ein dynamisches Veranstaltungs-/Stundenplan-Layout aufgebaut. Zunächst wird eine Colorcode-Komponente inklusive Varianten erstellt. Anschließend werden mithilfe von Auto Layout strukturierte Textfelder für Wochentage und Uhrzeiten sowie für Veranstaltung und Lehrende angelegt. Danach werden Colorcode-Komponente und Haarlinie integriert, ein Profilbild der Lehrperson eingefügt und eine Veranstaltungsliste erstellt. Zum Schluss wird gezeigt, wie die Elemente automatisch mit Inhalten aus Google Sheets befüllt werden, sodass Aktualisierungen schnell übernommen werden können.
