Figma เปิดตัวดีไซน์เอเจนต์

• เปิดตัว ดีไซน์เอเจนต์เฉพาะสำหรับ Figma ที่ทำงานได้โดยตรงบนแคนวาส ทำให้นักออกแบบสามารถสลับไปมาระหว่างการทำงานร่วมกับ AI และการแก้ไขด้วยตนเองได้โดยไม่ต้องเปลี่ยนเครื่องมือ
• ผ่านการปรับจูนให้เข้าใจบริบทของระบบดีไซน์อย่างลึกซึ้ง ทั้ง คอมโพเนนต์, โทเคน, มาตรฐาน, แนวปฏิบัติที่ดี จึงสร้างผลลัพธ์ที่เหมาะกับการแก้ไขไฟล์ Figma ได้อย่างเหมาะสม
• เริ่มพรอมป์ต์ได้จากทุกเลเยอร์ในงานดีไซน์ รองรับ parallel prompt เพื่อสำรวจหลายไอเดียพร้อมกัน และให้เอเจนต์กับผู้ใช้แก้ไขงานพร้อมกันได้
• ใช้กับงาน ทำงานจุกจิกซ้ำๆ (busywork) แบบอัตโนมัติ เช่น เปลี่ยนตัวแปรจำนวนมาก, สลับคอมโพเนนต์, เปลี่ยนเป็นโหมดมืด, แทนที่ lorem ipsum
• จะทยอยเปิดเบต้าในช่วงไม่กี่สัปดาห์ข้างหน้า ระหว่างเบต้าไม่ใช้เครดิต และเปิดให้ผู้ใช้ Full seat ของแพลน Professional/Organization/Enterprise

---

ที่มาของการเปิดตัวและการวางตำแหน่ง

• องค์ประกอบสำคัญที่นักออกแบบต้องการคือ การสำรวจ, การทดลอง, การทำงานร่วมกัน, ความแม่นยำ และ Figma ถูกออกแบบให้เป็นแคนวาสแบบหลายผู้เล่นเพื่อรองรับสิ่งเหล่านี้
• เมื่อหลายทีมเริ่มนำเครื่องมือเอเจนต์มาใช้ ก็เกิด ทางเลือกแบบผิดๆ (false choices) เช่น "ความเร็ว vs ความแม่นยำ" หรือ "สิ่งที่ AI สร้าง vs การลงมือทำเอง" แต่ Figma มองว่าไม่จำเป็นต้องเลือกเพียงอย่างใดอย่างหนึ่ง
• หลังจากเมื่อต้นปีเปิดให้เอเจนต์จากภายนอกเข้าถึงแคนวาสของ Figma แล้ว รอบนี้จึงเปิดตัว Figma Agent ที่ฝังอยู่ในแคนวาสและแถบด้านซ้าย (left rail) โดยตรง
• เป้าหมายคือการสร้างเอเจนต์ที่เชี่ยวชาญ Figma และเป็นเนทีฟกับวิธีทำงานของทีม ทำให้ ตัวโมเดลสามารถอ่าน Figma เองได้ (legible) ในระดับที่เครื่องมือภายนอกทำไม่ได้

Figma Agent vs MCP Server

• Figma Agent

  • ใช้ตอนทำงานบนแคนวาส เป็นแบบฝังในตัว และมีบริบทเพิ่มเติมเกี่ยวกับระบบดีไซน์
  • อยู่บนแคนวาสตลอดโดยไม่ต้องตั้งค่าเพิ่มเติมหรือสลับบริบท

• MCP Server

  • ใช้เมื่อต้องดึงโค้ดเข้ามายังแคนวาส (pull) หรือส่งดีไซน์กลับออกไปเป็นโค้ด (push)
  • ทำหน้าที่ดูแลเวิร์กโฟลว์ระหว่างโค้ดกับแคนวาสร่วมกับ use_figma

วิธีการทำงานหลัก

• ทำงานอยู่ข้างแคนวาสในฐานะ ผู้ร่วมงานอย่างแท้จริง (true collaborator) ที่ทำงานร่วมกับทีมในไฟล์เดียวกัน
• ผ่านการปรับจูนมาสำหรับการแก้ไขไฟล์ Figma จึงสร้างผลลัพธ์ที่สอดคล้องกับบริบทของงานดีไซน์ และออกแบบมาให้ผู้ใช้ยังคงควบคุมได้ผ่านการแก้ไขโดยตรง
• ต่างจาก MCP Server ตรงที่อยู่บนแคนวาสโดยตรง จึงไม่ต้องตั้งค่าเพิ่มหรือสลับบริบท
  • เริ่มพรอมป์ต์ได้จากทุกเลเยอร์ของงานดีไซน์
  • รองรับ parallel prompting เพื่อกางหลายไอเดียพร้อมกัน
  • ระหว่างที่เอเจนต์ทำงาน ผู้ใช้ก็ยังแก้ไขและทำซ้ำงานต่อไปพร้อมกันได้

สำรวจแนวทางได้มากขึ้น (Explore more directions)

• งานออกแบบที่ดีที่สุดมักไม่ได้มาจากไอเดียแรกหรือพรอมป์ต์แรก การสำรวจทิศทาง เปรียบเทียบแนวทาง และทำซ้ำ คือหัวใจของการออกแบบ

• ขยายให้กว้าง (Go wide)

  • สร้างแนวทางด้านสไตล์ที่แตกต่างกันอย่างรวดเร็วสำหรับปัญหาเดียวกัน
  • เปรียบเทียบหลาย checkout flow ที่ปรับให้เหมาะกับเป้าหมายทางธุรกิจต่างกัน
  • ขอ information architecture ได้ 3 แบบที่ต่างกัน

• ลงลึก (Go deep)

  • เลือกหนึ่งทิศทางแล้วทำซ้ำ เปรียบเทียบการนำไปใช้จริง และทบทวนดีไซน์เดิม โดยยังคงสอดคล้องกับระบบดีไซน์
  • ใช้คอมโพเนนต์ที่ถูกใช้บ่อยและใช้ล่าสุดเป็นจุดเริ่มต้น
  • เลือกไลบรารีเฉพาะ หรือควบคุมทิศทางของผลลัพธ์ด้วยการ @ mention โทเคน/ตัวแปร/คอมโพเนนต์ — คล้ายคีย์ลัดของระบบดีไซน์

• การทำงานร่วมกับ Figma Make

  • สร้างเลเยอร์ดีไซน์ด้วยเอเจนต์ใน Figma Design เพื่อทำให้เจตนาของ flow, state, copy และโครงสร้างชัดเจนขึ้น → ส่งไปยัง Make เพื่อสร้างเลเยอร์โค้ด → แล้วฝังกลับเข้า Figma Design
  • หรือเริ่มจาก Figma Make → คัดลอกเฟรมไปยัง Figma Design → ทำซ้ำด้วยเอเจนต์ → แล้วส่งกลับไปยัง Make
• ยิ่งการสร้างดีไซน์ด้วย AI ง่ายขึ้นเท่าไร ความเสี่ยงที่จะปล่อยผลงานธรรมดาๆ ออกสู่ตลาด ก็ยิ่งเพิ่มขึ้น และเอเจนต์นี้ถูกออกแบบมาเพื่อช่วยสำรวจทิศทางให้มากขึ้นเพื่อเลือกสิ่งที่ถูกต้อง
• เมื่อได้ทิศทางแล้ว การลงมือทำด้วยตัวเองมักเร็วกว่า เป็นธรรมชาติกว่า และ ใช้โทเคนอย่างมีประสิทธิภาพ (token efficient)

ทำงานจุกจิกให้เป็นอัตโนมัติ (Automate busywork)

• การที่เอเจนต์ทำงานร่วมกันบนแคนวาสทำให้สามารถสลับไปมาระหว่างความช่วยเหลือจาก AI กับการแก้ไขโดยตรงได้อย่างอิสระ
• ทำให้งานน่าเบื่อที่ต้องอาศัยบริบทและความแม่นยำกลายเป็นอัตโนมัติ
  • เปลี่ยนชื่อตัวแปรครั้งเดียวจำนวนมากเพื่อความสม่ำเสมอ
  • เปลี่ยนคอมโพเนนต์เดียวกันในหลายหน้าจอ
  • ใช้การเปลี่ยน padding ซ้ำๆ กับทั้ง flow
  • เติมคอนเทนต์ที่สมจริงให้กับหลายเฟรม

• ตัวอย่างการใช้งานที่ชัดเจน

  • อัปเดต typography ทั้งไฟล์
  • แทนที่ข้อความ lorem ipsum และรูปภาพทั่วทั้งกริด
  • ตั้งค่าคอมโพเนนต์ chip ทั้งหมดให้อยู่ในสถานะ active
  • สลับหน้าจอเป็นโหมดมืดได้โดยไม่ต้องปรับ fill และคอนทราสต์ด้วยมือ

• มีประโยชน์อย่างยิ่งสำหรับผู้ดูแลระบบดีไซน์

  • อัปเดตคำอธิบาย แท็ก และกรณีการใช้งานจำนวนมากทั่วทั้งไลบรารี
  • ทำมาตรฐาน naming convention
  • สร้างเอกสารคอมโพเนนต์ที่ครอบคลุมทุกสถานะและทุกรูปแบบย่อย
  • แชร์ตัวอย่างงานของทีมเพื่อใช้เป็นแนวทางด้านคุณภาพ

• การส่งต่องานกับ Figma MCP Server

  • งานสามารถเคลื่อนย้ายระหว่างโค้ดกับ Figma ได้โดยไม่สูญเสียความเที่ยงตรง
  • เริ่มจากโค้ด → นำเข้า Figma ด้วยความสามารถ code-to-canvas เพื่อทำซ้ำหรือใช้ระบบดีไซน์ → แล้วส่งกลับผ่าน MCP Server โดยทุกอย่างยังคงซิงก์กันอยู่

ใช้ประโยชน์จากฟีดแบ็กได้มากขึ้น (Do more with feedback)

• ในงานออกแบบมักมีทั้งโน้ตวิจารณ์ ปฏิกิริยาจากผู้มีส่วนได้ส่วนเสีย คำถามที่ยังไม่ปิด และฟีดแบ็กที่กระจายอยู่ตามคอมเมนต์และจุดต่างๆ ในไฟล์
• เพราะทั้งทีมทำงานอยู่ในไฟล์เดียวกัน เอเจนต์จึงมีบริบทนี้อยู่แล้ว ความรู้สึกจึงไม่เหมือนการต้องบรีฟผู้ร่วมงานใหม่ แต่เหมือน การจัดระเบียบความคิดกับคนที่อยู่ในห้องเดียวกันอยู่แล้ว

• วิธีใช้งาน

  • สรุปฟีดแบ็ก ระบุธีม และเปลี่ยนอินพุตให้กลายเป็นขั้นตอนถัดไป
  • pressure test ดีไซน์จากหลายมุมมอง — สามารถจำลองปฏิกิริยาของ VP ที่โฟกัสรายได้ได้
  • จัดระเบียบคอมเมนต์เธรดยาวๆ ให้เป็นแผนที่ลงมือทำได้
  • เรียบเรียงความคิดก่อนการ crit เพื่อปรับทิศทางให้คมขึ้น

โรดแมปถัดไปและเงื่อนไขการเปิดตัว

• ในอีกไม่กี่เดือนข้างหน้า จะเน้นปรับปรุงการรองรับระบบดีไซน์ ปรับปรุง UX ขยายความสามารถในการค้นหาทั่วทั้งไฟล์ และเพิ่มรูปแบบการปรับแต่ง

• เงื่อนไขการเปิดเบต้า

  • ทยอยเปิดเบต้าในช่วงไม่กี่สัปดาห์ข้างหน้า
  • ระหว่างช่วงเบต้าไม่ใช้เครดิต และจะเริ่มใช้ AI credits เมื่อเปิดใช้งานทั่วไป (GA)
  • สามารถลงชื่อใน waitlist ได้ แต่การลงชื่อไม่ได้รับประกันสิทธิ์เข้าถึง

• แพลนที่ใช้งานได้

  • สำหรับผู้ใช้ Full seat ของแพลน Professional, Organization และ Enterprise
  • ผู้ใช้ Collab และ Dev seat สามารถใช้เอเจนต์ใน drafts ได้
  • ไม่รองรับแพลน Starter, Education และ Government