Figma Make เชื่อมโค้ดจริงได้แล้ว

Figma Make กำลังขยับจากเครื่องมือช่วยสร้างต้นแบบด้วย AI ไปสู่พื้นที่ทำงานที่ใกล้กับโค้ดจริงมากขึ้น ล่าสุด Figma Make ทำให้ผู้ใช้สามารถทำงานกับ codebase จริงของทีมได้โดยไม่ต้องออกจาก Figma จุดสำคัญคือไม่ได้เป็นแค่การวาดหน้าจอหรือสร้าง prototype แบบลอย ๆ อีกต่อไป แต่เป็นการเปิดแอปจริงจาก local codebase แล้วแก้ UI ผ่าน Figma Make ได้โดยตรง

Figma เผยว่าความสามารถใหม่จะเริ่มเปิดให้ใช้งานแบบ limited beta และใช้งานผ่าน Figma Beta desktop app สำหรับ Mac ก่อนเท่านั้น ในช่วง beta นี้ Figma ยังระบุว่าจะไม่คิด AI credits สำหรับความสามารถใหม่นี้ และจะประกาศรายละเอียดเรื่องราคา AI credits เพิ่มเติมในอนาคตครับ

จากดีไซน์สู่โค้ดจริงในที่เดียว

สิ่งที่ทำให้น่าสนใจคือ Figma ไม่ได้มอง Figma Make เป็นเพียงเครื่องมือ prompt-to-prototype แต่กำลังพยายามทำให้มันเป็นสะพานระหว่าง designer, PM และ developer มากขึ้น เดิมทีการทำงานมักเริ่มจากออกแบบใน Figma แล้วส่งต่อให้ developer นำไปเขียนโค้ดอีกที ซึ่งระหว่างทางอาจเกิดช่องว่างได้เยอะ ทั้งเรื่อง spacing, สี, layout, interaction หรือรายละเอียดเล็ก ๆ ที่ดีไซน์ตั้งใจไว้แต่ไปไม่ถึงโค้ดจริง

ความสามารถใหม่นี้เปลี่ยนภาพนั้นพอสมควรครับ เพราะผู้ใช้สามารถเชื่อม Figma Make เข้ากับ repository ของโปรเจกต์ จากนั้นเปิดแอปที่รันจากโค้ดจริงขึ้นมาใน Make แล้วแก้ UI ได้จากหน้าจอที่เห็นเลย เช่น ปรับ layout, เปลี่ยนสี, แก้ font, ขยับ spacing หรือปรับขนาดองค์ประกอบต่าง ๆ โดย agent ของ Figma จะไปหาโค้ดที่เกี่ยวข้องและแก้ให้ UI สะท้อนตามที่ผู้ใช้ปรับ

จากเดิมที่ designer อาจต้องอธิบายว่า “ขยับปุ่มนี้ลงอีกนิด” หรือ “สีตรงนี้ยังไม่ตรงกับ design system” ตอนนี้ Figma กำลังทดลองให้การแก้รายละเอียดเหล่านี้เกิดขึ้นบน interface จริง และสะท้อนกลับไปเป็น code change ได้เลยครับ

แก้ด้วยสายตา หรืออธิบายด้วย annotation ก็ได้

Figma Make รองรับวิธีแก้ UI หลายแบบ หนึ่งในนั้นคือ direct visual editing ผู้ใช้สามารถเลือก element บนหน้าจอแอป แล้วปรับ properties ผ่าน panel ได้โดยไม่ต้องเขียน prompt ทุกครั้ง วิธีนี้เหมาะกับการแก้สิ่งที่รู้ชัดอยู่แล้ว เช่น สี ขนาด layout หรือ spacing

แต่ถ้าการเปลี่ยนแปลงซับซ้อนขึ้น เช่น อยากเพิ่ม interaction, ปรับ animation หรือเปลี่ยน logic บางอย่าง Figma Make ก็มีระบบ annotation ให้ผู้ใช้ปักคำอธิบายลงบนหน้าจอโดยตรงได้ การ annotate หลายจุดพร้อมกันช่วยให้ agent มี context มากขึ้น ไม่ต้องเดาจาก prompt สั้น ๆ เพียงอย่างเดียว ตรงนี้เป็นแนวคิดที่น่าสนใจมากครับ เพราะงาน UI จำนวนมากไม่ได้อธิบายง่ายด้วยข้อความล้วน แต่เมื่อชี้ให้เห็นบนหน้าจอจริง การสื่อสารจะชัดกว่าเยอะ

นอกจากนี้ยังมี chat สำหรับอธิบายสิ่งที่ต้องการเปลี่ยน ทำให้ผู้ใช้เลือกวิธีทำงานได้ตามลักษณะของปัญหา ถ้าเป็นการแก้ visual ตรง ๆ ก็ใช้ panel ถ้าเป็นการเปลี่ยนพฤติกรรมหรือ interaction ก็ใช้ annotation หรือ chat เข้ามาช่วยครับ

ไม่ได้ข้าม developer แต่เข้ากับ Git workflow

ประเด็นที่ Figma พยายามสื่อชัดมากคือ การแก้ production code ควรเกิดขึ้นอย่างตั้งใจและผ่านกระบวนการของทีม ไม่ใช่กดแก้แล้ว deploy ทันทีแบบไม่มีการตรวจสอบครับ ดังนั้น Figma Make จึงรองรับ workflow ของ Git เช่น การสร้าง branch, ดู commit history, revert commit และเปิด pull request

ตามข้อมูลจาก Figma การเปลี่ยนแปลงจะถูกเก็บเป็น local commit จนกว่าผู้ใช้จะเปิด PR ซึ่งหมายความว่า engineering team ยังสามารถ review change ได้เหมือนงานโค้ดปกติ จุดนี้สำคัญมาก เพราะถ้า AI tool เข้าไปแตะโค้ดจริงโดยไม่มีระบบตรวจสอบ ทีมพัฒนาอาจรู้สึกไม่มั่นใจ แต่ถ้าทุกอย่างยังอยู่ใน branch และผ่าน pull request ก็จะเข้ากับกระบวนการทำงานเดิมได้มากกว่า

GitHub ได้รับการรองรับเต็มรูปแบบ รวมถึงการ clone, push branch และสร้าง pull request ส่วน GitHub Enterprise Cloud ก็รองรับเช่นกัน ขณะที่ GitLab และ Bitbucket รองรับบางส่วนผ่าน SSH โดยสามารถ clone และ push branch ได้ แต่การสร้าง pull request จากใน Make ยังไม่รองรับสำหรับสองแพลตฟอร์มนี้ครับ

ต้องมีการตั้งค่าจากฝั่งวิศวกรก่อน

แม้ Figma จะพยายามทำให้เครื่องมือนี้เข้าถึงง่ายขึ้นสำหรับ designer และ PM แต่ก็ยังไม่ใช่ฟีเจอร์ที่เปิดแล้วใช้ได้ทันทีในทุกโปรเจกต์ครับ เอกสารของ Figma ระบุว่าแต่ละ repository ต้องมีการตั้งค่าครั้งแรก โดยปกติควรให้ engineer ในทีมเป็นคนจัดการ

การตั้งค่านี้เกี่ยวข้องกับโฟลเดอร์ `.figma/make` ที่อยู่ใน root ของ repository ภายในมีไฟล์สำหรับบอก Make ว่าต้อง setup อะไร ติดตั้ง dependency อย่างไร รัน dev server อย่างไร ตรวจสอบว่า server พร้อมใช้งานหรือยัง และต้องใช้ port หรือ URL ไหน ไฟล์หลักที่ Figma ระบุไว้มีทั้งหมด 5 ไฟล์ ได้แก่ setup, install, dev, verify และ env

รายละเอียดนี้บอกชัดว่า Figma Make ไม่ได้ทำงานแบบวิเศษโดยไม่ต้องรู้จักโปรเจกต์เลยครับ มันยังต้องอาศัยโครงสร้าง dev environment ที่รันได้จริง และต้องมีการตั้งค่าที่ดีพอเพื่อให้ Make เปิดแอปขึ้นมา แสดงผลด้วยข้อมูลจริง และแก้ไขโค้ดได้อย่างถูกทาง

ใครเหมาะกับฟีเจอร์นี้ในช่วงแรก

ฟีเจอร์นี้ยังอยู่ใน closed beta และเหมาะกับ designer หรือ PM ที่มี access ไปยัง codebase ของบริษัทอยู่แล้ว รวมถึงทีมที่มี developer ช่วยตั้งค่า repository ให้พร้อมใช้งานครับ ผู้ที่ต้องการทดลองต้องเข้าร่วม waitlist แต่การสมัคร waitlist ไม่ได้การันตีว่าจะได้รับสิทธิ์ใช้งาน

ข้อจำกัดอีกอย่างคือช่วง beta นี้ใช้งานได้เฉพาะบน Mac ผ่าน Figma Beta desktop app เท่านั้น ดังนั้นทีมที่ใช้ Windows หรือยังไม่พร้อมให้ designer เข้าถึง repository จริง อาจต้องรอดูการขยายแพลตฟอร์มและนโยบายด้านสิทธิ์การเข้าถึงในอนาคต

ความสำคัญกับวงการออกแบบและพัฒนาเว็บ

สิ่งที่น่าสนใจที่สุดของ Figma Make รอบนี้ไม่ใช่แค่ “AI แก้โค้ดได้” แต่เป็นการพยายามลดระยะห่างระหว่างสิ่งที่ออกแบบกับสิ่งที่ถูก build จริงครับ หลายทีมเสียเวลาไปกับการส่งต่อ feedback ระหว่าง designer และ developer ซ้ำไปซ้ำมา โดยเฉพาะรายละเอียด UI ที่เล็กแต่มีผลต่อคุณภาพของผลิตภัณฑ์

ถ้าแนวทางนี้ทำงานได้ดี designer อาจสามารถทดลองแก้ UI บนของจริงได้เร็วขึ้น PM อาจช่วยปรับ flow บางส่วนให้เห็นภาพได้ทันที และ developer ยังมีบทบาทสำคัญในการ review, ปรับคุณภาพโค้ด และดูแล architecture ของระบบเหมือนเดิม

แน่นอนว่าเครื่องมือนี้ยังอยู่ในช่วง beta จึงยังไม่ควรมองว่าเป็นคำตอบสุดท้ายของ design-to-code ทั้งหมดครับ แต่ทิศทางของ Figma ชัดเจนมากขึ้นว่าอนาคตของงานออกแบบอาจไม่ได้จบที่ไฟล์ดีไซน์อีกต่อไป แต่จะเชื่อมกับโค้ดจริง กระบวนการ review จริง และ workflow ของทีมจริงมากขึ้นเรื่อย ๆ

สำหรับทีมที่ทำเว็บ แอป หรือ product ที่ต้องปรับ UI บ่อย ๆ Figma Make ใน local codebase เป็นฟีเจอร์ที่น่าจับตาครับ เพราะถ้ามันทำได้แม่น ใช้งานได้ปลอดภัย และเข้ากับ Git workflow ของทีมจริง ๆ มันอาจกลายเป็นเครื่องมือที่ช่วยให้ designer และ developer ทำงานใกล้กันมากขึ้น โดยไม่ต้องบังคับให้ทุกคนย้ายไปอยู่ในเครื่องมือเดียวกันทั้งหมด แต่ให้แต่ละคนใช้เครื่องมือที่ถนัด และเชื่อมงานกลับมาที่โค้ดจริงได้อย่างเป็นระบบมากขึ้นครับ

รายละเอียดเพิ่มเติม