ผมไปเจอโปรแกรมตัวนึงชื่อ Figma มาจากพี่ Janjie Khemanij มันดีมากเลยจึงอยากมาแบ่งปันกันครับ
Prototype คืออะไร
ถ้าแปลตรงตัวอย่างที่ทุกคนเข้าใจมันก็คือ “ต้นแบบ” หรือแบบจำลอง เป็นสิ่งสร้างขึ้นจากไอเดียที่เป็นนามธรรม ให้ออกมาเป็นรูปธรรม เพื่อให้ทีมหรือคนที่ทำเข้าใจไปในทิศทางเดียวกันกับสิ่งที่เตรียมจะสร้างหรือพัฒนาขึ้นมา
และไว้หาข้อผิดพลาดหรือช่องโหว่เพื่อนำไปปรับปรุง ซึ่งในการพัฒนาโปรดักส์ที่เป็น เว็บไซต์ หรือแอพลิเคชันเนี่ย เราจะสร้าง Software Prototype ขึ้นมา ร่าง Flow ว่าถ้าผู้ใช้เปิดโปรแกรมมา ตัวผู้ใช้จะต้องเจออะไรบ้าง กดแล้วเกิดอะไรขึ้นมา เปลี่ยนหน้าไหมหรืออย่างไร
ทำ Prototype เพื่ออะไร
- เพื่อเช็คการออกแบบว่าเป็นไปได้ไหมที่จะพัฒนาออกมา ยากง่ายแค่ไหน
- เพื่อนำเสนอผลงาน
- เพื่อให้ทีมเห็นภาพตรงกัน
- เพื่อใช้อ้างอิงในตอนพัฒนาหน้าตาออกมา ตอนเขียนโค้ดเนี่ยแหละ
- เพื่อนำออกไปทดสอบกับผู้ใช้งานจริง ให้เขาลองกดลองเล่น เราก็จะรู้ได้ว่าเขาใช้งานยังไง ยากง่ายประมาณไหน ใช้เวลานานแค่ไหน มีอะไรที่ทำให้สับสน แล้วรู้สึกอย่างไร ช่วยให้พัฒนาง่ายโปรดักส์ขึ้น เพราะรู้มากขึ้นว่าผู้ใช้ต้องการแบบไหน สามารถทำให้ตรงตามความต้องการของผู้ใช้ง่ายขึ้น
- เพื่อเก็บ Feedback ที่ได้จากการไปทดสอบ และนำมาปรับปรุง
Figma คืออะไร
มันคือโปรแกรมในการทำ Software Prototype ตัวนึง ที่ให้เราออกแบบหน้าตาการใช้งานของโปรแกรมที่จะพัฒนา ไอตัวโปรแกรมประเภท Software Prototype มันก็มีเจ้าตลาดใหญ่ ๆ อยู่แล้วอย่าง Adobe XD หรือ Sketch
แล้ว Figma ดียังไง
- ไม่จำกัดค่าย Windows, macOS ก็สามารถใช้งานได้
- ใช้งานผ่านเว็บไซต์ก็ได้ ไม่ต้องลงโปรแกรม
- รองรับการทำงานพร้อมกัน เหมือนพวก Google Doc
แต่ถ้าหากใครเป็นนักศึกษาคุณก็จะได้ข้อดีอีกอย่างคือ ใช้งานได้เหมือนกับ Professional Team เลย
วิธีการสมัคร Student Plan ลิงค์นี้เลยครับ https://help.figma.com/faqs/setting-up-your-student-account
เป็นไงหล่ะ แค่ฟรีก็กินขาดแล้ว 5555
สิ่งที่ทำใน Figma
DESIGN
ออกแบบหน้าตาของตัวโปรแกรม เช่น ความโค้งมนของกล่อง สีที่ใช้ ขนาดต่าง ๆ หรือกระทั่งฟอนต์ สามารถทำที่ตัวโปรแกรมเองได้เลย ทำให้ไม่ต้องสลับไปทำใน illustrator หรือ photoshop
PROTOTYPE
สร้างจุดเชื่อมโยงของแต่ละ UI ว่าจิ้มจุดใด ให้มันแสดงผลหน้าใหม่ออกมา การใช้งานความรู้สึกเหมือนตอนที่ใช้บน Adobe XD ถ้าจะติก็ตรงพอเอาตัว prototype ไปทดสอบเนี่ยเวลาผู้ใช้กดผิดที่ มันจะขึ้นไกด์ไลน์สีฟ้าขึ้นมาว่าตรงไหนกดได้บ้าง ซึ่งไม่แน่ใจเหมือนกันว่าปิดได้ไหม
CODE
เป็นผลลัพธ์ที่ได้ออกมาจากการทำดีไซน์ เช่น ขนาดของกล่อง ขนาดฟอนต์ สีต่าง ๆ ให้ออกมาเป็นโค้ด จะใช้งานก็ copy and paste ค่าไปใช้ได้เลย
ทำอะไรได้อีกบ้างอะ
ผมจะแนะนำเมนูบางส่วนให้นะครับ เริ่มจากเมนูที่อยู่ด้านซ้าย ประกอบไปด้วย 3 ส่วน คือ Layers, Components, และ Team Library
ส่วนที่ 1) Layers ประกอบด้วย Page และ Art board
- Pages: ทำหน้าที่แบ่งงานเป็นหลายส่วน เช่น หน้าละเวอร์ชัน หรือหน้าละฟีเจอร์
- Art board: สำหรับจัดการแต่ละหน้าจอของอุปกรณ์ที่สร้างขึ้น สามารถ “จัดกลุ่ม” (grouping)ให้ลากได้ที่ละหลาย ๆ object, “ล็อควัตถุ” ให้ขยับไม่ได้, “ซ่อนการมองเห็น” เหมือนอย่างที่โปรแกรมประเภทดีไซน์จะทำได้
ส่วนที่ 2) Components
ไว้เก็บวัตถุค่าที่มีการใช้งานซ้ำ ๆ เพื่อให้เรียกใช้ได้ง่าย เช่น เครื่องหมาย ปุ่ม หรือรูปภาพ โดยสามารถสร้างขึ้นมาเองผ่าน Figma หรือ นำเข้ามาจากไฟล์ .png, .svg เป็นต้น
ส่วนที่ 3) Team Library เป็นที่ ๆ เก็บ components ส่วนกลางสำหรับทีมไว้ใช้กับหลาย ๆ งานข้ามโปรเจกต์
ระบบคอมเมนต์บน Figma
ระบบคอมเมนต์เป็นส่วนที่ทำให้การทำงานเป็นทีมสมบูรณ์มากยิ่งขึ้น ผมใช้เพื่ออ้างอิงต่าง ๆ เช่น กดลิงค์แล้วจะไปเปิดเว็บภายนอก เป็นต้น แล้วก็ไว้ใช้เขียนแจ้งปัญหา เช่น หน้าไหนใช้งานแล้วงง คนในทีมงงตรงส่วนไหน ก็สามารถแจ้งได้ และ Resolve หากปัญหานั้นถูกแก้ไขแล้ว
รู้สึกยังไงกับการใช้งาน Figma
หลังจากใช้งานมาบ้างรู้สึกชอบมากกก :) ใช้งานไม่ยาก ช่วยให้ทำงานกับทีมที่ไหนก็ได้ การใช้งานกับเว็บไซต์สะดวกมาก ๆ ไปอยู่ที่ไหนก็ใช้ได้แค่มีอินเทอร์เน็ต งานต่อ ๆ ไปก็คงใช้ตัวโปรแกรมนี้ไปเรื่อย ๆ (รู้สึกขายตรงอย่างบอกไม่ถูก แต่มันก็ดีจริง ๆ นะ 55555)
สำหรับใครที่อยากใช้งานกับ ฟอนต์ที่อยู่ในเครื่องตัวเองก็ลงตัว Desktop App ได้เลย ส่วน Mobile App ก็เอาไว้ Mirror แสดงผลหน้าที่กำลังทำอยู่บนตัวโปรแกรม Figma
สรุป
การทำ Prototype ช่วยให้การทำงานในทีมมีความราบรื่นมากยิ่งขึ้น เพราะ ถ้าทีมเห็นตรงกันเท่าไร ก็จะยิ่งทำให้งานเสร็จเร็วขึ้นเท่านั้น และมันจะได้ผลลัพธ์ที่ออกมาใกล้เคียงความต้องการของคนใช้งานมากยิ่งขึ้น สิ่งเหล่านี้แหละคือหัวใจของการทำ Prototype
แล้วโปรแกรม Figma ก็มาเติมเต็มการทำงานเป็นทีมด้วยฟีเจอร์ที่ให้ใช้งานพร้อมกันได้หลายคน และระบบคอมเมนต์เนี่ยแหละ เป็นฟีเจอร์ที่มีประสิทธิภาพ ช่วยให้ทำงานร่วมกันได้เลยไม่ต้องไฟล์กันไปกันมา มีอะไรก็คอมเมนต์ไว้ในโปรแกรม ง่ายต่อการหา ทำให้คิดว่างานต่อ ๆ ไปก็คงจะต้องฝากไว้กับเจ้าตัวโปรแกรมนี้เนี่ยแหละ ประทับใจ ❤️
แล้วก็ feature ของเจ้า Figma เท่าที่นึกออกอะนะ
- Prototyping — ทำ prototype ได้
- Commenting— มีระบบคอมเมนต์ไว้คุยกับทีม แจ้งปัญหาและ resolve
- Using Web Browser — ทำงานผ่านเบราเซอร์
- Version control — ทำให้ย้อนกลับไปดูสิ่งที่ทำมาแล้วได้
- Multiplayer collaboration — รองรับการใช้งานพร้อมกันได้หลายคน
- Live share screen — ดูว่าทีมกำลังทำอะไรอยู่ ดูอยู่หน้าไหน
- Components — อันไหนใช้บ่อยก็สร้างเป็น Component
- Team Library — แชร์ resource ร่วมกันในทีม แชร์ข้ามโปรเจกต์
- Screen Mirror on Mobile — พรีวิวหน้าจอที่กำลังเปิดอยู่บนคอม ให้โชว์บนมือถือ
ของแถม Case Study: KMUTT Election 2018
KMUTT Election 2018 เป็นโปรเจคแรกที่ได้นำ Figma มาใช้ เป็นระบบเลือกตั้งองค์การ และสภานักศึกษาของมหาวิทยาลัยเทคโนโลยีพระจอมเกล้าธนบุรี ซึ่งทีม Alchemist ของเราเป็นผู้พัฒนา
ตอนที่มาแตะโปรแกรมครั้งแรกรู้สึกว่าใช้งานง่ายมาก ๆ น่าจะเพราะเคยใช้ Adobe XD มาก่อน ซึ่งไอเจ้า Figma เนี่ยใช้แล้วรู้เลยว่ามันทำให้งานออกมาไวกว่าแต่ก่อน ไม่ต้องมากลัวว่าเห้ยเซฟไปยัง เพราะมันออนไลน์อยู่บนเว็บเซฟให้ตลอด
มันทำให้ได้คุยกับทีมมากขึ้น อย่างเราเห็น cursor ว่าเพื่อนกำลังทำอะไรอยู่ สามารถบอกได้เลยว่า เห้ย! กดเลือกองค์การแล้วมันงง ๆ นะผู้ใช้จะรู้รึป่าว ได้เถียงกันให้งานออกมาดีขึ้น ทีมเดฟหรือคนเขียนโค้ดเข้ามาดูงานได้เลย เพราะงานอัพเดทอยู่ตลอดเวลา
หากใครสนใจอยากอ่านเรื่องราวของการทำระบบ KMUTT Election 2018 ต่อลิงค์ด้านล่างเลยครับ
ถ้าใครสนใจอยากศึกษาเพิ่มเติมก็แนะนำบล็อกของ Figma เองครับ https://blog.figma.com
ใครมีอะไรแลกเปลี่ยน ติชมได้นะครับ ^^
#Alchemist used Figma and you ?
