Figma เป็นโปรแกรมที่ใช้สำหรับออกแบบ UX/UI ก่อตั้งในปี 2012 โดย Dylan Field และ Evan Wallace

UX กับ UI ต่างกันอย่างไร

UI (User Interface) หรือส่วนติดต่อผู้ใช้

UI เน้นไปที่หน้าตาและการมองเห็นของผลิตภัณฑ์ เช่น เว็บไซต์หรือแอปพลิเคชัน รวมถึงการออกแบบปุ่ม ไอคอน ตัวอักษร สี เลย์เอาต์ และองค์ประกอบที่ผู้ใช้โต้ตอบได้

เป้าหมายหลักคือทำให้ผลิตภัณฑ์ สวยงาม ใช้งานง่าย และเป็นไปในทิศทางเดียวกับแบรนด์ นักออกแบบ UI จะคอยดูให้สไตล์ทั้งหมดของหน้าจอมีความสอดคล้องกัน

ตัวอย่าง เช่น หน้าเข้าสู่ระบบที่มีช่องกรอกชื่อผู้ใช้ ปุ่มสีชัดเจน ไอคอน และการจัดวางที่เหมาะสม สิ่งเหล่านี้คือการทำงานของ UI

UX (User Experience) หรือประสบการณ์ผู้ใช้

UX คือ ประสบการณ์โดยรวมที่ผู้ใช้ได้รับเมื่อใช้งานผลิตภัณฑ์ การออกแบบการเดินทางของผู้ใช้งาน (user flow) การทำ wireframe การทดสอบการใช้งาน และการเข้าใจความต้องการผู้ใช้

เป้าหมายหลักคือทำให้ผลิตภัณฑ์ ใช้งานได้จริง สะดวก และสร้างความพึงพอใจ นักออกแบบ UX จะคิดว่าผู้ใช้สามารถทำงานได้ง่ายและเร็วแค่ไหน

ตัวอย่าง เช่น การตัดสินใจเพิ่มฟังก์ชัน “เข้าสู่ระบบด้วย Google/Facebook” เพื่อลดขั้นตอนของผู้ใช้ ถือเป็นงานด้าน UX

ความสัมพันธ์ของ UX และ UI

• UI = หน้าตา (How it looks)

• UX = วิธีการทำงาน (How it works)

ทั้งสองอย่างจำเป็นต้องทำงานร่วมกัน

• ถ้า UI สวย แต่ UX แย่ จะทำให้ผู้ใช้จะหงุดหงิด

• ถ้า UX ดี แต่ UI ไม่น่าสนใจ จะทำให้ผู้ใช้อาจไม่อยากใช้

ชุดเครื่องมือและฟีเจอร์ของ Figma

🖌 Figma Design

• คือเครื่องมือหลักของ Figma ใช้สำหรับออกแบบ UI/UX และสร้างต้นแบบ (prototype) ได้ในที่เดียว

• จุดเด่น:

o ออกแบบแบบเวกเตอร์ (vector-based)

o แก้ไขร่วมกันแบบเรียลไทม์

o ทำ prototype ได้เลย ไม่ต้องส่งออกไปใช้แอปอื่น

💻 Dev Mode

• คือโหมดสำหรับนักพัฒนา (Developer) ที่ช่วยแปลงดีไซน์เป็นโค้ด

• จุดเด่น:

o Inspect design → ดูค่าต่าง ๆ เช่น CSS, iOS, Android code snippet

o ลดการสื่อสารผิดพลาดระหว่างดีไซเนอร์กับนักพัฒนา

o สร้าง workflow ที่ seamless ระหว่างทีม Design และ Engineering

📝 FigJam

• คือกระดานไวท์บอร์ดดิจิทัล ใช้สำหรับ brainstorm, ทำแผนงาน, ทำ workshop หรือ retrospective

• จุดเด่น:

o แชร์สติ๊กเกอร์ ขีดเขียนได้อิสระ

o เหมาะกับการระดมความคิดเป็นทีมออนไลน์

o ใช้คู่กับ Figma Design ได้เลย

📊 Figma Slides

• คือเครื่องมือสร้างงานนำเสนอ (presentations) แบบ collaborative ทำงานเป็นทีม

• จุดเด่น:

o คล้าย PowerPoint/Google Slides แต่ทำงานร่วมกันเรียลไทม์

o ดึงองค์ประกอบจาก Figma Design มาใช้ตรง ๆ

o เน้น co-create ไม่ใช่แค่โชว์สไลด์

✏️ Figma Draw (ใหม่)

• คือเครื่องมือสำหรับวาดภาพและแก้ไขเวกเตอร์ขั้นสูง คล้ายๆกับ Adobe Illustrator Figma Draw เป็นเครื่องมือที่จะช่วยสนับสนุนคนที่ใช้งาน Figma อยู่แล้ว มากกว่าที่จะเข้ามาแข่งกับ Adobe Illustrator

• จุดเด่น:

o ใช้สำหรับ illustration โดยตรง

o เพิ่มความสามารถด้าน drawing ให้ Figma ใช้แทน Illustrator ได้ในบางเคส

🎯 Figma Buzz (Beta)

• คือเครื่องมือช่วยสร้างป้ายแบนนเนอร์จำนวนมาก เหมาะสำหรับการช่วยสร้างแบรนด์สินค้า

• จุดเด่น:

o เน้นการตลาด (marketing)

o ใช้ AI ช่วยปรับเนื้อหาให้ตรง brand guideline

o ลดเวลาสร้างคอนเทนต์ซ้ำ ๆ

🌐 Figma Sites (Beta)

• คือเครื่องมือสร้างและเผยแพร่เว็บไซต์แบบ responsive โดยตรงจาก Figma เปลี่ยนงานออกแบบให้เป็นเว็บไซต์

• จุดเด่น:

o ทำเว็บได้โดยไม่ต้องโค้ด (no-code / low-code)

o Responsive อัตโนมัติ (รองรับมือถือ แท็บเล็ต เดสก์ท็อป)

o ต่อเนื่องจากการออกแบบ UI ไปสู่เว็บจริง

⚡ Figma Make (ใหม่)

• เครื่องมือ AI ที่ช่วย “Prompt → Generate Code/Prototype” นักออกแบบมีหน้าที่แค่ออกแบบ ตัวโปรแกรมจะทำหน้าที่สร้างโค้ดที่อยู่เบื้องหลังการออกแบบให้

• จุดเด่น

o พิมพ์ prompt (เช่น “สร้าง landing page สำหรับแอปฟิตเนส”) แล้ว AI จะ generate layout และโค้ดให้

o เปรียบเสมือน Copilot สำหรับ Design + Development

o เร่งการสร้างต้นแบบและโปรเจกต์ใหม่ ๆ

o นักออกแบบที่ต้องการสร้างแอปจะมีผู้ช่วยในการเขียนโค้ด

สรุป

• Figma Design / FigJam / Slides เน้นการออกแบบและการทำงานร่วมกัน

• Dev Mode / Make เน้นเชื่อมดีไซน์กับโค้ด

• Draw / Buzz / Sites ขยายขอบเขตจากดีไซน์ไปสู่ภาพประกอบ คอนเทนต์ เว็บไซต์จริง