Seminar/Schulung: Figma

In diesem Seminar lernen Design-Teams, wie mit Figma responsive Komponenten und Layouts erstellt und in Bibliotheken und Design Systemen organisiert werden. Wir gestalten, animieren und präsentieren hochwertige visuelle Prototypen und erklären, was bei der Übergabe von UX/UI an ein Dev-Team beachtet werden muss.

Kurzbeschreibung

Figma hat die Design-Welt im Sturm erobert und steht nun seit einigen Jahren auf Platz 1 der beliebtesten Tools für UX/UI Design. Figma bietet erstklassige Funktionen für die Gestaltung und das Prototyping von Websites und Apps und hat es geschafft, den Design-Prozess kollaborativ und humorvoll zu gestalten. Figma dient dabei als zentraler Hub für das gesamte Team und bringt Menschen aus dem Design, der Entwicklung, dem Marketing und der Projektleitung in der Cloud zusammen. Mächtige Features zur Kommunikation und zum Durchführen von Workshops im Browser runden das Paket ab.

In unserer Figma-Schulung beschäftigen wir uns mit allen wichtigen Funktionen des Tools. Neben den programmspezifischen Features, vermitteln wir das notwendige Mindset zur Gestaltung digitaler Produkte.

Inhalte unserer Figma-Schulung

Die folgende Inhalte sind unsere Empfehlung für einen fundierten Einstieg in das Thema bzw. werden häufig gewünscht. Der Umfang beträgt, abhängig von den Vorkenntnissen und dem Anteil praktischer Übungen, meist zwischen 8h – 24h. Gerne passen wir die Agenda auf Ihre individuellen Anforderungen hin an, bzw. beziehen aktuelle Praxisprojekte mit ein. Wir stimmen uns dazu im Vorfeld der Schulung persönlich mit Ihnen ab.

Figma effizient verwenden

• Die Benutzeroberfläche
• Dateiorganisation, Versionierung & Co.
• Pages, Sections und Frames anlegen und organisieren
• Elemente zeichnen, Screens gestalten und Icons entwerfen
• Farben, Filter und Verläufe einsetzen
• Typografie und Textgestaltung
• Empfehlungswerte Plugins

Design Systematiken nutzen

• Gestaltungsraster, Spacing & Co.
• Farben, Schriften und Effekte in Stilen organisieren
• Variablen, Design Tokens & Co.

Modulares Design & Komponenten

• Komponenten erstellen und in Bibliotheken organisieren
• Varianten von Komponenten mit »Component Properties« erstellen
• Interaktive Komponenten (Mouse Over-Effekte etc.)

Responsive & Intrinsic Design

• »Resizing«, »Contraints« und absolute Positionierung
• Auto Layout, Min/Max-Width & Co.

Prototyping mit Figma

• Scrolling-Effekte und Viewport-Einstellungen
• Flows erstellen: Screens verknüpfen und Übergangseffekte gestalten
• Advanced Prototyping: Smart Animate, Variablen, If/Else & Co.
• Prototypen präsentieren

Figma Dev Mode / Figma für Entwickler

• Style Guides und Datenübergabe an die Entwicklung
• Dateien untersuchen, »Component Playground« & Code-Export
• Dev Mode, Dev Plugins und Integration in den Code-Editor Visual Studio

Kollaboratives Arbeiten mit Figma

• Bibliotheken verwalten und im Team bearbeiten
• Lizenzmodelle
• Freigabeeinstellungen
• Prototypen gemeinsam besprechen, Chat, Audio, Kommentare einfügen etc.

Dozent: Jonas Hellwig