รู้จักกับ Figma และการใช้งานจริงจังครั้งแรก
เชื่อว่าเวลาหลายๆคนเมื่อพูดถึงเครื่องมือที่ใช้ในการออกแบบ UI และ UX รวมถึงงานออกแบบอื่นๆ ในตอนนี้ก็คงจะไม่พ้น Sketch หรือ Adobe XD แน่ๆ ซึ่งโดยส่วนตัวแล้วผมไม่ได้มีโอกาสสัมผัสเจ้า Sketch เท่าไหร่เนื่องจากผมไม่ได้ใช้ Macs ในการทำงาน แต่เมื่อ 4 เดือนที่ผ่านมาผมได้เจอกับเครื่องมือที่ชื่อว่า Figma โดยได้มาจากเพื่อนร่วมงานคนนึงที่ใช้ และแนะนำมา ซึ่งมันดีมากกกกกก
โดยการทำงานก็จะมีความคล้ายคลึงกับตัว Sketch มากจากที่ได้ยินเขาเล่าขานกันมา (ถึงผมจะไม่เคยได้ใช้งานเลยก็เถอะ 55 ) ด้วยความสามารถของเจ้า Figma ก็มีประสิทธิภาพในการทำงานที่หลากหลาย รวมถึงหน้า Interface ที่ดูสะอาดตา น่าใช้งาน พวกเครื่องมือก็จะเป็นแบบทั่วๆไปที่เราคุ้นชินกันดีอยู่แล้ว
ในส่วนของฟีเจอร์และจุดเด่น Figma มีจุดเด่นอะไรบ้างละ? เชื่อว่าหลายๆคนคงเริ่มคิดแล้วว่ามันมีอะไรที่แตกต่างบ้าง นี่ก็จะมาขอเล่าแบบย่อๆ ให้ทุกคนได้ลองไปสัมผัสและไปใช้งานกันดูนะ ว่าแล้วก็เริ่ม!
อิสระในการใช้งานที่ไม่ได้จำกัดแค่แพลตฟอร์มเดียว
ด้วยการที่ Figma นั้นเป็น browser-based นั้นทำให้ทุกคนสามารถเข้ามาสร้างสรรค์ผลงานและแชร์ออกไปผ่านตัว Figma ได้แม้ว่าจะไม่ได้ใช้แพลตฟอร์มเดียวกันก็ตาม
ไม่ว่าจะเป็น Macs, Windows PC, Linux รวมไปถึงแพลตฟอร์มที่เราไม่ค่อยรู้จักกันดีอย่าง Chromebooks ก็สามารถใช้งานได้ด้วย ทำให้เวลาเราทำงานเป็นทีม ทั้งนักออกแบบ และนักพัฒนาก็จะสามารถทำงานร่วมกันได้ดียิ่งขึ้น
Cloud-based สามารถทำงานหลายคนได้พร้อมกัน
ถ้าใครยังนึกไม่ออกก็ให้ ผมอยากให้นึกถึงเครื่องมือจำพวก Google Docs ที่เราสามารถเข้าไปดูงานได้หลายๆคนพร้อมกันนั้นและ
แต่เจ้า Figma นี้จะมาในรูปแบบของการทำงานออกแบบที่ สามารถเข้าไปดูและแก้ไขไปด้วยได้พร้อมกันหลายๆคนนั้นเอง
ซึ่งภายในฟีเจอร์นี้เรายังสามารถคลิ้กที่รูปโปรไฟล์ของสมาชิกใน Project เพื่อดูการทำงานในหน้าจอของเขาได้อีกด้วย (คล้าย Teamviewer เลยล่ะ)
Comment ส่วนสำคัญสำหรับการทำงานเป็นทีม
เลี่ยงไม่ได้เลยว่า การคอมเมนต์งานนั้นเป็นส่วนสำคัญที่ช่วยให้งานนั้นออกมา มีประสิทธิภาพมากขึ้น
ซึ่งเจ้าระบบนี้และจะช่วยให้สมาชิกในทีมเข้าใจกันมากขึ้น อย่างงานไหนที่ออกแบบมาผิดหลักไม่ตรงตามต้องการอยากแก้ก็ปักหมุดคอมเมนต์ไว้ตรงจุดนั้นเลยคนในทีมไม่เข้าใจส่วนไหนมาดูก็จะเข้าใจทันทีว่าต้องแก้ยังไง
Library ที่ใช้งานง่ายเพียงแค่ Publish
พูดถึง Library ตัว Figma เองก็มี Library ด้วยเช่นกัน แต่มีให้ใช้งานสำหรับตัว Professional ขึ้นไปที่จะให้สิทธิ์การใช้งาน Team Library
โดยไม่ว่าเราจะอยู่ใน Team Project ไหนก็ตามหากเราทำการ Publish Component ไว้ใน Lirbrary ของ Team Project นั้นๆ คนอื่นที่เป็นสมาชิกใน Team Project นั้นๆ จะสามารถเข้าเลือกใช้งานได้เลย และหากเราทำการอัพเดทตัว Component หลัก ตัวใน Library ก็จะมีให้กดยืนยันเพื่อทำการอัพเดทในส่วนของ Library อีกด้วยโดยที่ไม่ต้องเสียเวลากับการโยนไฟล์ให้คนในทีมไปลงเอง
รายละเอียด Component สำหรับนักพัฒนา
หลายครั้งที่ นักออกแบบ ส่งงานต่อให้นักพัฒนาแล้วลืมรายละเอียดเล็กๆ น้อยๆ อย่างเช่น ค่าสี ขนาดฟอนต์ และรูปแบบฟอนต์ที่ใช้ หรือแม้แมต่ขนาดของกล่องและระยะห่าง
โดยใน Figma จะมีการบอกรายละเอียดอย่างชัดเจน ทำให้ไม่ต้องกังวลเลยเมื่องานถึงมือนักพัฒนา
สร้างตัว Mockup หรือ Prototype ง่ายๆในที่เดียว
ในการสร้าง Prototype ของตัว Figma เราสามารถทำการ สร้างได้เลยไม่ต้องยุ่งยากในการใช้งานจบครบในโปรแกรมเดียว เพียงแค่เราทำการจิ้มไปที่คำสั่ง Prototype ทางขวามือ
สำหรับตัว Figma เองก็มีทั้งแบบฟรี และแบบเสียค่าใช้จ่าย โดยจะแบ่งออกเป็น 3 ระดับตั้งแต่ Free , Professional และระดับ Organization
การเก็บเงินหรืออัปเกรดก็จะเป็นการเก็บรายปีและรายเดือน โดยนับตามจำนวน Editor หรือ Team Member ที่เราต้องการนั้นเอง
แต่หากเป็นนักเรียน หรือนักศึกษาสามารถใช้งานฟรีได้เลย โดยทำตามขั้นตอนตาม Link: https://help.figma.com/article/212-setting-up-your-education-account
ความรู้สึก และประสบการณ์การใช้งาน Figma อย่างจริงจัง!
หลังจากได้ใช้งานอย่างจริงจังในระยะหลังๆ โดยส่วนตัวเลยรู้สึกชอบมากด้วยความที่หน้าตา Interface มีความเฟรนลี่กับผู้ใช้งานมาก หาอะไรก็เจอ แถมยังมี Document ที่ใช้ภาษาง่ายๆในการอธิบาย รวมถึงรูปภาพและคลิปให้ดูอย่างละเอียด เรียกได้ว่าสอนทุกขั้นตอนการใช้งาน เอาใจใส่ผู้ใช้งานสุดๆ การขึ้นงานพวก Vector ก็เหมือนตัว Illustrator ไม่ต้องเปิดหลายๆโปรแกรม ทำได้ในที่เดียวไม่ต้องลงโปรแกรมอื่นให้เสียเวลา อยู่ที่ไหนก็ใช้งานได้ขอเพียงแค่มีอินเทอร์เน็ต ก็สามารถนั่งทำงานได้สบายๆเลย
สำหรับฟีเจอร์ที่บอกไปข้างต้นนี้ยังเป็นเพียงแค่ส่วนน้อยที่ผมได้ลองใช้งานดู มันยังมีอีกหลายๆฟีเจอร์ที่รอให้เราได้เข้าไปสัมผัสอีกมากมาย สำหรับตัว Figma นั้นคือสิ่งที่มาเติมเต็ม และเพิ่มประสิทธิภาพการทำงานเป็นทีมระหว่างนักออกแบบ และนักพัฒนาเพื่อให้สามารถสื่อสารและเข้าใจในตัวงานได้มากที่สุด ไม่ต้องมานั่งเสียเวลากับการโยนงานกันไปกันมา มีคำแนะนำก็เพิ่มไว้ใน Figma ได้เลยครบจบในตัวเดียว
คนที่กำลังหาโปรแกรมหรือเครื่องมือในการทำงานออกแบบ แล้วยังไม่รู้ว่าจะใช้ตัวไหนดี ผมขอแนะนำเป็นเจ้าตัว Figma ตัวนี้เลยเพราะว่ามันใช้งานง่ายมาก หลายๆเสียง หลายๆคนที่ไปถามมาก็บอกว่าดีพวกตัว Component ก็มีแจกฟรีตามเว็บไซต์ต่างๆ สามารถหามาใช้ได้ หรือจะสร้างเองในโปรแกรมเลยก็ยังได้ และที่สำคัญที่สุดเลยคือ ฟรีไม่ต้องเสียค่าใช้จ่ายเลย แต่ก็มีช่องทางให้สนับสนุนนะ
ข้อมูล / อ้างอิง
BEN KOPF. (2018). The Power of Figma as a Design Tool. Retrieved
May 29, 2019, from https://www.toptal.com/designers/ui/figma-design-tool
