วิวัฒนาการของ Figma: Code Layers, ปลั๊กอิน AI และการรองรับ Motion

Figma กำลังสร้างนิยามใหม่ให้กับเส้นแบ่งระหว่างการออกแบบและการพัฒนาด้วยการอัปเดตครั้งใหญ่ล่าสุด ด้วยการรวม code layers และความสามารถของ Generative AI เข้ากับ collaborative canvas โดยตรง แพลตฟอร์มนี้กำลังเปลี่ยนผ่านจากเครื่องมือทำต้นแบบ (prototyping tool) แบบสถิต ไปสู่สภาพแวดล้อมที่ขับเคลื่อนด้วยพลวัตและมีความหลากหลายทางสาขาวิชาชีพ

เชื่อมช่องว่างด้วย Code Layers

ในก้าวสำคัญสู่ความเท่าเทียมกันระหว่าง "design-to-code" Figma ได้นำเสนอ code layers ลงบน multiplayer canvas โดยตรง ฟีเจอร์นี้ช่วยให้ทีมวิศวกรสามารถโคลน repository และดึงเอา code flows ที่มีอยู่กลับมายัง design layers เพื่อการทดสอบและปรับปรุงแก้ไข (iteration) อย่างรวดเร็ว

ต่างจากเวิร์กโฟลว์แบบเดิมที่นักออกแบบต้องส่งมอบไฟล์แบบสถิตให้กับนักพัฒนา Yuhki Yamashita ประธานเจ้าหน้าที่ฝ่ายผลิตภัณฑ์ของ Figma เน้นย้ำว่าสภาพแวดล้อมนี้ถูกสร้างขึ้นเพื่อการสำรวจมากกว่าความสมบูรณ์แบบพร้อมใช้งานจริง (production-ready) การเปิดโอกาสให้นักออกแบบ ผู้จัดการผลิตภัณฑ์ และวิศวกรสามารถโต้ตอบกับโค้ดในรูปแบบเชิงพื้นที่และไม่เป็นเส้นตรง (non-linear) ทำให้ Figma ตั้งเป้าที่จะเร่งระยะการค้นหา (discovery phase) ของการพัฒนาผลิตภัณฑ์ และลดความติดขัดที่มักพบในกระบวนการส่งมอบงาน (hand-off process)

Motion ขั้นสูง, Shaders และ 3D Transforms

เป็นเวลาหลายปีที่การออกแบบ motion ความละเอียดสูง (high-fidelity) บังคับให้นักออกแบบต้องสลับไปมาระหว่าง Figma และซอฟต์แวร์แอนิเมชันเฉพาะทาง ซึ่งมักส่งผลให้เกิดกระบวนการแปลงไฟล์ที่ซับซ้อน Figma กำลังขจัดความซับซ้อนนี้ด้วยการเพิ่มการรองรับแอนิเมชัน (animations), การเปลี่ยนผ่าน (transitions) และ 3D transforms แบบ native

การอัปเดตนี้ยังขยายชุดเครื่องมือด้านภาพด้วยการเพิ่มการรองรับ shader effects และ fills ซึ่งช่วยให้สามารถสร้างต้นแบบองค์ประกอบภาพที่มีความซับซ้อนและมีประสิทธิภาพสูงได้ภายในเครื่องมือเอง เพื่อให้มั่นใจว่า "ความรู้สึก" (feel) ของผลิตภัณฑ์จะถูกถ่ายทอดออกมาได้ตั้งแต่ช่วงแรกของวงจรการพัฒนา

Generative AI และการสร้างปลั๊กอินแบบกำหนดเอง

Figma กำลังรุกหนักในแผนงานด้าน AI โดยการเปลี่ยน canvas ให้เป็นพื้นที่ทำงานที่เขียนโปรแกรมได้ ผู้ใช้สามารถใช้ text prompts เพื่อสร้าง "skills" ที่ทำซ้ำได้สำหรับ AI agents ทำให้ผู้ช่วย AI กลายเป็นผู้ร่วมงานที่ปรับแต่งได้ตามต้องการ แทนที่จะเป็นเพียงเครื่องมือทั่วไป เพื่อเพิ่มความแม่นยำ AI สามารถรับบริบท (context) จากเครื่องมือภายนอก เช่น Notion, Excel, GitHub, Granola และไฟล์ต่างๆ ที่อัปโหลดขึ้นไปได้

สิ่งที่อาจถือเป็นนวัตกรรมที่พลิกโฉมที่สุดสำหรับชุมชนนักพัฒนาคือความสามารถในการสร้างปลั๊กอินแบบกำหนดเองผ่านคำสั่งง่ายๆ ไม่ว่าผู้ใช้จะต้องการเครื่องมือสร้างเลย์เอาต์เฉพาะทาง หรือเครื่องมือลากเส้นเวกเตอร์ (vector path tracer) ที่ซับซ้อน พวกเขาก็สามารถสร้างเครื่องมือที่ตอบโจทย์การใช้งานเฉพาะด้านภายใน Figma ได้โดยไม่ต้องเขียนโค้ดแบบดั้งเดิม

การรวม Weavy เพื่อเวิร์กโฟลว์ที่ขับเคลื่อนด้วยโมเดล

ต่อยอดจากการเข้าซื้อกิจการ Weavy ซึ่งเป็นเครื่องมือแบบ node-based ทาง Figma กำลังดำเนินการรวมเวิร์กโฟลว์ขั้นสูงที่ขับเคลื่อนด้วยโมเดล (model-driven workflows) เข้าด้วยกัน ในช่วงปลายปีนี้ ผู้ใช้จะสามารถสร้าง Weavy workflows ได้โดยตรงภายในอินเทอร์เฟซของ Figma ซึ่งจะช่วยให้ทีมออกแบบสามารถรันเวิร์กโฟลว์ที่ซับซ้อนผ่านโมเดล AI ต่างๆ เพื่อเปรียบเทียบผลลัพธ์ เพื่อให้มั่นใจว่าทิศทางการออกแบบที่เลือกนั้นได้รับการปรับแต่งให้เหมาะสมที่สุดผ่านพารามิเตอร์การสร้าง (generative parameters) ที่หลากหลาย

สรุปประเด็นสำคัญ

  • ความเท่าเทียมกันระหว่าง Code-to-Design: code layers แบบใหม่ช่วยให้ทีมสามารถดึงข้อมูลจาก repository เข้าสู่ canvas ทำให้สภาพแวดล้อมการออกแบบเป็นพื้นที่การทำงานร่วมกันอย่างแท้จริงสำหรับวิศวกรและนักออกแบบ
  • Native Motion & Shaders: ขณะนี้ Figma รองรับ 3D transforms, transitions และ shader effects ซึ่งช่วยลดความจำเป็นในการใช้ซอฟต์แวร์แอนิเมชันภายนอก
  • การขยายขีดความสามารถด้วย AI: ผู้ใช้สามารถสร้างปลั๊กอินแบบกำหนดเองและ "skills" ของ AI ที่ทำซ้ำได้ผ่าน text prompts โดยเชื่อมต่อกับข้อมูลภายนอกจาก GitHub และ Notion