GeekyAnts เปิดตัวปลั๊กอินที่ใช้ React-Fiber เป็นพื้นฐาน ซึ่งช่วยให้นักพัฒนาสามารถดึง React components ที่ใช้งานจริงเข้าไปยังไฟล์ Figma ที่แก้ไขได้โดยตรง โดยสัญญาว่าจะสร้างการทำงานแบบไป-กลับ (round-trip) ที่แท้จริงระหว่างโค้ดและงานดีไซน์ เครื่องมือนี้มุ่งแก้ปัญหา "ความคลาดเคลื่อนระหว่างดีไซน์และโค้ด" (design-code drift) ที่เพิ่มมากขึ้น ซึ่งบีบให้ทีมต้องทำงานซ้ำเมื่อมีการเปลี่ยนแปลง UI ข้ามพรมแดนระหว่างดีไซน์เนอร์และนักพัฒนา

ทำไมแนวทางที่เน้น DOM เป็นหลักแบบเดิมถึงไม่เพียงพอ

เครื่องมือการนำเข้าแบบดั้งเดิมจะทำการดึงข้อมูล (scrape) จาก HTML Document Object Model (DOM) ที่ถูกเรนเดอร์ออกมา ซึ่งก็คือรายการแบบแบน (flat list) ของแท็ก <div, <span และแท็กอื่นๆ ในเบราว์เซอร์ DOM จะบอกเครื่องมือว่ามีปุ่มอยู่ แต่ไม่สามารถบอกได้ว่าปุ่มนั้นเป็นอินสแตนซ์ (instance) ของคอมโพเนนต์ที่ใช้ร่วมกันใน design system หากคุณส่งออกปุ่มสิบปุ่ม คุณจะได้เลเยอร์สิบเลเยอร์ที่แยกจากกันใน Figma ซึ่งแต่ละเลเยอร์จะไม่ได้เชื่อมโยงกับคอมโพเนนต์หลัก (master component) จากนั้นดีไซน์เนอร์จะต้องสร้าง variants ใหม่, กำหนด constraints ใหม่ และต้องสร้างสิ่งที่โค้ดมีอยู่แล้วขึ้นมาใหม่ทั้งหมด

การสูญเสียความฉลาดของคอมโพเนนต์ (component intelligence) ดังกล่าวทำให้เกิด "หนี้ทางดีไซน์" (design debt) ทุกครั้งที่มีการปรับแต่งองค์ประกอบ UI ในโค้ด ไฟล์ Figma ที่เกี่ยวข้องจะต้องถูกอัปเดตด้วยตนเอง มิฉะนั้นการแสดงผลทั้งสองแบบจะเริ่มไม่ตรงกัน และความไม่ตรงกันนี้จะทำให้ค่าใช้จ่ายในการบำรุงรักษาสูงขึ้น

React Fiber คือจิ๊กซอว์ชิ้นสำคัญที่ขาดหายไป

React Fiber คือเอนจินการประสานข้อมูลภายใน (internal reconciliation engine) ที่ทำหน้าที่ติดตามชื่อคอมโพเนนต์, ลำดับชั้น (hierarchy) และสถานะ (state) ในระหว่างการเรนเดอร์ สิ่งที่ต่างจาก DOM คือ Fiber จะรักษาความหมายเชิงความหมาย (semantic meaning) ของแต่ละส่วนประกอบ UI ไว้ การอ่านจาก Fiber tree แทนที่จะเป็นผลลัพธ์ HTML ช่วยให้เครื่องมือสามารถจับคู่คอมโพเนนต์ <Button> เข้ากับคอมโพเนนต์ใน Figma ได้โดยตรง ทำให้การเชื่อมโยงกับ design token ดั้งเดิมยังคงอยู่ครบถ้วน

ปลั๊กอินของ GeekyAnts ใช้ข้อมูลเชิงลึกนี้ โดยการอ่าน React Fiber เพื่อนำโค้ดที่ใช้งานจริงเข้าสู่ไฟล์ Figma ที่แก้ไขได้ ผลลัพธ์ที่ได้คือชุดของเลเยอร์ที่ยังคงความสัมพันธ์ของ variants ดั้งเดิมเอาไว้

กระบวนการทำงาน (Pipeline) เป็นอย่างไร

กระบวนการนำเข้าประกอบด้วยสามขั้นตอนที่แตกต่างกัน:

  • Variant Expander – สแกนโค้ดคอมโพเนนต์เพื่อหาการกำหนดสถานะ (state definitions) เช่น hover, disabled, active และสร้างชุด visual variants ที่สมบูรณ์ สิ่งเหล่านี้จะถูกรวมเข้าเป็น Figma Component Sets เพื่อให้ดีไซน์เนอร์สามารถสลับสถานะได้โดยไม่ต้องออกจากไฟล์
  • Layout Mapping – แปลงกฎ CSS Flexbox ให้เป็น constraints ของ Figma Auto Layout ซึ่งจะช่วยรักษาพฤติกรรมแบบ responsive และช่วยให้ดีไซน์เนอร์สามารถปรับระยะห่าง (spacing) ได้โดยตรงในตัวแก้ไข UI
  • State Triggering – รันเส้นทางของโค้ด (code paths) ที่เปิด modal, dropdown หรือองค์ประกอบ UI แบบไดนามิกอื่นๆ เพื่อให้แน่ใจว่าปลั๊กอินจะจับภาพทุกมุมมองที่เป็นไปได้

ขั้นตอนเหล่านี้ทำงานร่วมกันเพื่อสร้างสำเนาของ UI ที่ใช้งานจริงที่สามารถแก้ไขได้ ไม่ใช่แค่ภาพสกรีนช็อตที่หยุดนิ่ง

ระบบนิเวศที่กำลังเติบโต

GeekyAnts ไม่ใช่รายเดียวที่พยายามปิดช่องว่างระหว่างดีไซน์และโค้ด:

  • Anima มุ่งเน้นไปในทิศทางตรงกันข้าม โดยการแปลงดีไซน์จาก Figma ให้เป็นโค้ด React หรือ Vue
  • Locofy.ai เพิ่มการสร้างโค้ดแบบ responsive ด้วยพลังของ AI จากไฟล์ดีไซน์
  • Builder.io นำเสนอการนำเข้า HTML-to-Figma ซึ่งยังคงพึ่งพา DOM และรับเอาข้อจำกัดเหล่านั้นมาด้วย
  • Codia AI แปลงองค์ประกอบเว็บให้เป็นไฟล์ Figma ที่มีโครงสร้าง

สิ่งที่ทำให้แนวทางที่ใช้ Fiber แตกต่างออกไปคือความสามารถในการรับรู้ถึงความหมายของคอมโพเนนต์ (component semantics) ซึ่งเครื่องมือที่เน้น DOM ขาดไป

ใครได้ประโยชน์ ใครเสียประโยชน์

แนวทางอัตโนมัติที่เคารพโครงสร้างคอมโพเนนต์จะช่วยลดหนี้ทางดีไซน์

สิ่งที่ต้องจับตามองต่อไป

คำมั่นสัญญาหลักนั้นชัดเจน: ด้วยการเปลี่ยนจุดเน้นของการนำเข้าจาก DOM มาเป็น React Fiber เครื่องมืออย่างปลั๊กอินของ GeekyAnts ช่วยให้ดีไซน์เนอร์เห็นมุมมองของ UI ที่ใช้งานจริง (production UI) แบบสดๆ และรับรู้ถึงคอมโพเนนต์ (component-aware) การเปลี่ยนแปลงนี้อาจช่วยลบช่องว่างที่ยาวนานระหว่างดีไซน์และโค้ดได้ในที่สุด โดยเปลี่ยนจากการส่งต่องาน (hand-off) ที่เคยมีราคาแพงและเสี่ยงต่อความผิดพลาด ให้กลายเป็นเวิร์กโฟลว์แบบสองทิศทาง (bidirectional workflow) ที่ราบรื่น