Skip to main content
0
FigmaUX/UI

ทำ Prototype แบบหลาย ๆ หน้าด้วย Figma (ง่ายสุด ๆ)

จากบทความก่อนหน้า เราได้แนะนำเครื่องมือในการออกแบบ สำหรับการทำ prototype ของแอพลิเคชั่น ที่ชื่อว่า Figma ( ลิงค์: https://www.borntodev.com/2020/04/14/ออกแบบ-prototype-ด้วย-figma/) โดยที่ได้แนะนำเครื่องมือเบื้องต้นในการจัดวางรูปแบบหน้าเว็ปหน้าเดียวให้สวยงามเท่านั้น แต่การทำแอพลิเคชั่นจริงนั้น มักมีมากกว่า 1 หน้าบทความนี้จึงเป็นบทความต่อยอดเพื่อนำเสนอเครื่องมือสำหรับทำ prototype หลายหน้าด้วย Figma มาดูกันเลย!

สร้างหน้าใหม่

เนื่องจากแอพลิเคชั่นมีหลายหน้าเราก็ต้องเตรียมหน้าอื่นๆ สำหรับลิงค์ไปหา สำหรับการขึ้นหน้าใหม่ให้เราใช้เครื่องมือ Frame เหมือนหน้าแรกได้เลย โดยลาก Frame ใหม่ขึ้นมาหรือจะเลือกจากขนาดที่มีอยู่แล้วก็ได้จากนั้นทำการจัดวางหน้าตาให้เรียบร้อย

ลิงค์ไปหน้าใหม่

สำหรับการตั่งค่าการลิ้งค์หน้าให้เรากดที่ปุ่มที่เราต้องการ

จากนั้นให้เลือกเมนู Prototype ที่เมนูด้านขวา

จะเห็นการเปลี่ยนแปลงที่ปุ่มที่เราต้องการลิ้งค์

ให้ทำการกดลากจากจุดสีขาวที่เพิ่มขึ้นมาไปยังหน้าที่เราต้องการก็สามารถลิ้งค์ไปอีกหน้าได้แล้ว

โดยวิธีลองเล่น prototype ของเราคือให้เรากดปุ่ม สามเหลี่ยม หรือปุ่ม present ที่อยู่ด้านขวาบน

หรืออีกวิธีคือตั้งค่าเองที่แถบเมนู Prototype โดยสามารถกำหนดค่าเพิ่มเติมได้เช่น animation ของการเปลี่ยนหน้า และ ระยะเวลาเปลี่ยนหน้า

และยังกำหนดเงื่อนไขการเปลี่ยนหน้าได้อีกด้วย(ครบเครื่องเกินไปแล้ว)

หรือถ้าอยากให้กดที่ปุ่มแล้วโยงไปลิงค์ที่กำหนดก็สามารถทำได้

ถ้าอยากได้เป็นรูปแบบ Modal ก็สามารถทำได้นะ!

สมมุติว่าเราอยากให้กดปุ่มรูปดาวแล้วให้มันขึ้น modal ขึ้นมาแจ้งเตือนว่ากด favorite แล้วนะ ให้เราโยงปุ่มเหมือนก่อนหน้านี้ก่อน

จากนั้นเปลี่ยนประเภทการเปลี่ยนหน้าเป็น Open overlay 

  • เซทตำแหน่งให้อยู่กึ่งกลาง
  • เพิ่มพื้นหลังให้เป็นสีดำ
  • เซทอนิเมชั่นเป็น Instant

เมื่อลองเล่นดูก็จะออกมาเป็นแบบนี้เลย

และยังสามารถตั้งค่าให้กดที่ตัว modal แล้วให้ modal หายไปได้อีกด้วย

เพียงเท่านี้ก็น่าจะเพียงพอต่อการลองทำ prototype แอพพลิเคชั่นแล้ว เรียกได้ว่าสุดยอดมากๆสำหรับ Figma ตัวนี้ และความครบเครื่องยังไม่หมดเพียงนี้เรายังสามารถทำงานร่วมกับผู้อื่นแบบออนไลน์ได้อีกด้วย ด้วยการกดที่ปุ่มแชร์ที่อยู่บนขวามือ

Developer

Author Developer

More posts by Developer
Close Menu

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้
    รายละเอียดคุกกี้

  • คุกกี้สำหรับการติดตามทางการตลาด

    ประเภทของคุกกี้ที่มีความจำเป็นในการใช้งานเพื่อการวิเคราะห์ และ นำเสนอโปรโมชัน สินค้า รวมถึงหลักสูตรฟรี และ สิทธิพิเศษต่าง ๆ คุณสามารถเลือกปิดคุกกี้ประเภทนี้ได้โดยไม่ส่งผลต่อการทำงานหลัก เว้นแต่การนำเสนอโปรโมชันที่อาจไม่ตรงกับความต้องการ
    รายละเอียดคุกกี้

บันทึกการตั้งค่า