ความแตกต่างละหว่าง Figma และ Framer

Graphic design ความรู้สำหรับ การออกแบบ ออกแบบเว็บ Phothoshop ตัดต่อวีดีโอ

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
chakrit
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 788
ลงทะเบียนเมื่อ: 27/06/2022 9:32 am

ความแตกต่างละหว่าง Figma และ Framer

โพสต์ที่ยังไม่ได้อ่าน โดย chakrit »

การออกแบบ มีเครื่องมากมายที่ต่างมีจุดเด่นและจุดด้อยแตกต่างกันไป แต่ทั้งหมดก็พัฒนาและอัพเดทความสามารถใหม่ ๆ มาอย่างต่อเนื่อง จากที่นักออกแบบเมื่อหลายปีที่แล้วมีตัวเลือกเพียง Photoshop หรือ Illustrator ปัจจุบันเรามีเครื่องมีที่เป็นที่รู้จักในวงกว้างอย่าง Sketch, Framer, Adobe Xd, เรื่อยมาจนถึงเครื่องมือที่จัดว่าได้รับความนิยมในการออกแบบ Interface มากที่สุดอย่าง Figma

Figma
Figma เป็นเครื่องมือออกแบบที่เปิดตัวในปี 2016 และชูจุดเด่นด้วยความสามารถในการทำงานบนเบราเซอร์ ซึ่งถึงเป็นการลดอุปสรรคด้านการทำงานร่วมข้ามแพลตฟอร์มระหว่างทีมออกแบบและพัฒนาได้อย่างมาก และด้วยความที่ทำงานบนเบราเซอร์ ไฟล์ของเราจึงถูเซฟโดยอัตโนมัติอยู่เสมอ นั่นยังทำให้สามารถจัดการเวอร์ชั่นของงานออกแบบได้สะดวกยิ่งขึ้นด้วย และรองรับการทำงานพร้อมกันหลาย ๆ คนเหมือนกับการพิมพ์เอกสารร่วมกับคนอื่น ๆ ใน Google Doc เลย
โลโก้ Figma
โลโก้ Figma
Figma.jpg (9.86 KiB) Viewed 762 times
จุดเด่นของ Figma
Figma มีการทำงานที่เหมือนกันกับโปรแกรมอื่นๆ อย่าง Sketch หรือ Adobe Xd จึงทำให้เรียนรู้การใช้งานได้ไม่ยากมากและ มีสิ่งที่ต้องเรียนรู้ใหม่ไม่มาก ทำให้สามารถทำความคุ้นเคยได้ง่าย และตอบโจทย์นักออกแบบได้ครบถ้วนทั้งการทำ Component แบบมี Variant, การจัดการ Design System และแม้จะเป็นเครื่องมือที่เน้นการใช้งานแบบออนไลน์ แต่ก็สามารถแก้ไขแบบออฟไลน์แล้ว Sync ทีหลังได้ โดยทั้งหมดที่ว่ามานี้ในราคาของ Pro user เพียงเดือนละ $12 หรือ ฿427.94 ต่อคนเท่านั้น

จุดอ่อนของ Figma
แม้ Figma จะมีฟังชั่นการสร้าง Prototype ในตัว แต่ก็ไม่ได้มีลูกเล่นที่หลากหลายเท่าเครื่องมีที่ออกแบบสำหรับการทำ Prototype โดยเฉพาะ เช่นการทำ Animation หรือการใช้คำสั่งเสียง รวมถึงการจัดการกับข้อความหรือฟอนต์ภาษาไทย ที่ยังไม่ดีเท่ากับเครื่องมือการออกแบบอื่น ๆ

Framer
Framer เปิดตัวเมื่อปี 2014 พร้อมกันการทำงานบนเบราเซอร์แบบเดียวกับ Figma และชูจุดเด่นเรื่องแอนิเมชั่นของโปรโตไทป์ที่มีการเคลื่อนไหวที่สมจริง และมีลูกเล่นแพรวพราวกว่าเครื่องมือหลาย ๆ ตัว
โลโก้ Framer
โลโก้ Framer
Framer.jpg (21.36 KiB) Viewed 762 times
จุดเด่นของ Framer
นอกการความสามารถในการสร้าง Animation ที่แพรวพราว เรายังสามารถใส่โค้ดเข้าไปใน Component ต่าง ๆ ที่ออกแบบไว้ เพื่อเพิ่มลูกเล่นให้กับ Prototype ได้ด้วย เช่นการซูมแผนที่ การเล่นวีดีโอ หรือการใส่นาฬิกาไว้ในหน้าจอ

จุดอ่อนของ Framer
แม้จะมีความสามารถพื้นฐานต่าง ๆ ไม่ต่างไปจาก Figma แต่ความสามารถของ Framer ที่เพิ่มขึ้นมาจนเป็นจุดเด่นแตกต่างจากเครื่องมืออื่น ๆ ก็เป็นสิ่งที่ทำให้ ผู้ใช้เรียนรู้การทำงานฟังชั่นต่าง ๆ สูงขึ้นและใช้เวลามากขึ้นตามไปด้วย นั่นหมายถึงราคาค่าใช้บริการที่มากขึ้นไปด้วยเช่นกัน รวมถึงตัวเลือกฟอนต์ที่สามารถใช้ได้บนเบราเซอร์ยังมีอยู่จำกัดเช่น Google Fonts เท่านั้น ในปัจจุบันนักออกแบบหลายคนจึงออกแบบในโปรแกรมอื่นแล้วจึง Import มาใน Framer อีกที และความเสถียรเมื่อทำงานกับไฟล์ใหญ่ ๆ ยังมีไม่เท่า Figma

สรุป Figma จะมีเครื่องมือการทำงานที่เหมือนกับโปรแกรมหลายๆตัวเช่น Sketch หรือ Adobe Xd จึงทำให้ง่ายต่อการใช้งานเพราะไม่จำเป็นต้องศึกษาอะไรเพิ่มเติม Framer จะโดดเด่นเรื่องการทำงาน Animation หรือการใส่โค้ดทำให้ง่ายต่อการนำเสนอลูกค้า แต่ก็แลกกับเวลาที่ต้องทำความเข้าใจตัวโปรแกรมเพิ่มมากขึ้น

อ้างอิง
https://www.figma.com/design/
https://www.framer.com/learn/
https://thegrowthmaster.com/case-study/figma
https://th.linkedin.com/company/framer
https://akexorcist.dev/prototyping-tools-the-fast-way-to-get-started-the-mobile-app-development/
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 28