[Design] Adobe XD Auto animation

วิธีการทำ Auto-animation ใน Adobe xd จัดเตรียมรูปแบบที่เราต้องการทำ ในตัวอย่าง จะทำเป็น ลิส ของรูปภาพ เมื่อเราคลิ๊กที่รูปภาพ จะมีข้อความปรากฎขึ้นใต้ภาพ ตัวอย่างภาพนี้จะมี Artboard ทั้งหมด 3 Artboard

• ภาพที่ 1 ด้านซ้าย จะเป็น ลิส ภาพทั้งหมด

• ภาพที่ 2 ตรงกลาง จะทำให้ภาพด้านล่างขยับลง

• ภาพที่ 3 ด้านขวา จะมีข้อความขึ้นมาโชว์

หลังจากเตรียมเสร็จแล้ว ต่อไปจะเป็นการ ทำ Prototype ในส่วนของ Auto animation แต่ก่อนจะเรื่มต้องเปลี่ยน tab ให้อยู่ในส่วนของ Prototype ก่อนนะครับ

• คลิ๊กที่ภาพแรก ลากเส้นให้ไปใน Artboard ที่ 2 จากนั้นให้เลือก Option ตามภาพ

• คลิ๊กภาพที่ 2 แต่ครั้งนี้จะให้ เลือกที่ชื่อ Artboard แล้วลากไปยัง Artboard ที่ 3 และตั้งค่าตามนี้

เสร็จแล้ว การทำ Auto animation ใน Adobe Xd