UX/UI Design with Figma
23 May 2022, DIIS PSU by DIIS Development Guideline team
What is an UX/UI Design?
User Interface และ User Experience (UI/UX) เป็นกระบวนการออกแบบที่มีการคำนึงถึงผู้ใช้เป็นสำคัญ มีหลายวิธีในการออกแบบ UI/UX ขึ้นอยู่กับความต้องการและสภาพแวดล้อมของโปรเจค วิธีการที่พบบ่อยคือการใช้กระดาษวาดเพื่อสร้างร่างก่อน นอกจากนี้ยังมีเครื่องมือที่ถูกพัฒนาขึ้นเพื่อสนับสนุนการออกแบบในรูปแบบอิเล็กทรอนิกส์อีกด้วย เช่น Figma, Adobe XD, Sketch, Zeplin และ Uizard เป็นต้น
What is Figma?
Figma เป็นโปรแกรมสำหรับการออกแบบ User Interface (UI) และ User Experience (UX) ที่เป็นเครื่องมือออกแบบที่ทำงานบนเว็บเบราว์เซอร์ มันมีความคล้ายคลึงกับโปรแกรมออกแบบจาก Adobe Creative Cloud อย่าง Photoshop, Illustrator, และ Sketch แต่ Figma อนุญาตให้นักออกแบบทำงานร่วมกันได้บนพื้นฐานของคลาวด์ (cloud) โดยสามารถทำงานแบบ real-time collaboration ซึ่งหมายความว่าหลายคนสามารถเข้าถึงโปรเจกต์เดียวกันได้พร้อมกันและแก้ไขหรือให้ความคิดเห็นในเวลาเดียวกัน นอกจากนี้ยังมีฟีเจอร์อื่น ๆ เช่นการแสดงตัวอย่างแบบจำลองการใช้งานจริง (prototyping), การสร้างคู่มือการออกแบบ (design documentation), การทำงานแบบทีม (team collaboration) และอื่น ๆ อีกมากมาย
Browser-based application
Figma ออกแบบมาเพื่อการใช้งานบนเว็บเบราว์เซอร์เป็นหลัก เพราะฉะนั้นคุณสามารถเข้าถึงและใช้งาน Figma ได้จากอุปกรณ์ใดก็ได้ที่สามารถเข้าเว็บได้ เช่น คอมพิวเตอร์เดสก์ท็อป, แท็บเล็ต, โทรศัพท์มือถือ และอื่น ๆ ที่สามารถเชื่อมต่อกับอินเทอร์เน็ตได้
นอกจากนี้ Figma ยังมีเวอร์ชันแอปพลิเคชันสำหรับ Windows และ macOS ที่คุณสามารถดาวน์โหลดและติดตั้งลงในเครื่องคอมพิวเตอร์ของคุณเพื่อใช้งานในโหมดออฟไลน์ได้ แบบแอปพลิเคชันจะช่วยให้คุณสามารถเข้าถึงโปรเจกต์ของคุณได้ทันทีโดยไม่ต้องเปิดเบราว์เซอร์ก่อน นอกจากนี้ การทำงานในโหมดออฟไลน์ยังช่วยให้คุณสามารถทำงานได้ตลอดเวลาโดยไม่จำเป็นต้องเชื่อมต่ออินเทอร์เน็ตทุกครั้ง
Real-time collaboration
คุณสามารถทำงานพร้อมกับผู้อื่นได้ในเวลาเดียวกันในไฟล์เดียว นั่นหมายความว่าหลายคนสามารถเข้าถึงและแก้ไขไฟล์เดียวกันได้พร้อมกัน โดยคุณจะสามารถเห็นกิจกรรมของผู้ใช้อื่นที่กำลังทำงานอยู่ในไฟล์นั้น และคุณยังสามารถดูความคืบหน้าของงานที่ผู้ใช้อื่นกำลังดำเนินอยู่ในเวลาเดียวกันด้วย นี่จะช่วยให้ทีมสามารถทำงานร่วมกันได้อย่างมีประสิทธิภาพและประสบความสำเร็จในการออกแบบ
Community
ใน Figma, มีคอมมูนิตี้ที่ช่วยให้คุณใช้งานได้ง่ายและมีประสิทธิภาพมากยิ่งขึ้นดังนี้:
-
Plugins: Figma มีการสนับสนุน Plugins ซึ่งเป็นเครื่องมือเสริมที่ช่วยให้คุณทำงานได้เร็วขึ้นและมีประสิทธิภาพมากขึ้น มีหลากหลาย Plugins ที่พร้อมใช้งาน เช่น Design Systems Organizer, Content Reel, และอื่น ๆ ที่ช่วยให้คุณปรับแต่งการทำงานของ Figma ให้ตรงตามความต้องการของคุณ
-
Design System: Figma รองรับการสร้าง Design System ที่สะดวกต่อการเริ่มต้นงานออกแบบ คุณสามารถกำหนดค่าต่าง ๆ เช่น Font, สี และอื่น ๆ ใน Design System แล้วนำมาใช้ในโปรเจกต์ของคุณได้โดยง่าย เมื่อมีการเปลี่ยนแปลงใน Design System จะส่งผลให้โปรเจกต์ที่ใช้ Design System นั้นๆ อัปเดตโดยอัตโนมัติ ทำให้คุณสามารถบริหารจัดการและปรับปรุงระบบออกแบบของคุณได้อย่างมีประสิทธิภาพ
-
UI Kit: Figma รองรับการสร้างและใช้งาน UI Kit ที่ออกแบบไว้แล้วสำหรับ Component ต่าง ๆ ที่เป็นส่วนประกอบของการออกแบบ คุณสามารถนำ Component เหล่านี้มาลากวางในโปรเจกต์ของคุณได้โดยง่าย มันจะช่วยให้โปรเจกต์ของคุณมีหน้าตาเหมือนกับตอนที่ถูก code แล้ว นอกจากนี้คุณย