Figma Grundlagenkurs

In diesem dreitägigen Intensivkurs lernen Sie, wie sie mit Figma professionelle Benutzeroberflächen gestalten, strukturieren und prototypisieren.

Der Kurs vermittelt die wichtigsten Funktionen des Tools – von den Design-Grundlagen über Komponenten und Auto Layout bis hin zu interaktiven Prototypen und Teamwork-Features. Durch praxisnahe Übungen können die Teilnehmenden das Gelernte sofort anwenden und am Ende ein eigenes, vollständiges UI-Konzept inklusive klickbarem Prototyp präsentieren.

Kontakt aufnehmen

Ihre Vorteile

Effizienz steigern: Zeitraubende Aufgaben automatisieren
Kreativität entfesseln: Neue Designideen in Sekunden generieren
Praxisnah lernen: Schritt-für-Schritt-Übungen

Kursinhalte in Figma:

Tag 1 – Grundlagen & Einstieg in Figma

Ziel:

Verständnis der Figma-Oberfläche, grundlegende Werkzeuge und Erstellung erster Designs.

Inhalte:

Einführung & Überblick
- Was ist Figma und wofür wird es genutzt?
- Unterschiede zu anderen Design-Tools (Sketch, Adobe XD, etc.)
- Cloud, Browser und Desktop-App
Benutzeroberfläche & Navigation
- Toolbar, Layers, Properties Panel
- Canvas und Zoom-Steuerung
Dateien & Projekte
- Projekte anlegen, Dateien strukturieren
- Zusammenarbeit & Freigabeeinstellungen
Grundlegende Design-Werkzeuge
- Formen, Text, Farben, Bilder
- Ausrichten, Gruppieren, Layer-Management
Praktische Übung
→ Erstelle dein erstes App-Layout (Login- oder Dashboard-Screen)
Auto Layout (Basis)
- Dynamische Layouts mit Auto Layout
- Abstände, Padding und Alignment

Tag 2 – Komponenten, Styles & Prototyping

Ziel:

Konsistente UI-Elemente gestalten und interaktive Prototypen erstellen.

Inhalte:

Farben, Typografie & Styles
- Text- und Farb-Styles definieren
- Style-Guides und Designrichtlinien
Komponenten & Varianten
- Wiederverwendbare UI-Elemente
- Varianten für States (Hover, Active, Disabled)
Mini Design-System aufbauen
- Komponentenbibliothek und Namenskonventionen
- Nutzung von Libraries
Prototyping in Figma
- Frames verlinken, Interaktionen und Animationen
- Smart Animate, Overlays, Scroll-Effekte
- Prototypen testen & präsentieren
Praktische Übung
→ Erstelle einen klickbaren Prototyp

Tag 3 – Teamwork, Plugins & Abschlussprojekt

Ziel:

Effiziente Zusammenarbeit, Erweiterungen nutzen und ein komplettes Projekt abschließen.

Inhalte:

Zusammenarbeit im Team
- Kommentare, Live-Kollaboration, Version History
- Design Review & Feedbackprozesse
Übergabe an Entwickler:innen
- Inspektor-Panel & Code-Export
- Dev Mode & Plugins für Handoff
Plugins & Figma Community
- Top Plugins: Unsplash, Iconify, Figmotion, Content Reel
- Community-Ressourcen & Vorlagen nutzen
Erweiterte Techniken
- Komponenten mit Variablen & Tokens
- Barrierefreiheit und Responsive Design