Wischgesten in Adobe XD erstellen.

Digital Designer Zhenya Rynzhuk entwickelt User Experiences nach den Prinzipien des Design Thinking und verhilft so ihren Kunden zu mehr geschäftlichem Erfolg. Sie bietet sowohl Neuentwicklungen als Komplettpaket als auch Redesigns im Rahmen von Kooperationen an.

Cynthia Fong dupliziert ihre Originalzeichenfläche. In Adobe XD bleiben beim Duplizieren der Zeichenflächen die Ebenennamen erhalten, was für spätere Arbeiten an der Animation wichtig ist.

Auf der neuen Zeichenfläche behält Cynthia Fong die Gruppierung des Karussells bei. Per Doppelklick auf ein Bild ändert sie im Eigenschafteninspektor die Werte für Größe und Position. Die Bilder sollen dadurch in den Fokus und wieder herausrücken, wenn der User durch das Karussell wischt. Außerdem verschiebt sie die Textebene aus der ersten Gruppe in die zweite und bearbeitet den Text.

Für die Definition der User-Interaktionen aktiviert Cynthia Fong den Prototyp-Modus. Sie macht einen Doppelklick auf das mittlere Bild auf der ersten Zeichenfläche und verdrahtet es mit der zweiten Zeichenfläche. Sie setzt den „Trigger“ auf „Ziehen“. Dadurch wird für die „Aktion“ automatisch „Auto-Animate“ aktiviert. Dann zieht sie noch einen Draht vom mittleren Bild auf der zweiten Zeichenfläche zurück zur ersten Zeichenfläche. Adobe XD wendet automatisch ihre vorherigen Einstellungen an. Zum Schluss testet sie die Interaktion in der Vorschau.

Mit Wischgesten kannst du realistische User-Interaktionen in deiner Mobile App erstellen.

Hinweis: Die mit diesem Tutorial bereitgestellten Projektdateien dürfen ausschließlich zu Übungszwecken verwendet werden.