Design

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

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

Figma คืออะไร ??? ทำไมจึงเป็นเครื่องมือออกแบบอันดับ 1 ที่ UXUI Designer ทั่วโลกเลือกใช้ 

Figma คือเครื่องมือออกแบบที่ขึ้นแท่นอันดับ 1 ในปี 2022 โดยสามารถใช้ออกแบบได้ตั้งแต่เว็บไซต์, แอปพลิเคชัน สำหรับเหล่า UX/ UI Designer ทั่วโลก หรือใช้สำหรับการแบบโลโก้, artwork ต่างๆ ของสายงาน Graphic Design รวมไปถึงคนทั่วไปที่ใช้ในการออกแบบ Presentation ในรูปแบบที่มีลูกเล่นมากกว่าที่เราเคยเห็นในอดีต 

Figma ให้ความสำคัญในเรื่องของการทำงานร่วมกันภายในทีม ทำให้ทีม UX/ UI Design ทำงานกันได้ง่ายขึ้น ร่วมไปถึงส่งเสริมการทำระหว่างทีมที่ช่วยให้ Designer ส่งต่องานกับ Developer ได้ง่ายมากยิ่งขึ้น โดยสิ่งแรกที่เห็นได้ชัดคือตัวโปรแกรม Figma ที่ใช้งานในรูปแบบ browser-based ที่ทุกคนสามารถทำงานพร้อมกันได้ทุกที่ ทุกเวลา และยังมี Features อีกมากมายที่ช่วยให้การส่งต่องานระหว่างทีมทำได้ง่ายขึ้นกว่าเครื่องมือการออกแบบอื่นๆ 

ก่อนที่เราจะไปดูกันว่า Figma มีฟีเจอร์เด่นๆ อะไรบ้าง เรามาดูความร้อนแรงของ Figma จากการจัดอันดับในปี 2021 ของ uxtool.co กันก่อน โดยในปีนี้ Figma ได้ครองใจเหล่านักออกแบบและได้ขึ้นแท่น UI design tool อันดับ 1 ทั้งในฝั่ง Mac และ Windows แบบทิ้งห่างโปรแกรมอื่นแบบไม่เห็นฝุ่น 

ถ้าหากเราย้อนไปดูการจัดอันดับในปี 2019 ของ uxtool.co Figma ยังไม่ได้เป็นที่นิยมมากเท่าปัจจุบัน 

โดย Figma ไม่ได้ขึ้นแท่นแค่เรื่องของจำนวนผู้ใช้งานเท่านั้น แต่ยังขึ้นแท่นอันดับ 1 ในด้านการทำ Prototyping, ด้านการส่งต่องาน (Handoff), ด้านการทำ Design systems, การจัดการกับไฟล์งาน 

เรียกได้ว่ามาแรงแบบหยุดไม่อยู่จริงๆ มาแรงจนทำให้ล่าสุด Adobe บริษัทด้านการออกแบบยักษ์ใหญ่ที่ทุกคนน่าจะรู้จักกันเป็นอย่างดี ได้ออกมาเปิดเผยว่าเข้าซื้อกิจการ Figma โดยมูลค่าดีลสูงถึง 7.4 แสนล้านบาท

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 ต่างๆ หรือพื้นที่ที่ต้องการได้เลย 

Figma really brings together different parts of the team—designers, project managers, product managers, engineers, and others. The amount and quality of feedback is 10X better than before.

Shawn Lan, Head of Design at Zoom

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 แบบครบครัน 

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)

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

 

I want my team to spend time thinking about high level UX problems, rather than mindlessly repeating busy work. Figma helps them do that.

Ellen Beldner, Head of Product Design at StitchFix

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 อันนั้นก็จะเปลี่ยนตามทั้งหมด


With design increasing in importance at Rakuten, Figma gives us the tools to create an expansive design system and distribute it to our design teams all around the world.

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

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


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

Patchara Boonmathanaruk
Business Development Associate | Skooldio

    You may also like

    Business

    ทำความรู้จัก Voxel Art งานกราฟิก 3D ยอดฮิตที่สร้างได้ตั้งแต่ Item, Character ยันเมือง

    หลายๆ คนอาจจะคุ้นหน้าคุ้นตากับงานภาพสไตล์ Pixel Art หรืองานภาพ Computer Graphic แบบ 8bit ที่ทำให้เรานึกถึงอดีตกันมาบ้างแล้ว (ถ้าใครนึกไม่ออกก็ลองคิดถึงภาพ Arcade Game อย่าง Pac-Man ...
    Design

    รวม Figma Plugin 2022 ออกแบบไว ใช้งานได้จริง!

    ในยุคที่คนทำงานออกแบบ UX/UI เกือบทุกคนหันมาใช้เครื่องมือมาแรงแห่งยุคอย่าง Figma กันอย่างจริงจัง เนื่องจากหน้าโปรแกรมที่เข้าใจง่าย ส่งต่องานกับทีมได้อย่างไม่มีสะดุด ใช้งานแบบฟรีก็ทำได้ แถมมาพร้อมลูกเล่นมากมายที่ช่วยให้งานออกแบบในยุคนี้ทำได้ง่ายกว่าเมื่อก่อน มี Community ที่เปิดให้ทุกคนมาแชร์ widgets หรือ plugins ...

    More in:Design

    UX Writing คืออะไร Design

    ไขข้อข้องใจ! UX Writing คืออะไร ทำไมสำคัญกับ Product พร้อมตัวอย่างน่าสนใจ

    UX Writing คืออะไร? ทำไมต้องรู้จักคำนี้ด้วยนะ? คุณอาจจะเคยผ่านการใช้งาน Application มากหน้าหลายตาในแต่ละวัน ซึ่งแอปฯ บางตัวก็ทำให้คุณรู้สึกดีตลอดการใช้งาน เข้าแล้วไม่อยากออก เข้าแล้วอยากเข้ามาใช้บ่อยๆ ทุกวัน แต่กลับกันกับแอปฯ บางตัวที่ทำให้คุณหงุดหงิดใจตลอดการใช้งาน อยากออกแทบตาย ...
    Web Design Font Pairing Design

    เทคนิคการจับคู่ฟอนต์ไม่ให้เละ ฉบับ Web Designer มือโปร

    หนึ่งในปัญหาใหญ่ของคนเริ่มต้นออกแบบเว็บ คือเรื่องของการเลือกใช้ฟอนต์ที่ดูเหมือนง่ายแต่ยาก ยิ่งเป็นเรื่องของการจับคู่ฟอนต์ที่ต่างกันให้มาอยู่ด้วยกันอย่างลงตัวสวยงามยิ่งยากเข้าไปใหญ่ วันนี้เราเลยนำรวมเทคนิคดีๆ ในการจับคู่ฟอนต์ฉบับ Web Designer มือโปรมาเล่าสู่กันฟัง 1.ใช้ฟอนต์ที่ให้ระดับอารมณ์แตกต่างกัน หน้าตาของฟอนต์มีผลต่ออารมณ์ความรู้สึกของคนอ่าน การลองจับคู่ฟอนต์ที่ให้อารมณ์แตกต่างกันจะช่วยให้หน้าเว็บดูมีลูกเล่น น่าสนใจ ไม่ราบเรียบจนเกินไป ก่อนที่จะเลือกจับคู่ฟอนต์ ต้องพิจารณาก่อนว่าบุคลิกเว็บที่เรากำลังออกแบบเป็นอย่างไร ...
    ui-design-Cover Design

    ถอดองค์ประกอบการออกแบบ UI ที่ดี ด้วยหลัก ‘Component-based Design’

    สิ่งหนึ่งที่สำคัญมากในการออกแบบ UI ที่นักออกแบบทุกคนควรรู้ นั่นคือเรื่องของ ‘Component-based Design’ คือการมองแยกส่วนประกอบต่างๆ ที่ร่วมกันเป็นหน้าเว็บไซต์หรือแอปฯ ที่เราออกแบบว่ามีส่วนประกอบมาจากอะไรบ้าง หากใครผ่านการเรียนการออกแบบมาก่อน อาจจะคุ้นเคยกับหลักองค์ประกอบการวาดรูปที่เริ่มตั้งแต่จุด จุดต่อกันกลายเป็นเส้น จากเส้นต่อกันเป็นระนาบ และระนาบประกบกันเป็นรูปทรง เช่นเดียวกันกับการออกแบบ ...
    psychology ux ui blog cover Design

    หลักจิตวิทยากับการช่วยออกแบบ UX UI ให้ชีวิต User ง่ายขึ้น

    ใครที่กำลังทำงานหรือศึกษาเรื่อง UX UI น่าจะเคยผ่านตาเรื่องของหลักจิตวิทยาการออกแบบที่นำมาใช้กับ UX UI กันบ้างแล้ว แต่เอาเข้าจริงแล้วในฐานะคนที่เป็นหรืออยากเป็น UX/UI Designer ควรมีความรู้พื้นฐานด้านจิตวิทยามากน้อยแค่ไหน โดยหลักการแล้วหลักจิตวิทยาจะช่วยให้ User ใช้งานเว็บหรือแอปฯ ที่เราออกแบบได้อย่างมีประสบการณ์ที่ดีได้อย่างไร ...

    Comments are closed.