Figma คืออะไร? ทำไมถึงเป็น Tool มาแรงที่สุดแห่งปี!

Figma คืออะไร ทำอะไรได้บ้าง | Skooldio Blog - Figma คืออะไร? ทำไมถึงเป็น Tool มาแรงที่สุดแห่งปี!

Figma คืออะไร???

Figma เป็นหนึ่งใน UI Design Tools มาแรงที่สุดแห่งปี ที่ผู้ใช้ระบบปฏิบัติการ Windows เลือกใช้มากที่สุดจากการจัดอันดับในปี 2019 ของ uxtool.co เพราะมีฟีเจอร์การใช้งานที่หลากหลาย อำนวยความสะดวกตั้งแต่งานด้าน Graphic Design และ UX/UI Design รวมถึงการทำงานร่วมกับ Developer อีกด้วย

ui design tools 2019 | Skooldio Blog - Figma คืออะไร? ทำไมถึงเป็น Tool มาแรงที่สุดแห่งปี!
Top UI Design Tools in 2019

นอกจากนี้ Figma ยังได้รับการยอมรับจนผลสำรวจขึ้นมาเป็นอับดับ 2 ทั้งในการใช้ทำ Wireframe, Prototype, Design Systems เป็นรองแค่ Sketch เท่านั้น

ui design tools 2019 | Skooldio Blog - Figma คืออะไร? ทำไมถึงเป็น Tool มาแรงที่สุดแห่งปี!
อันดับ 2 Wireframing Tools
ui design tools 2019 | Skooldio Blog - Figma คืออะไร? ทำไมถึงเป็น Tool มาแรงที่สุดแห่งปี!
อันดับ 2 Prototyping Tools
ui design tools 2019 | Skooldio Blog - Figma คืออะไร? ทำไมถึงเป็น Tool มาแรงที่สุดแห่งปี!
อันดับ 2 Design System Tools

Figma ทำอะไรได้บ้าง?

Figma helps teams create, test, and ship better designs from start to finish. 

Figma.com

Figma ออกแบบมาเพื่อช่วยงาน Design ตั้งแต่ก่อนเริ่มต้นลงมือออกแบบรวมถึงขั้นตอนทดสอบ พูดง่ายๆ ก็คือใช้งานได้ตั้งแต่วาด wireframe ไปจน prototype และ test กับ user ได้เลย 

โดยแบ่ง Feature การทำงานเป็น 4 ด้านดังนี้

1. Collaboration Features

The all-in-one design tool built for collaboration

แน่นอนว่าสิ่งที่ทำให้ Figma เหนือกว่า UI Design Tools อื่นๆ คือความสามารถในการใช้งานพร้อมกันได้แบบ real-time บนเว็บ โดยไม่ต้องติดตั้งโปรแกรมในเครื่อง และไม่ต้องกด save เลยแม้แต่ครั้งเดียว

Update อยู่ตลอดเวลา พร้อมใช้งานทุก Feature ใหม่ๆ ปัญหาของโปรแกรมอื่นคือเวลามี Feature ใหม่ๆ ออกมา ต้องมานั่งอัปเดต patch ก่อน ถึงจะเริ่มใช้งานได้ แต่ Figma ไม่ต้องเลยจ้า! แถมยังช่วยให้หมดปัญหาเวอร์ชันไฟล์ไม่ตรงกันในบางโปรแกรม เพราะการที่เวอร์ชันของโปรแกรมไม่ตรงกัน อาจทำให้เวอร์ชันไฟล์ไม่ตรงกันไปด้วย จนไม่สามารถเปิดได้

Edit together in real-time ทำงานพร้อมกันได้แบบไม่ delay พร้อม Version Control สามารถดูได้ว่าใครแก้ไขอะไร ตอนไหนบ้าง และสามารถย้อนกลับไปช่วงเวลานั้นๆ ได้อีกด้วย นอกจากนี้ยังส่งต่อไฟล์ให้กันง่ายๆ เพียงแค่ส่ง link ก็สามารถทำงานร่วมกันได้ทันที เพมาะกับ remote team (การทำงานคนละที่ ไม่ต้องเข้าออฟฟิศร่วมกัน) หรือการทำงานในยุค new normal แบบนี้สุดๆ ใครที่สนใจอยากรู้เพิ่มเติมเกี่ยวกับ ประสบการณ์การทำงานแบบ remote team สามารถฟังได้ที่นี่เลย

Better Feedback หมดปัญหาส่งไฟล์ไปมา – หมดยุคการตั้งชื่อไฟล์ Final_Final_Jing_Jing_V18 อีกต่อไป  เพราะสามารถปักหมุด comment ได้แบบ real-time ไม่ต้องส่งไฟล์กันไปมา อยากคอมเมนต์ตรงไหนหรือแจ้งเตือนเพื่อนในทีมคนไหน ก็จิ้มบน frame ต่างๆ หรือพื้นที่ที่ต้องการได้เลย 

comment | Skooldio Blog - Figma คืออะไร? ทำไมถึงเป็น Tool มาแรงที่สุดแห่งปี!
Comment

2. Design Features

Design, prototype, and gather feedback all in one place with Figma

ขึ้นชื่อว่าเป็น Design Tools แน่นอนว่าต้องมีฟีเจอร์ด้านงานออกแบบไว้อยู่แล้ว ซึ่งบอกเลยว่าจัดไว้ให้พร้อมสรรพ ตั้งแต่เริ่มต้นออกแบบจนถึงส่งงานต่อให้ Developer

Typo ก็ได้ สร้าง Shape ก็ง่ายดี – สร้าง Shape ได้หลากหลายด้วย Pen tool ที่คุ้นเคยกันดีอยู่แล้ว เพิ่มความสะดวกสบายด้วย Arc tool ช่วยในการสร้างโค้งเว้าต่างๆ ได้ง่ายมากขึ้น แค่คลิกๆ ลากๆ สุดท้ายทำงานกับ text หรือ typo ต่างๆ ได้ง่ายด้วย OpenType สำหรับ edit text แบบครบครัน 

opentype | Skooldio Blog - Figma คืออะไร? ทำไมถึงเป็น Tool มาแรงที่สุดแห่งปี!
OpenType

Auto Layout พระเอกในยุค Responsive DesignAuto-layout ฟีเจอร์เด็ดที่ตอบโจทย์ UI Designer อย่างมาก เพราะสามารถ resize สิ่งต่างๆ ได้อัตโนมัติเมื่อความยาว text เปลี่ยนแปลง และยังง่ายในการเคลื่อนย้าย Component ต่างๆ

Plugin เสริม เติมความสบาย – มี Plugin ช่วยงานออกแบบมากมายให้เลือกใช้ ตัวอย่างเช่น Unsplash, Flow diagrams, Charts, Icons, Google sheet sync เป็นต้น หรือถ้าต้องการทำ plugin สำหรับองค์กรของคุณเอง ก็สามารถสร้างและแบ่งปันกันได้

Style systems เพิ่มความ Consistent ให้งาน Design – สามารถสร้าง Style System เพื่อความถูกต้องของ CI องค์กร ป้องกันความผิดเพี้ยน ไม่ว่าจะเป็น Color, Text หรือ Effect ต่างๆ (Shadow, Stoke)

style systems | Skooldio Blog - Figma คืออะไร? ทำไมถึงเป็น Tool มาแรงที่สุดแห่งปี!
Style systems

ส่งงานต่อให้ Developer ง่ายๆ ไม่ปวดหัว – เมื่อสร้างสรรค์งาน Design เรียบร้อยแล้ว ก็สามารถ Handoff Project ส่งต่อให้ Developer ล้วงแคะแกะเกา inspect code ได้ทั้ง CSS, iOS และ  Android เพื่อต่อยอดสร้างแอปต่อไปได้ 

handoff | Skooldio Blog - Figma คืออะไร? ทำไมถึงเป็น Tool มาแรงที่สุดแห่งปี!
Handoff into a Handshake

3. Prototyping Features

Free Prototyping Tool to Create Clickable Prototypes

คงคอนเซปต์ ครบ จบ ในโปรแกรมเดียว เมื่อเริ่มออกแบบได้แล้ว ต้องไปให้สุดถึงขั้นตอน Prototype

Prototype ได้ เหมือนเป็นแอปจริง – บอกเลยว่า Prototype ใน Figma ทำได้ครบและง่ายมาก เพียงลากวางก็เชื่อมแต่ละ page หากันได้ไม่ยาก และสามารถทำ Interaction ได้ ซึ่งจะช่วยทำให้เกิด animation เล็กๆ น้อยๆ เมื่อ click หรือ hover ได้ 

Advanced transitions with Smart Animate – สามารถเพิ่ม transitions ในขั้นตอนต่างๆ ได้ง่ายมาก ง่ายจน Developer ต้องโมโห เพราะหลายๆ อย่างไม่ได้เขียน Code มาง่ายๆ เหมือนที่ Designer ออกแบบมานะ (Developer ในทีมแอบกระซิบมา)

Embed Prototype – สามารถนำหน้าที่เรา Prototype ไป embed บนเว็บเพื่อความสมจริงมากยิ่งขึ้นเมื่อต้องการ test กับ user 

4. Design systems features

Design, manage, and deploy your design systems with Figma

นี่มันยุคของ Design Systems โดยแท้! เพราะทุกโปรแกรมหันมาให้ความสำคัญกับการออกแบบ Design Systems กันหมดแล้ว Figma ก็เช่นกัน

รวมครบใน tab เดียว – เมื่อเราสร้าง Design Systems ของเราแล้ว Figma จะรวมไว้ใน “Assets” tab ทางซ้ายมือของโปรแกรม ที่สะดวกในการใช้งานมาก อยากจะใช้ icons, backgrounds, images, avatars, fonts, buttons หรือ component ไหนที่สร้างไว้ ก็แค่ลากมาใส่ใน frame 

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

design systems | Skooldio Blog - Figma คืออะไร? ทำไมถึงเป็น Tool มาแรงที่สุดแห่งปี!
Easy overrides

Feature ครบสำหรับงาน UX/UI Design จริงๆ ทำได้ตั้งแต่ก่อนเริ่มต้นออกแบบไปจนถึงทำ prototype เลย ที่สำคัญคือฟรี! ไม่ต้องจ่ายสักบาทก็สามารถทำงานทั้งหมดนี้ได้ แต่จะมีจำกัดจำนวน editors เล็กน้อย ซึ่งเหมาะมากสำหรับทีมที่กำลังมองหาเครื่องมือใหม่ๆ ใช้งานกันฟรีๆ ไปก่อน ถ้าถูกใจหรือมีทีมขนาดใหญ่ ค่อยตัดสินใจเปลี่ยน Plan เป็นแบบอื่นก็ยังทัน แถมราคาก็ไม่ได้แรงจนน่ากลัว (Figma Pricing

หรือถ้าใครยังลังเล ระหว่าง Figma vs Adobe XD vs Sketch สามารถเข้าไปอ่านต่อได้ที่ เทียบให้ดูชัดๆ! Figma สุดยอดเครื่องมือฟรี ดีกว่าโปรแกรมอื่นยังไง?


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

คอร์ส ui design with figma | Skooldio Blog - Figma คืออะไร? ทำไมถึงเป็น Tool มาแรงที่สุดแห่งปี!