Figma ist das weltweit meistgenutzte cloudbasierte Design-Tool. Von UI/UX-Designern über Gründer bis hin zu Entwicklern und Marketern nutzen es alle. Auch im kostenlosen Plan bietet Figma leistungsstarke Funktionen – in diesem Guide lernst du das Tool von Grund auf bis zum fortgeschrittenen Level kennen.
Was ist Figma?
Figma ist ein browserbasiertes Design- und Prototyping-Tool. Du musst nichts auf deinem Rechner installieren – du kannst es direkt im Browser nutzen (es gibt auch eine Desktop-App). Dank der Echtzeit-Zusammenarbeit können mehrere Personen gleichzeitig an derselben Datei arbeiten.
Die wichtigsten Features von Figma:
- Cloudbasiert – Zugriff von überall
- Zusammenarbeit in Echtzeit – wie bei Google Docs
- Kostenloser Plan – für die private Nutzung ausreichend
- Komponentensystem (Components) – wiederverwendbare Designelemente
- Auto Layout – automatische Ausrichtung und Größenanpassung
- Prototyping – interaktive Prototypen erstellen
- Dev Mode – CSS-/Code-Export für Entwickler
Der Einstieg in Figma
Konto erstellen
Erstelle auf figma.com ein kostenloses Konto. Mit deinem Google-Konto kannst du dich mit einem Klick anmelden. Der kostenlose Plan enthält Folgendes:
- 3 Figma-Dateien
- Unbegrenzt viele persönliche Draft-Dateien
- 30 Tage Versionsverlauf
- Grundlegende Unterstützung für Komponenten und Stile
Die Oberfläche im Überblick
Die Figma-Oberfläche besteht aus vier Hauptbereichen:
Linkes Panel – Ebenen und Seiten:
Zeigt alle Elemente deiner Datei hierarchisch an. Hier wechselst du zwischen den Seiten.
Obere Werkzeugleiste:
Hier findest du die wichtigsten Werkzeuge: Auswahl (V), Frame (F), Form (R), Stift (P), Text (T) und Hand (H).
Rechtes Panel – Eigenschaften:
Hier bearbeitest du Eigenschaften des ausgewählten Elements wie Größe, Farbe, Schriftart und Effekte.
Mittlerer Bereich – Canvas:
Die unendliche weiße Fläche, auf der du dein Design erstellst. Du kannst beim Arbeiten hinein- und herauszoomen.
Grundlegende Werkzeuge
Frame (F)
Der Frame ist der Grundbaustein deines Designs. Mit Frames legst du Webseiten, mobile Bildschirme oder beliebige andere Flächen an.
Häufig verwendete Frame-Größen:
- iPhone 15 Pro: 393 x 852
- Desktop: 1440 x 900
- iPad: 834 x 1194
- Instagram Post: 1080 x 1080
Tipp: Drücke die Taste F und wähle im rechten Panel fertige Gerätegrößen aus.
Formwerkzeuge
- Rectangle (R): Rechteck – für Buttons, Karten und Hintergründe
- Ellipse (O): Kreis und Ellipse – für Profilfotos und Icons
- Line (L): Linie – für Trennlinien
- Polygon: Vieleck – für individuelle Formen
- Star: Stern – für Bewertungsgrafiken
Text (T)
Aktiviere das Textwerkzeug mit der Taste T. Im rechten Panel kannst du Folgendes einstellen:
- Font: Die gesamte Google-Fonts-Bibliothek steht zur Verfügung
- Größe: In Pixeln
- Gewicht: Regular, Medium, Semi Bold, Bold
- Zeilenhöhe (Line height): Abstand zwischen den Zeilen
- Buchstabenabstand (Letter spacing): Abstand zwischen den Buchstaben
Farbe und Stil
Jedes Element hat Eigenschaften für Füllung (Fill), Kontur (Stroke) und Effekte (Shadow, Blur).
Tipps zur Farbauswahl:
- Erstelle mit Coolors harmonische Farbpaletten
- Sieh dir deine Palette mit Realtime Colors in einer echten Website an
- Nimm mit der Pipette von Figma (Taste I) Farben aus vorhandenen Elementen auf
Das Komponentensystem (Components)
Komponenten sind die stärkste Funktion von Figma. Wenn du ein Designelement in eine Komponente umwandelst, kannst du es überall wiederverwenden. Änderst du die Hauptkomponente, werden alle Kopien automatisch aktualisiert.
Komponenten erstellen
- Wähle das Designelement aus
- Klicke mit der rechten Maustaste und wähle „Create Component“ (oder Ctrl+Alt+K)
- Die Komponente wird lila – das ist die Hauptkomponente (Main Component)
Komponenten verwenden
Wenn du die Hauptkomponente kopierst und einfügst, entsteht eine „Instance“ (Kopie). Instances:
- Übernehmen Änderungen der Hauptkomponente automatisch
- Lassen sich bei Eigenschaften wie Text oder Farbe lokal anpassen (Override)
- Können individuell bearbeitet werden, ohne die Komponente selbst zu verändern
Variants (Varianten)
Verschiedene Zustände einer Komponente verwaltest du mit Varianten. Zum Beispiel bei einer Button-Komponente:
- State: Default, Hover, Active, Disabled
- Size: Small, Medium, Large
- Type: Primary, Secondary, Outline
So erhältst du mit einer einzigen Button-Komponente 12 verschiedene Kombinationen.
Auto Layout
Auto Layout ist eine Funktion, die die Design-Effizienz in Figma dramatisch steigert. Sie funktioniert ähnlich wie Flexbox in CSS.
Was macht Auto Layout?
- Richtet Elemente automatisch aus (horizontal oder vertikal)
- Passt die Größe automatisch an, wenn sich der Inhalt ändert
- Du kannst Padding und Gap (Abstand) festlegen
- Du kannst Elemente neu anordnen (Drag-and-drop)
Auto Layout verwenden
- Wähle die Elemente aus
- Drücke Shift+A (oder klicke im rechten Panel auf „Add Auto Layout“)
- Stelle die Optionen im rechten Panel ein:
- Direction: Horizontal oder Vertical
- Padding: Innenabstand
- Gap: Abstand zwischen den Elementen
- Alignment: Ausrichtung
Praxisbeispiel – Button:
- Erstelle ein Rechteck
- Schreibe einen Text hinein
- Wähle beides aus und füge mit Shift+A Auto Layout hinzu
- Padding: links und rechts 24, oben und unten 12
- Jetzt wächst der Button automatisch mit, auch wenn der Text länger wird
Prototyping
In Figma kannst du deine statischen Designs in interaktive Prototypen verwandeln.
Grundlagen des Prototyping
- Wechsle im oberen Menü auf den Tab „Prototype“
- Wähle ein Element aus und ziehe vom blauen Kreis auf den Ziel-Frame
- Wähle die Art der Interaktion:
- On Click: Beim Klicken
- On Hover: Beim Darüberfahren
- On Drag: Beim Ziehen
- After Delay: Nach einer bestimmten Zeit
Animationen
Animationstypen für Übergänge:
- Instant: Sofortiger Übergang
- Dissolve: Überblendeffekt
- Move In / Move Out: Schiebeeffekt
- Smart Animate: Figma animiert die Unterschiede zwischen Elementen automatisch
Prototypen teilen
Mit dem „Play“-Button oben rechts kannst du den Prototyp testen. Über den „Share“-Button erstellst du einen Link und schickst ihn an Kunden, Entwickler oder Teamkollegen.
Designsysteme
Bei großen Projekten ist ein Designsystem für Konsistenz unerlässlich. In Figma besteht ein Designsystem aus folgenden Bausteinen:
Farbstile
Speichere die Farbpalette deines Projekts als Stile. Vergib aussagekräftige Namen wie „Primary“, „Secondary“, „Success“ oder „Error“. Wenn du eine Farbe ändern musst, aktualisierst du nur den Stil – alle Stellen, an denen er verwendet wird, ändern sich automatisch.
Typografiestile
Definiere alle Textstile wie Überschriften (H1–H6), Fließtext und Button-Text. Lege Schriftart, Größe, Gewicht und Zeilenhöhe fest.
Komponentenbibliothek
Erstelle alle UI-Elemente wie Buttons, Eingabefelder, Karten, Navigation und Modals als Komponenten und sammle sie in einer Bibliotheksdatei. Dein Team kann diese Bibliothek in allen Projekten nutzen.
Figma im Vergleich zu anderen Design-Tools
Figma vs. Canva
Canva ist ideal für Social-Media-Grafiken, Präsentationen und einfache Designs. Figma dagegen ist ein professionelles Tool für UI/UX-Design sowie für Web- und App-Design.
| Merkmal | Figma | Canva |
|---------|-------|-------|
| Zielgruppe | Designer, Entwickler | Alle |
| Komponentensystem | Fortgeschritten | Grundlegend |
| Prototyping | Ja | Nein |
| Auto Layout | Ja | Nein |
| Vorlagen | Community-Vorlagen | Große Vorlagenbibliothek |
| Lernkurve | Mittel | Niedrig |
Figma vs. Framer
Framer verbindet Design mit dem Veröffentlichen von Websites. Was du in Figma gestaltet hast, kannst du in Framer direkt in eine Website verwandeln.
Figma vs. Sketch
Sketch ist eine App ausschließlich für macOS. Da Figma browserbasiert ist, läuft es auf jeder Plattform. Die Echtzeit-Zusammenarbeit von Figma ist ein großer Vorteil gegenüber Sketch.
Nützliche Plugins für Figma
- Unsplash: Nutze kostenlose Stockfotos direkt in Figma
- Iconify: Greife auf eine Icon-Bibliothek mit über 100.000 Icons zu
- Content Reel: Füge realistische Dummy-Daten (Namen, Avatare, Texte) ein
- Contrast: Prüfung des Farbkontrasts auf Barrierefreiheit
- Autoflow: Erstelle Diagramme für Nutzerflüsse
Inspiration und Ressourcen
- Mobbin – UI/UX-Design-Inspiration aus echten Apps
- Figma Community – Tausende kostenlose Vorlagen und Komponenten-Kits
- Excalidraw – für schnelle Wireframe-Skizzen
- v0 – React-Komponenten per KI erzeugen und in Figma als Referenz nutzen
Häufig gestellte Fragen (FAQ)
Ist Figma kostenlos?
Ja, für die private Nutzung gibt es einen kostenlosen Plan. Du kannst 3 Figma-Dateien und unbegrenzt viele Draft-Dateien erstellen. Für Teamarbeit und erweiterte Funktionen brauchst du einen kostenpflichtigen Plan.
Ist Figma schwer zu lernen?
Die grundlegenden Werkzeuge lernst du in wenigen Stunden. Fortgeschrittene Funktionen wie das Komponentensystem und Auto Layout zu lernen dauert ein bis zwei Wochen. Auf YouTube gibt es kostenlose Tutorials.
Muss ich für Figma programmieren können?
Nein. CSS-Kenntnisse erleichtern es dir jedoch, die Konzepte von Auto Layout und Spacing zu verstehen. Auch ohne Entwickler zu sein, kannst du Figma problemlos nutzen.
Funktionieren meine Figma-Dateien offline?
Die Figma-Desktop-App bietet eingeschränkte Offline-Unterstützung. Dateien werden lokal zwischengespeichert und synchronisiert, sobald du wieder online bist. Für den vollen Funktionsumfang brauchst du aber eine Internetverbindung.
Wie mache ich aus meinem Figma-Design eine Website?
Dafür gibt es mehrere Wege:
- Framer – Importiere dein Figma-Design und veröffentliche es direkt als Website
- v0 – Gib dein Design als Referenz vor und lass dir per KI React-Code erzeugen
- Dev Mode – Kopiere mit dem Dev Mode von Figma die CSS-Codes und gib sie an Entwickler weiter
- Manuelle Programmierung – Setze das Design mit Cursor oder Bolt um und nimm es dabei als Vorlage
Kann ich in Figma Animationen erstellen?
Grundlegende Animationen (Smart Animate, Übergangseffekte) sind in Figma möglich. Für fortgeschrittene Animationen kannst du Tools wie Spline (3D-Animationen) oder After Effects verwenden.
Fazit
Figma ist aus der modernen Designwelt nicht mehr wegzudenken. Starte mit dem kostenlosen Plan und lerne nach und nach Komponentensystem, Auto Layout und Prototyping kennen – so entstehen Designs auf professionellem Niveau. Dank der Echtzeit-Zusammenarbeit arbeitest du im Team Hand in Hand, und mit dem Dev Mode gelingt die Übergabe an Entwickler reibungslos.
Besuche unsere Startseite von ToolHunters, um weitere Design- und Produktivitäts-Tools zu entdecken.
