Was es ist
Knotengraph-Editor für Screens. Jeder Knoten ist ein Screen (Hauptmenü / Inventar / Einstellungen / Pause / …) mit optionalem Mockup-Bild; Kanten repräsentieren Übergänge, die durch Nutzeraktionen ausgelöst werden. Nützlich für UX-Reviews und das Einarbeiten neuer UI-Entwickler.
Wann du es nutzen solltest
- Einen neuen Screen-Flow entwerfen, bevor du ihn in Figma mockst.
- Dem Team zeigen, wie das Inventar mit dem Crafting mit dem Shop verbunden ist.
- Eine UX-Sackgasse erkennen (ein Screen ohne Rückweg).
- Einen UI-Entwickler über jeden Übergang briefen, den er skripten muss.
Wie du es nutzt
- 1Auf „+ Screen hinzufügen“ klicken und einen Namen vergeben.
- 2Ein Mockup-Bild zum Screen-Knoten hochladen (optional, aber kraftvoll).
- 3Vom Ausgangs-Port eines Screens zu einem anderen ziehen, um einen Übergang zu definieren.
- 4Kanten mit dem Auslöser beschriften („Inventar öffnen“, „B drücken“, „Item aufgesammelt“).
Tipps, die du kennen solltest
- →Live-Cursor: Teammitglieder, die denselben Flow bearbeiten, sehen einander sich bewegen.
- →Mockup-Bilder werden in R2 gespeichert und zählen auf dein Projektspeicherbudget.
- →Nutze farbcodierte Kategorien für Modal vs. Vollbild vs. HUD-Overlays.
- →Exportiere den Flow als PNG (Rechtsklick auf Leinwand → Exportieren) für Foliendecks.