Tutorials

Figma Flowchart Tutorial: Der vollständige Leitfaden zur Erstellung von Flussdiagrammen

Melden

Ein Flussdiagramm (Flow Chart) ist eines der mächtigsten Werkzeuge, um Prozesse, User Flows oder Systemarchitekturen visuell darzustellen. Obwohl Figma primär als UI/UX-Design-Tool bekannt ist, eignet es sich dank Auto-Layout, Komponenten und flexiblen Vektorwerkzeugen hervorragend für die Erstellung professioneller Diagramme.

In dieser Anleitung lernst du Schritt für Schritt, wie du ein sauberes, skalierbares und ansprechendes Flussdiagramm in Figma erstellst.

Schritt 1: Das Grundgerüst aufsetzen (Frame & Raster)

Bevor du Elemente platzierst, schaffe eine strukturierte Arbeitsfläche:

  1. Frame erstellen: Drücke die Taste F und ziehe einen ausreichend großen Frame auf (z. B. im Format Desktop oder eine benutzerdefinierte Größe).
  2. Layout-Raster aktivieren: Wähle den Frame aus, klicke in der rechten Seitenleiste bei Layout Grid auf das Plus-Symbol (+) und stelle ein Raster (Grid) von z. B. 8px oder 16px ein. Das hilft dir später, Abstände konsistent zu halten.

Schritt 2: Die Standardsymbole verstehen und zeichnen

Ein gutes Diagramm spricht eine universelle Sprache. Nutze für verschiedene Aktionen standardisierte Formen:

  • Rechteck (R): Ein standardmäßiger Prozessschritt oder eine Aktion.
  • Raute / Rhombus: Eine Entscheidung (Verzweigung, meist mit „Ja/Nein“-Ausgängen).
    • Tipp: Zeichne ein Quadrat (R gedrückt halten mit Shift) und rotiere es um 45 Grad.
  • Pille / Abgerundetes Rechteck: Start- und Endpunkte des Prozesses.
  • Parallelogramm: Input oder Output von Daten.

Schritt 3: Der Gamechanger – Auto Layout nutzen

Damit deine Textboxen automatisch mitwachsen, wenn sich der Text ändert, solltest du Auto Layout verwenden:

  1. Wähle das Textwerkzeug (T) und schreibe eine Aktion (z. B. „Konto erstellen“).
  2. Klicke mit der rechten Maustaste auf den Text und wähle Add Auto Layout (oder nutze das Tastenkürzel Shift + A).
  3. Gib dem neuen Frame in der rechten Leiste eine Hintergrundfarbe (Fill), runde die Ecken ab (Corner Radius) und stelle ein gleichmäßiges Innenpolster (Padding) ein.
  4. Der Vorteil: Wenn du den Text nun bearbeitest, passt sich die Form dynamisch an.

Schritt 4: Formen mit Verbindungslinien verknüpfen

Um die Reihenfolge der Schritte darzustellen, benötigst du Pfade und Pfeile:

  1. Linienwerkzeug: Drücke L für eine einfache Linie oder Shift + L direkt für das Pfeil-Werkzeug (Arrow Tool).
  2. Endpunkte anpassen: Wähle eine Linie aus. Im rechten Bereich unter Stroke kannst du das Linienende von einem einfachen Strich zu einer Pfeilspitze ändern.
  3. Pfeile beschriften: Wenn du Verzweigungen hast (z. B. nach einer Entscheidungsraute), platziere ein kleines Textfeld mit „Ja“ oder „Nein“ direkt über oder neben die Linie.

Tipp für Fortgeschrittene: Nutze das Plugin Autoflow. Damit klickst du einfach zwei Formen nacheinander an, und Figma verbindet sie automatisch mit einer perfekten Linie inklusive Pfeil.

Schritt 5: Visuelle Hierarchie und Farbcodierung

Ein gutes Diagramm ist auf den ersten Blick verständlich. Nutze Farben sparsam, aber bedeutungsvoll:

  • Grün: Startpunkte oder erfolgreiche Pfade (z. B. „Zahlung erfolgreich“).
  • Rot / Orange: Fehler, Abbrüche oder Warnungen (z. B. „Passwort falsch“).
  • Blau / Grau: Neutrale Standardprozesse.
  • Linienstile: Nutze durchgezogene Linien für den Hauptpfad und gestrichelte Linien (einstellbar unter Stroke > Advanced stroke settings > Dash) für optionale Pfade oder System-Rückmeldungen.

Schritt 6: Skalierbarkeit durch Komponenten

Wenn du komplexe Diagramme planst, solltest du deine Formen in Komponenten umwandeln:

  1. Erstelle die Basis-Formen (Start, Prozess, Entscheidung, Ende).
  2. Wähle eine Form aus und klicke oben in der Werkzeugleiste auf das Komponenten-Symbol (Create Component bzw. Strg + Alt + K / Cmd + Option + K).
  3. Nutze nun Instanzen (Kopien) dieser Komponenten für dein Diagramm.
  4. Der Vorteil: Wenn du später entscheidest, dass alle Entscheidungsknoten gelb statt grau sein sollen, änderst du einfach die Hauptkomponente, und das gesamte Diagramm aktualisiert sich automatisch.

Alternative: Wann lohnt sich FigJam?

Figma bietet neben der reinen Design-Umgebung auch das Whiteboard-Tool FigJam an:

  • FigJam hat native, magnetische Verbindungslinien, vorgefertigte Flowchart-Shapes und eignet sich perfekt für schnelles Brainstorming und Team-Kollaboration.
  • Figma Design bietet dir hingegen 100 % visuelle Kontrolle, exakte Pixel-Ausrichtung, Auto-Layout und die direkte Integration in deine UI-Design-Systeme.

Checkliste für dein fertiges Flussdiagramm:

  • [ ] Gibt es einen eindeutigen Start- und Endpunkt?
  • [ ] Zeigen alle Pfeile in eine logische Leserichtung (meist von links nach rechts oder von oben nach unten)?
  • [ ] Sind alle Entscheidungspfade (Ja/Nein) eindeutig beschriftet?
  • [ ] Sind die Abstände zwischen den Elementen einheitlich?
  • [ ] Ist der Text kurz, prägnant und im Imperativ formuliert (z. B. „E-Mail eingeben“ statt „Der Nutzer gibt seine E-Mail ein“)?
0