เปิดโลก UX/UI กับโปรแกรม “ Figma ”
ก่อนอื่นเลยถ้าถามว่าทำไม Figma ถึงเปิดโลก UX/UI ของเรา
เราเป็นกราฟิกดีไซน์ที่เรียกได้เลยว่า มีประสบการณ์เกี่ยวกับ UX/UI น้อยมาก เพราะเราเรียนแค่คลาสสั้น ๆ เท่านั้น ซึ่งตอนเรียนอาจารย์ก็สอนเราดีไซน์งานด้วยโปรแกรม Adobe illustrator (AI)แล้ว export รูปจาก AI ไปใส่ใน Website เพื่อสร้างเป็น Prototype ส่งงานอาจารย์ เรารู้สึกว่ามันค่อนข้างซับซ้อน และเราก็งงกับมันมาก ยิ่งต้องทำโปรเจคกันเป็นกลุ่มอีก เอาเป็นว่าโปรเจคตัวนั้นทำงานกัน 9 คน ปุ่มแต่ละหน้าไม่เหมือนกันสักหน้า ดูออกเลยว่าหน้าไหนเป็นของใครกันบ้าง เราเลยขอโบกมือลา UX/UI ไว้ในคลาสนั้น และจุดเปลี่ยนมันอยู่ตรงนี้แหละค่ะ ช่วงที่เราฝึกงาน เราเห็นพี่ ๆ นั่งดีไซน์เว็บไซต์อยู่ เรารู้สึกแบบ เอ๊ะ! พี่เค้าทำงานในโปรแกรมอะไรนะ หน้าตาไม่เหมือน AI เลยหนิ
เท่านั้นแหละจ่ะ
“ โปรแกรมออกแบบ UX/UI ไม่ได้มีแค่ AI!!!! มันมี Sketch, Adobe , Figma ต่าง ๆ นานาที่มันใช้ออกแบบได้ !!! ”
*เราไม่ได้โง่นะ เราแค่ซื่อ เชื่อในสิ่งที่อาจารย์สอนก็แค่นั้น*
เราเลยขอให้พี่ ๆ ช่วยสอนใช้ Figma ซึ่งมันง่ายกว่าที่คิดมาก แถมยังทำงานร่วมกับคนอื่นแบบ Real-time ได้อีกด้วย
การใช้งาน Figma อย่างง่าย ~
สามารถใช้งานผ่านเว็บไซต์หรือ Download ไปใช้งานบน Desktop ได้นะคะ
มาเริ่มสร้าง Project กันนนน
เริ่ม!!!
การสร้างโปรเจกต์
- กดเครื่องหมาย + มุมซ้ายด้านบน
- กด Tools (Frame) ในวงกลม และเลือก Prototype ตรงแถบด้านขวา
- กด Tools แล้วเลือก Shape ที่จะสร้าง [แถบด้านขวาจะบอกขนาด Shape การเปลี่ยนสี (Fill) การใส่ effect ต่างๆ]
***ถ้าหากต้องการทำงานร่วมกับคนอื่นก็สามารถแชร์ไฟล์ให้คนอื่นเข้ามา Edit ทำงานร่วมกันกับเราได้
- กด Share ตรงมุมขวา แล้วจะขึ้นหน้าต่างใหม่ขึ้นมาตามรูป คลิกเปลี่ยนจาก can view เป็น can edit หลังจากนั้นคลิก Copy link แชร์ไฟล์งานให้กับคนในทีมได้เลย
พอเราดีไซน์งานทั้งหมดเสร็จก็มาถึงขั้นตอนสร้าง Prototype
- กด เครื่องหมายในวงกลม
และเราก็ได้ Prototype มาแล้วจ้าาาา
มีอีกหนึ่งสิ่งที่สำคัญ !!!
มัน Auto-saves !!!!! 🎉🎉🎉
กด X ออกได้เลยจ้าไม่ต้อง Ctrl+S / Command + S กันให้เมื่อยนิ้วค่า
แต่ในข้อดีมันก็ต้องมีข้อเสียใช่มั้ยล่ะ
หลักๆเลยคือ Figma ไม่สามารถใช้งานแบบออฟไลน์ได้ ต้องเชื่อมอินเทอร์เน็ตเพื่อทำงานเท่านั้น
สุดท้ายนี้ขอขอบคุณทุกคนที่เข้ามาอ่าน Medium ของเรานะคะ
ขอบคุณค่ะ
