ออกแบบ UI ระดับทีมโปร
ด้วย Figma + AI

เนื้อหาในเด็คนี้

• Figma คืออะไร — ทำไมทีมดีไซน์ทั่วโลกถึงเลือกใช้
• แผนราคา — Free/Starter vs Professional vs Organization/Enterprise
• แนวคิดหลัก — frame, component, auto-layout, variant, prototype
• เริ่มใช้ทีละขั้น — สำหรับคนที่ไม่ใช่ดีไซเนอร์
• ฟีเจอร์ AI — Figma Make และ First Draft
• Use case จริง — งานแบบไหนเหมาะกับ Figma
• Figma vs Claude Design — เลือกใช้เครื่องมือไหนตอนไหน

Figma คืออะไร

• เครื่องมือออกแบบ UI/UX แบบ vector ที่ทำงานผ่านเบราว์เซอร์ ไม่ต้องติดตั้งโปรแกรม
• รองรับ real-time multiplayer collaboration — หลายคนแก้ไฟล์เดียวกันพร้อมกันได้เหมือน Google Docs
• ใช้ได้ตั้งแต่ wireframe เร็ว ๆ ไปจนถึง UI ที่พร้อมส่งให้ทีม dev สร้างต่อ
• มี FigJam (whiteboard ระดมไอเดีย) และ Slides (นำเสนองาน) อยู่ในระบบเดียวกัน

ทำไมทีมดีไซน์ทั่วโลกใช้ Figma

• ทำงานร่วมกันแบบเรียลไทม์ — ดีไซเนอร์ PM และ dev เห็นการเปลี่ยนแปลงพร้อมกัน ไม่ต้องส่งไฟล์กลับไปมา
• Design system ที่ทีมใช้ร่วมกันผ่าน component library — แก้ครั้งเดียว อัปเดตทุกที่ที่ใช้
• Dev handoff ผ่าน Inspect/Dev Mode ทำให้ทีม dev อ่านค่า spacing สี ฟอนต์ได้ตรงจากไฟล์ดีไซน์
• ระบบ plugin และ community file เปิดกว้าง ต่อยอดเวิร์กโฟลว์ได้หลากหลาย

Figma Pricing — Free vs Professional vs Organization/Enterprise

แต่ละ Full seat มี AI credit ให้ใช้ต่อเดือน (Professional ~3,000 · Enterprise ~4,250) — เช็กแผนล่าสุดที่ figma.com/pricing

ใช้ฟรีได้แค่ไหน ก่อนต้องจ่าย

แนวคิดหลัก

• Frame — พื้นที่ผืนผ้าใบหลักของแต่ละหน้าจอ เทียบได้กับ artboard
• Component — ชิ้นส่วน UI ที่ใช้ซ้ำได้ (เช่นปุ่ม) แก้ต้นแบบครั้งเดียว อัปเดตทุกที่ที่ใช้
• Auto-layout — ระบบจัดวางอัตโนมัติ ที่แมปตรงกับ CSS flexbox ทำให้ dev เอาไปต่อได้ง่าย
• Variant — สถานะต่าง ๆ ของ component เดียวกัน (เช่นปุ่ม default/hover/disabled) รวมอยู่ใน component set เดียว
• Prototype link — เชื่อมโยงหน้าจอเข้าด้วยกันให้คลิกทดสอบ flow ได้เหมือนแอปจริง

เริ่มใช้ Figma ทีละขั้น (สำหรับคนไม่ใช่ดีไซเนอร์)

Figma Make — สร้างแอปจาก prompt

• พิมพ์ prompt อธิบายสิ่งที่ต้องการ แล้ว AI จะสร้าง prototype ที่คลิกได้จริง ทันทีในไฟล์ Figma
• เบื้องหลังคือโค้ดที่ใช้งานได้จริง สร้างด้วย React และ Tailwind CSS
• แนบไฟล์ดีไซน์ ภาพ วิดีโอ หรือเอกสารประกอบ prompt เพื่อให้ AI เข้าใจบริบทมากขึ้น
• เหมาะสำหรับทำ prototype ทดสอบไอเดียเร็ว ๆ ก่อนให้ทีม dev สร้างจริง

First Draft — สร้างดีไซน์ตั้งต้นจาก prompt

• เข้าเมนู Actions → First Draft แล้วพิมพ์ prompt เช่น "หน้า pricing ของ dev tools startup"
• AI เลือก จัดวาง และปรับแต่ง component จาก design system ให้เป็นจุดเริ่มต้นของดีไซน์
• เลือก library ได้หลายแบบ ตั้งแต่ wireframe เรียบ ๆ ไปจนถึง UI ที่มีสไตล์ชัดเจน
• แก้ไขต่อได้ทั้งด้วย prompt เพิ่มเติม หรือปรับด้วยเครื่องมือปกติของ Figma
• ต้องใช้ Full seat บนแผนเสียเงิน จึงจะใช้ฟีเจอร์นี้ได้

งานนี้เหมาะกับ Figma เพราะอะไร

งานนี้เหมาะกับ Figma เพราะอะไร (ต่อ)

อีกหนึ่งงานที่ Figma เหมาะ

• งานนี้คืออะไร: สร้างและดูแล design system กลางที่ทีมทั้งหมดใช้ร่วมกันในหลายโปรเจกต์
• ทำไม Figma เหมาะ: team library ทำให้แก้ component ต้นแบบครั้งเดียว ทุกไฟล์ที่ใช้ component นั้นอัปเดตตาม ลดความไม่สอดคล้องของ UI ทั่วทั้งองค์กร
• เหมาะกับทีมที่มีหลายผลิตภัณฑ์ หรือทีมที่ขยายใหญ่ขึ้นจนต้องการมาตรฐานกลาง

Figma vs Claude Design (chat-based)

สิ่งที่ต้องรู้ก่อนเริ่ม

• เรียนรู้ช่วงแรกสูงกว่า Canva — Figma เน้นความยืดหยุ่นและควบคุมละเอียด จึงมีคำศัพท์และแนวคิดให้ทำความเข้าใจมากกว่า
• ต้องเข้าใจแนวคิด design system (component, variant, auto-layout) ถึงจะใช้ประโยชน์ได้เต็มที่ ไม่ใช่แค่ลากวาง
• ฟีเจอร์ AI (First Draft) ใช้ได้เฉพาะ Full seat บนแผนเสียเงิน ไม่ใช่ทุกคนในทีมจะเข้าถึงได้
• ราคาต่อ seat แยกตามบทบาท (Full/Dev/Collab) ต้องวางแผนจำนวน seat ให้เหมาะกับทีมก่อนสมัคร

"Figma คือพื้นที่ทำงานร่วมกันของทีมโปรดักต์ — ตั้งแต่ไอเดียแรก ไปจนถึงโค้ดที่ dev เอาไปสร้างจริง"— สรุปบทเรียน ClaudeDuc: Figma

เรียนสดกับโค้ช BooAI BootCamp