AI สามารถสร้างแอป React ที่ใช้งานได้จริงขึ้นมาภายในไม่กี่วินาที และเครื่องมืออย่าง GeekyAnts ก็ให้คำมั่นว่าจะสามารถดึงโค้ดที่เพิ่งสร้างขึ้นใหม่นั้นกลับเข้าสู่ Figma ได้โดยไม่สูญเสียโครงสร้างของ design system ไป คำกล่าวอ้างนี้มีความสำคัญมาก เพราะที่ผ่านมาทีมออกแบบมักถูกบังคับให้ต้องเริ่มนับหนึ่งใหม่ทุกครั้งที่มีโค้ดที่เขียนโดย AI ปรากฏขึ้น ซึ่งเป็นการเพิ่มทั้งเวลาและค่าใช้จ่ายในการออกแบบใหม่

เป็นเวลาหลายปีที่การส่งต่องาน (hand-off) ดูเหมือนจะง่ายเมื่อดูในกระดาษ: นักออกแบบสร้างหน้าจอใน Figma นักพัฒนาเขียนโค้ดเพื่อสร้างหน้าจอเหล่านั้นขึ้นมาใหม่ และแต่ละฝ่ายต่างก็มีสำเนาของเลย์เอาต์เป็นของตัวเอง แต่เครื่องมือสร้างโค้ดที่ขับเคลื่อนด้วย AI ได้ทำลายจังหวะการทำงานนั้นลง เครื่องยนต์ AI สามารถส่งโปรเจกต์ React ที่พร้อมรันมาให้ได้ แต่กลับไม่มีวิธีที่ตรงไปตรงมาในการนำคอมโพเนนต์ที่ได้กลับเข้าสู่ไฟล์ดีไซน์ต้นฉบับ ผลลัพธ์ที่ได้คือวงจรที่น่าปวดหัวแบบ “เขียนโค้ดก่อน ออกแบบทีหลัง” (code-first, design-later) ซึ่งทำลายภาษาการออกแบบที่ใช้ร่วมกันและเพิ่มภาระในการดูแลรักษา

ทำไม DOM ถึงมีข้อจำกัด

เครื่องมือทำ reverse-engineering ส่วนใหญ่เริ่มต้นด้วย Document Object Model (DOM) ซึ่งเป็นตัวแทนขององค์ประกอบ HTML ในเบราว์เซอร์ โดย DOM จะมองว่าองค์ประกอบทางภาพทุกอย่างเป็นเพียง <div> หรือ <span> ทั่วไป มันไม่สามารถแยกแยะได้ว่าอะไรคือปุ่มหรือการ์ด และไม่รู้ด้วยซ้ำว่าชุดขององค์ประกอบเหล่านั้นเป็นส่วนหนึ่งของ master component ใน design system หรือไม่ เมื่อหน้าเว็บมีปุ่มสิบปุ่ม DOM จะรายงานเพียงแค่ว่ามีเลเยอร์ที่ไม่ระบุชื่อสิบเลเยอร์ ความเชื่อมโยงกับคอมโพเนนต์ไลบรารีต้นฉบับจึงหายไป ทิ้งให้นักออกแบบต้องเผชิญกับกลุ่มรูปทรงที่ไม่ได้จัดกลุ่มซึ่งยุ่งเหยิง ซึ่งบ่อยครั้งต้องใช้เวลาในการจัดระเบียบมากกว่าการสร้างหน้าจอขึ้นมาใหม่ตั้งแต่ต้นเสียอีก

React Fiber มอบแผนผังที่ละเอียดกว่า

ตัวจัดการคิวภายใน (internal scheduler) ของ React ที่เรียกว่า Fiber จะรักษาโครงสร้างแบบต้นไม้ของคอมโพเนนต์ (tree of components) ไว้ ซึ่งประกอบด้วยชื่อ, ความสัมพันธ์แบบ parent-child และชุดข้อมูลคุณสมบัติ (property bags) การอ่านโครงสร้าง Fiber แทนที่จะอ่าน HTML ที่ถูกเรนเดอร์ออกมา จะช่วยให้เครื่องมือ reverse-engineering สามารถระบุได้ว่า <div> เฉพาะเจาะจงนั้น แท้จริงแล้วคือคอมโพเนนต์ PrimaryButton ที่อยู่ภายในคอมโพเนนต์ Header และมีการส่ง props ชุดหนึ่งเพื่อกำหนดสถานะของมัน ข้อมูลเชิงลึกนี้ช่วยรักษาเจตนาที่นักพัฒนาต้นฉบับ—หรือ AI ที่สร้างโค้ดขึ้นมา—ได้กำหนดไว้ใน UI

GeekyAnts ใช้การดึงข้อมูล React Fiber เพื่อนำโค้ดที่ใช้งานจริงเข้าสู่ไฟล์ Figma ที่สามารถแก้ไขได้

เวิร์กโฟลว์ใหม่นี้แก้ปัญหาที่เกิดขึ้นจริงได้อย่างไร

การขยาย Variant

วิธีการบันทึกแบบดั้งเดิมจะทำ snapshot เฉพาะสถานะที่มองเห็นได้ของคอมโพเนนต์เท่านั้น เช่น ปุ่มในสถานะปกติที่ไม่ได้ hover แต่ด้วยการตรวจสอบนิยามของคอมโพเนนต์ใน Fiber tree เครื่องมือนี้จะสามารถแจกแจงทุก variant ที่ประกาศไว้ในซอร์สโค้ดได้ ไม่ว่าจะเป็น hover, focused, disabled, loading และอื่นๆ จากนั้นจะสร้าง Figma Component Set ที่รวมสถานะทั้งหมดเหล่านั้นเข้าด้วยกัน ซึ่งสะท้อนถึงเจตนาของ design system โดยไม่ต้องทำการคัดลอกซ้ำด้วยตัวเอง

การทำ Layout mapping

เลย์เอาต์บนเว็บพึ่งพา CSS Flexbox เป็นหลัก ในขณะที่สิ่งที่เทียบเท่ากันใน Figma คือ Auto Layout เลเยอร์การแปล (translation layer) ที่จับคู่คุณสมบัติของ Flexbox (direction, justification, alignment, gaps) เข้ากับพารามิเตอร์ของ Auto Layout โดยตรง หมายความว่าระยะห่าง (spacing), พฤติกรรมการปรับขนาด (resizing behavior) และการจัดวาง (alignment) จะยังคงอยู่ในการทำงานแบบไป-กลับ (round-trip) นักออกแบบไม่จำเป็นต้องสร้าง flex container ที่ซับซ้อนด้วยตัวเองอีกต่อไป

การสั่งการ State

องค์ประกอบ UI หลายอย่าง เช่น modals, dropdowns, accordions มักจะถูกซ่อนไว้ใน DOM จนกว่า JavaScript จะเปลี่ยนสถานะ เนื่องจาก Fiber tree มีการบันทึกตรรกะนั้นไว้ เครื่องมือ reverse-engineering จึงสามารถสั่งการสถานะเหล่านั้นผ่านโปรแกรม เพื่อดึงองค์ประกอบที่ถูกซ่อนออกมาและบันทึกเป็นวัตถุการออกแบบ (design objects) ผลลัพธ์ที่ได้คือไฟล์ดีไซน์ที่สมบูรณ์ซึ่งรวมทุกองค์ประกอบที่มีการโต้ตอบ (interactive) ไม่ใช่แค่สิ่งที่มองเห็นได้ในตอนแรกที่โหลดหน้าเว็บ

เครื่องมือที่กำลังมาแรง

  • GeekyAnts – ดึงข้อมูล React Fiber เพื่อสร้างไฟล์ Figma ที่ใช้งานได้จริงและแก้ไขได้ โดยยังคงรักษาขอบเขตของคอมโพเนนต์ไว้
  • Anima – เน้นไปที่เส้นทางจากดีไซน์สู่โค้ด (forward path) โดยเปลี่ยนดีไซน์จาก Figma ให้เป็นโค้ด React หรือ Vue
  • Locofy.ai – ใช้ AI ในการเปลี่ยนเลย์เอาต์จาก Figma ให้เป็นโค้ดที่รองรับการแสดงผลทุกหน้าจอ (responsive code) โดยเน้นความรวดเร็ว
  • Builder.io – ดึงคอมโพเนนต์ HTML กลับเข้าสู่ Figma
  • Codia AI – เปลี่ยนภาพสกรีนช็อตให้เป็นไฟล์ Figma ที่มีโครงสร้าง

เดิมพันของทีมและงบประมาณ

เมื่อการออกแบบและการพัฒนาเริ่มแยกออกจากกัน การแก้ไขความไม่สอดคล้องกันจะกลายเป็นเรื่องที่มีค่าใช้จ่ายสูงอย่างรวดเร็ว

ข้อโต้แย้งและข้อจำกัด

(section left intentionally blank)

สิ่งที่ควรจับตามองต่อไป

(section left intentionally blank)

บทสรุป

การอ่านโครงสร้าง Fiber tree ภายในของ React แทนที่จะเป็น DOM ในระดับพื้นผิว ช่วยเปลี่ยนวงจรแบบ “เขียนโค้ดก่อน ค่อยออกแบบทีหลัง” ที่น่าปวดหัว ให้กลายเป็นการทำงานแบบสองทาง ตอนนี้แอปที่สร้างโดย AI สามารถถูกดึงกลับเข้าไปใน Figma ได้โดยไม่สูญเสียโครงสร้างของคอมโพเนนต์ สำหรับทีมที่กำลังต่อสู้กับปัญหา design drift และค่าใช้จ่ายในการดูแลรักษาที่เพิ่มสูงขึ้น การเปลี่ยนแปลงนี้อาจหมายถึงความแตกต่างระหว่างการเร่งรีบแก้ไขดีไซน์ที่วุ่นวาย กับเวิร์กโฟลว์ที่มีระเบียบวินัยและยึดหลัก component-first