Tutorials

Figma Tutorial: Seitenwechsel per Button-Klick erstellen (Prototyping)

Melden

In diesem Tutorial lernst du Schritt für Schritt, wie du in Figma eine einfache Interaktion erstellst: Beim Klick auf einen Button wechselt die Ansicht von einem Screen (Frame) zum nächsten.

Schritt 1: Die Vorbereitung (Die Screens anlegen)

Bevor du die Interaktion erstellen kannst, benötigst du zwei Screens auf deiner Arbeitsfläche:

  1. Erstelle zwei Frames:
    • Drücke die Taste F und wähle rechts eine Vorlage (z. B. ein Smartphone- oder Desktop-Format).
    • Benenne den ersten Frame z. B. in „Screen A“ und den zweiten in „Screen B“ um.
  2. Füge einen Button hinzu:
    • Erstelle auf Screen A ein Element, das als Button dient (z. B. ein Rechteck mit dem Text „Weiter“).
    • Gruppiere Text und Form oder nutze Auto Layout (Shift + A), damit der Button ein zusammenhängendes Element ist.

Schritt 2: In den Prototype-Modus wechseln

Standardmäßig befindest du dich im Design-Modus. Um Interaktionen hinzuzufügen, musst du die Ansicht wechseln:

  • Klicke oben rechts in der Seitenleiste auf den Reiter Prototype (neben Design).

Schritt 3: Den Button mit dem Ziel-Screen verbinden

Sobald du im Prototype-Modus bist, ändern sich die Auswahlrahmen deiner Elemente:

  1. Klicke auf deinen Button auf Screen A.
  2. Am rechten Rand des Buttons siehst du nun einen kleinen blauen Kreis mit einem Plus-Symbol (+).
  3. Klicke auf diesen Kreis, halte die Maustaste gedrückt und ziehe den blauen Pfeil (die Verbindungslinie) hinüber zu Screen B.
  4. Lass die Maustaste los, sobald Screen B blau aufleuchtet.

Schritt 4: Die Interaktions-Details einstellen

Nachdem du die Verbindung gezogen hast, öffnet sich automatisch das Fenster Interaction details. Stelle hier Folgendes ein:

  • Trigger (Auslöser): Wähle On click (Die Aktion startet, sobald der Nutzer klickt).
  • Action (Aktion): Wähle Navigate to (Navigiere zu).
  • Destination (Ziel): Hier sollte bereits automatisch Screen B ausgewählt sein.
  • Animation (Übergang):
    • Instant: Der Screen wechselt sofort ohne Übergang.
    • Dissolve: Ein weiches Überblenden von einem Screen zum nächsten.
    • Smart Animate oder Slide in: Für dynamischere App-Animationen. (Tipp: Für den Anfang eignet sich „Instant“ oder „Dissolve“ am besten).

Schritt 5: Den Prototyp testen

Überprüfe nun, ob alles wie gewünscht funktioniert:

  1. Klicke oben rechts in der Figma-Menüleiste auf das Play-Symbol (dreieckiges Icon für Present) oder das Icon daneben für den Preview-Modus.
  2. Ein neues Fenster oder eine Vorschau öffnet sich und zeigt deinen Screen A.
  3. Klicke auf deinen Button – der Prototyp springt nun automatisch zu Screen B!

Bonus-Tipp: Zurück-Button erstellen

Möchtest du wieder zurückspringen?

  • Erstelle auf Screen B einen Button (z. B. ein Pfeil-Icon oder Text „Zurück“).
  • Ziehe im Prototype-Modus die Verbindungslinie zurück zu Screen A ODER wähle im Interaktionsfenster unter Aktion einfach Back aus.
0