Diese Lektion gibt dir einen Überblick darüber, was Figma ist, seine Funktionen und warum es ein bevorzugtes Tool für Designer ist.

Lerne, wie du ein Figma-Konto erstellst und wie du effektiv auf deine Drafts, Projekte und Teamdateien im Dashboard zugreifst und diese verwaltest.

Ich zeige dir, worum es in diesem Kapitel geht.

Erhalte einen schnellen Überblick über die Menüs und Werkzeugleisten von Figma und ihre wichtigsten Funktionen.

Erfahre, wie du Seiten in deinen Figma-Projekten effizient organisierst und zwischen ihnen navigierst.

Lerne nützliche Shortcuts und Features kennen, die deine Arbeit in Figma beschleunigen und vereinfachen.

Entdecke, wie du die Figma-Community für Vorlagen und Inspiration nutzen und dich mit Designern austauschen kannst.

Wofür sind die einzelnen Leisten im Interface gut?

Ich erkläre dir, welche Themen wir in diesem Kapitel besprechen.

Entdecke, wie du Frames in Figma benutzt, um deine Designelemente zu strukturieren und zu organisieren. Lerne die Unterschiede zwischen Frames und Gruppen und wie du Frames effektiv für komplexe Layouts einsetzt.

Lerne, wie du Text in Figma hinzufügst, anpasst und Schriftarten auswählst, um Textstile für Klarheit und visuelle Wirkung zu nutzen.

Erfahre, wie du grundlegende Formen wie Rechtecke, Kreise und andere Formen gestaltest, einschließlich Techniken für abgerundete Ecken.

Erkunde die effektive Nutzung von Farben in deinen Projekten.

Hier lernst du, wie du Linien und Konturen in deinen Designs effektiv einsetzt, um visuelle Trennungen und Akzente zu schaffen.

Lerne das Zeichentool kennen, um benutzerdefinierte Vektorformen und einfache Illustrationen zu erstellen.

Hier lernst du, wie du die Größe von Objekten und Texten verändern kannst.

Erfahre, wie du Lineale und Hilfslinien in Figma für präzise Ausrichtungen und Maße nutzt.

Verstehe, wie Slices in Figma verwendet werden, um Designelemente für die Exportierung vorzubereiten und wie du sie effizient nutzen kannst, um deine Assets zu managen.

Erfahre, wie du einzelne oder mehrere Bilder hochlädst, sie in deine Designs einfügst und organisierst.

Lerne, welche Plugins dir helfen, effektiv mit Icons zu arbeiten und wie du diese Plugins in Figma installierst und nutzt.

In dieser Lektion wendest du dein erlerntes Wissen an, indem du ein Youtube Thumbnail gestaltest. Du wirst lernen, wie du visuelle Elemente kombinierst, um ein ansprechendes Design zu kreieren.

Lerne, Schlagschatten zu nutzen, um Elementen visuelle Tiefe zu verleihen.

Finde heraus, wie du mit inneren Schatten coole Effekte wie Eintiefungen kreierst.

Spiel mit Unschärfe, um tolle Fokus- und Weichzeichnungseffekte zu zaubern.

Nutze Hintergrundunschärfe, um Elemente vor verschwommenen Hintergründen hervorzuheben.

Erfahre, wie du das 'Align' und 'Tidy' Werkzeug nutzt, um Elemente präzise auszurichten und organisiert anzuordnen.

Lerne, das 'maskieren' Feature zu verwenden, um kreative visuelle Effekte durch Überlagerungen und Ausschnitte zu erzielen.

Erkunde die 'Boolean Operations' – Union, Subtract, Intersect, und Exclude – und wie du sie zur Gestaltung komplexer Vektoren einsetzt.

Verstehe, wie und wann du 'Outline Stroke' anwendest.

Sichere deine Projekte korrekt ab.

Ein Überblick über die Vorteile von Styles für einheitliche und wiederverwendbare Designelemente.

Lerne, wie du Farb-Styles, Text-Styles und Effekt-Styles erstellst und in deinen Projekten einsetzt, um die Konsistenz zu bewahren.

Ein Überblick, was Auto Layout ist und wie es dynamische Layouts ermöglicht

Lerne, wie du flexible Constraints nutzt, um Elemente responsiv zu machen.

Erfahre, wie du verschachtelte Auto Layouts für komplexe und dynamische Strukturen nutzt.

Entdecke hilfreiche Tricks und vermeide typische Fehler bei der Nutzung von Auto Layout und Constraints.

• Erstelle einen responsiven Login-Screen für eine mobile App mit Textfeldern, einem Login-Button und einer sicheren Anpassung an verschiedene Bildschirmgrößen.

Verknüpfe verschiedene Screens zu einem einfachen Userflow, der die Navigation durch eine App simuliert.

Ein Überblick darüber, was Libraries sind und warum sie für große Projekte und Design-Systeme unerlässlich sind.

Lerne, wie du eine Library erstellst, um Komponenten und Styles für wiederverwendbare Designelemente zu organisieren.

Erfahre, wie du deine Library veröffentlichst und mit deinem Team teilst, damit alle auf die gleichen Designelemente zugreifen können.

Ein Überblick, was Komponenten und Instanzen sind und warum sie die Basis für effizientes und konsistentes Design bilden.

Erstelle deine erste Komponente und erfahre, wie Instanzen funktionieren. Lerne den Unterschied zwischen der Hauptkomponente und ihren Instanzen.

Finde heraus, wie du Instanzen anpasst, ohne die Hauptkomponente zu verändern. Ändere Text, Farben und Styles flexibel.

Erfahre, wie du verschachtelte Komponenten baust, um komplexe UI-Elemente zu gestalten, die sich leicht aktualisieren lassen.

Tipps zur effektiven Benennung und Verwaltung von Komponenten innerhalb eines Design-Systems, um Konsistenz und Übersichtlichkeit zu gewährleisten.

Erstelle eine Button-Komponente mit mehreren Varianten (z. B. Outline, Vollfarbe, verschiedene Größen und Icons), die in verschiedenen UI-Szenarien verwendet werden kann.

Überblick über Figma-Prototyping, um interaktive und klickbare Designs zu erstellen.

Automatisiere Übergänge zwischen verschiedenen Zuständen deiner Designs mit Smart Animate.

Wir gestalten Buttons mit Hover-Animationen, um die Benutzerfreundlichkeit zu verbessern.

Füge kleine Animationen hinzu, die direktes Feedback geben, z. B. für Klicks oder Ladeanzeigen.

Erstelle einen klickbaren mobilen Prototyp mit Animationen, Userflow und Mikrointeraktionen.

Ein Überblick über die Kollaborations-Tools in Figma, die das Arbeiten im Team erleichtern.

Erfahre, wie du Kommentare nutzt, um Feedback zu sammeln und Diskussionen direkt im Design zu führen.

Entdecke FigJam und seine Funktionen für gemeinsames Brainstorming, Wireframing und schnelle Skizzen.

Zeige deinen Prototypen im Präsentationsmodus und nutze das neue Slide Deck-Tool, um professionelle Präsentationen direkt in Figma zu erstellen.

Überblick über das Projekt: Was wir gestalten und welche Schritte uns erwarten.

Vorstellung des fiktiven Kunden und Besprechung der Anforderungen.

Lege den Stil und die Designrichtung fest, um die visuelle Basis zu schaffen.

Entwerfe das Grundgerüst der Landingpage mit Fokus auf Struktur.