click-dummy mit figma

Jun 5, 2019Cuckoo Coding GmbH, Deutsch, UX Design

Mit Figma kannst Du schnell und umsonst einen App Prototypen erstellen, durch den sich der User wie durch eine echte App durchklicken kann. Ich will Euch hier kurz zeigen, wie das Erstellen von und das Wechseln zwischen zwei Screens funktioniert.

Einen neuen Screen erstellen

Zuerst erstellen wir zwei neue Screens ( auch “Frames” genannt ), zwischen denen wir später hin und her wechseln wollen. Über „New File“ kannst Du ein neues Projekt bei Figma anlegen. In der oberen Navigationsbar findest Du verschiedenen Tools: auf der linken Seite kannst du einen neuen Screen erstellen,

verschiedenen Formen in diesen Screen einfügen oder ein Textfeld erstellen und Du findest hier auch einen Stift zum Zeichnen. Mittig in der Navigationsbar kannst du Dein Projekt benennen. Auf der rechten Seite kommst du zum Präsentationsmodus. Darauf gehe ich später noch näher ein.

Klicke links in der Toolbar auf das Gitter-Icon und füge ein neues Frame hinzu. Wähle im Menü auf der rechten Seite eine Formatgröße aus, dann erscheint der Screen in Deinem File. Füge auch gleich einen zweiten Screen hinzu.

Buttons hinzufügen

Bei den Shape Tools (das Quadrat-Icon) links in der oberen Navigationsbar findest Du die Form “Rectangle”. Füge eines zu Deinem linken Frame hinzu. Um das Rectangle zu fixieren klicke in Deinen Screen und zieh mit der gedrückten Maustaste das Rectangle in die Größe, die es haben soll.

Rechts findest du die verschiedenen Optionen um Deinen neuen Button zu bearbeiten. Du kannst zum Beispiel die Ecken abrunden, dem Button eine beliebige Hintergrundfarbe geben, oder auch verschiedene Effekte hinzufügen. Im Bild oben findest Du im linken Screen, “Screen 1”, einige Beispiele wie so ein Rectangle nach der Bearbeitung aussehen kann.

Click-Dummy erstellen

Rechts im Menü ganz oben klick auf den “Prototype” Tab. Jetzt kannst Du anfangen, Click – Funktionen zu erstellen. Wenn du mit Deiner Maus über einem Deiner Buttons schwebst, leuchtet ein blauer Kreis auf mit einem kleinen Kreis daran.

Greife den Kreis und ziehe ihn mit der Maustaste zu dem anderen Screen – bzw. zu dem Screen, der geöffnet werden soll, wenn der User diesen Button anklickt.

Wenn du außerhalb der Frames klickst, kannst du sehen, welche Buttons du alle schon verlinkt hast und wohin.

Für die Präsentation Deines Projektes klicke auf der oberen Navigationsbar, auf der rechten Seite auf das kleine Startpfeilchen. Jetzt öffnet sich ein neues Fenster und Du kannst Dich live durch Deinen Prototypen klicken. Den Link kannst du auch kopieren und versenden, damit sich andere Dein Projekt ansehen können.

Viel Spaß beim Ausprobieren!

Laura