07/03/2026
🚀 ทำให้การส่งไฟล์ Figma ไป code แม่นยำมากขึ้น
ด้วยการทำ MCP บน Design system ของตัวเอง
โอโหอ่านเรื่อง Design System MCP
วันนี้เจอบทความของบริษัท Monday อย่างเทพ มาอ่านกันจ้า
ปล.ยาว มาตั้งใจอ่านกันนะ (ยากนิดนึง)
ทุกคนน่าจะประสบปัญหาเดียวกันในตอนนี้คือ
เวลาแปลงไฟล์ Figma ไปโค้ด code ผ่าน AI ไม่ได้อย่างสมบูรณ์แบบ
เพราะ AI มันยังขาด context อะไรหลายๆ อย่าง
โดยเฉพาะสำหรับการทำงานแบบองค์กรที่มี design system เองอยู่แล้ว แล้วเราอยากมากเหลือเกินที่จะให้ AI นั้นเจนออกมาได้ตรงกับ design system ของเรา (เพราะเรามันคนขี้เกียจ)
เพื่อนๆ น่าจะคุ้นชินกับขั้นตอนการทำงานนี้ก็คือ
1) แปะลิงค์ Figma ลง AI Code editor
2) เรียก Figma MCP
3) รอรับโค้ดจาก AI
ซึ่งผลลัพธ์อาจจะดีขึ้นนิดนึงถ้าบริษัทไหนมีการใช้ Code connect ผูกกับ code ของ component ที่ตัวเองมีอยู่แล้ว มันอาจจะ reuse กลับมาใช้ได้ถูกต้องบ้าง
⚠️ แต่ๆๆ สิ่งที่เกิดขึ้นตอนนี้คือเวลาเรา prompt ไป AI มันสร้างให้ได้แหละ บางครั้งก็สวยจริง เหมือนตัวอย่างเป๊ะ แต่ทว่าส่วนใหญ่โค้ดไส้ในอาจจะใช้ไม่ได้จริง
เช่น โค้ดที่เจนออกมาไม่ได้ใช้ Component จาก Design System จริงๆ, ค่าสีถูก Hard-coded, พวก sub component คอมโพเนนต์ซ้อนคอมโพเนนต์มักจะชอบมีปัญหา, Typography ไม่ตรง, มีการเขียน CSS เองมั่วไปหมด แถมไม่ยอม reuse ของที่มีอยู่แล้ว เพราะมันไม่รู้ว่าเรามี!
🛠️ ทำให้เราผู้ที่เป็นคนดูแล design system จะต้องมานั่งคิดว่าจะทำยังไงให้ developer ทำงานได้ไวขึ้น โดยให้ AI ทำความเข้าใจ context ของ design system และแก้ไขปัญหาข้างต้นให้ได้มากที่สุดและจะช่วยประหยัดเวลาของทุกคนที่ทำงานต่อจาก Figma ได้
💡 ทางบริษัทเขาก็เลยคิดจะทำ MCP ที่จะดึงข้อมูล Design system ของตัวเองขึ้นมาจาก Sources of truth หลายๆ ที่ ผ่านการทำงานของ LangGraph ไม่ว่าจะเป็นการไปรวบรวมข้อมูลจากโค้ดคอมโพเนนต์จริง, ไฟล์ TypeScript, ไฟล์ Tokens ไปจนถึงไฟล์การกำหนด accessibility
เขาดึงจาก Sources of truth ที่ใช้งานจริง ทำให้ไม่ต้องคอยอัปเดตระบบขนานกันไป นั่นหมายถึงถ้าทีมออกแบบมีการอัปเดต เช่น เพิ่มคอมโพเนนต์, แก้ไข guideline, เพิ่ม docs อะไร มันก็จะไม่กระทบกับ MCP ตัวนี้นั่นเองค่ะ 😲 ฉลาดมากๆ
🤖 (เข้าโหมดยาก) สิ่งที่ Agent ทำ
เวิร์กโฟลว์นี้ประกอบด้วยโหนดทั้งหมด 11 โหนด ซึ่งแต่ละโหนดมีหน้าที่รับผิดชอบเพียงอย่างเดียว โดยมีลำดับดังนี้:
📍 Figma URL Input: รับลิงก์ Figma จากช่องแชท
📍 figma-data-fetcher: วิ่งไปดึงข้อมูลโครงสร้าง (JSON) ของดีไซน์ดิบจาก Figma ผ่าน Figma MCP
📍 vibe-tokens-fetcher: ค้นหาและดึงค่า Design Tokens (สี, ระยะห่าง) ที่ถูกต้องจากระบบ
📍 translation-detector: สแกนข้อความเพื่อดูว่าส่วนไหนควรดึงออกมาทำเป็น Localization Keys
📍 layout-analyzer: วิเคราะห์เลเยอร์เพื่อตีความว่าควรใช้โครงสร้าง Flexbox หรือ Grid
📍 event-fetcher: ดึงข้อมูล Analytics จากเว็บไซต์ monday MCP เพื่อดูว่าจุดไหนต้องติด Tracking
📍 component-identifier: นำข้อมูลที่ได้มาวิเคราะห์ว่าองค์ประกอบไหนคือ Component ที่มีอยู่แล้วใน Design System
📍 vibe-mapper: จับคู่ชิ้นส่วนที่ระบุได้ เข้ากับ Metadata ของระบบ (เช่น ระบุว่าเป็นปุ่มแบบไหน, Props อะไร)
📍 example-retriever: ดึงตัวอย่างโค้ดที่ถูกต้อง (Best Practices) และไฟล์ Icon ที่เกี่ยวข้องมาเตรียมไว้
📍 implementation-planner: สร้างแผนที่การก่อสร้าง (Blueprints) ว่าต้อง Import อะไร และวางโครงสร้างอย่างไร
📍 output-formatter: สรุปข้อมูลทั้งหมดให้เป็นก้อนความรู้ (Object) ที่ AI เข้าใจง่าย เพื่อให้ AI ตัวสุดท้ายเขียนโค้ดออกมาให้เรา
✨ ส่วนที่น่าสนใจของการทำ MCP ให้กับ design system ตัวเองคือ เราสามารถจัดการไส้ในแบบละเอียดได้ ทั้งเรื่อง text node, localization, การวางระยะห่าง ไปจนถึงเรื่อง accessibility แถมบอกได้ด้วยว่าจะฝัง analytics ไว้ที่ส่วนไหนของงานดีไซน์
📦 สุดท้ายตัวเอเจ้นนี้จะส่งค่าคืนกลับเป็น context โดยไม่ส่งเป็นโค้ด เพราะแต่ละทีมมักมีการตั้งค่า versioning และ tech stack ที่ต่างกัน เลยส่งข้อมูลเป็น context ออกไปแทน ที่เหลือไปให้ AI ช่วยเขียนอีกทีได้เลย เพราะมันตัดสินใจตาม context ที่เราให้อยู่แล้ว
พอมี Monday MCP เข้ามา flow ของ developer ก็ไม่ได้เปลี่ยนไปเลยค่ะ ขั้นตอนการทำงานยังเหมือนเดิมทุกประการ แค่ผลลัพธ์ที่ได้จะแตกต่างกันออกไป เพียงแค่
1) แปะลิงค์ Figma ลง AI Code editor
2) เรียก Monday MCP แทน
3) รอรับโค้ดจาก AI
📝 สรุปๆ บทความนี้ได้อธิบายให้เราฟังว่า AI ไม่ได้มาแทนที่ความเข้าใจของเรา แต่มันจะเข้ามาขยายความเข้าใจของเราก็ต่อเมื่อเมื่อเรากำหนดข้อจำกัดให้อย่างชัดเจน น้องก็จะเรียนรู้จากเรา และหลังจากนี้การเปลี่ยน Design เป็น Code จะไม่ใช่เกมของการเดาสุ่มอีกต่อไปแล้วค่ะ เพราะมันจะแม่นขึ้นเรื่อยๆ ด้วยข้อมูลเราเองนี่แหละ ป๊าดดดดดดด
แปลว่าถ้าเรามีข้อมูล design system ที่ดี และการวางระบบที่ดี ต่อไปอาจ developer อาจจะแค่แนบลิงค์ให้กับ AI แก้อีกนิดส์เดียวก็ใช้ได้เลย
สุดท้ายมันจะกลับมาที่ข้อมูล design system ของเราน่ะ ดีพอหรือยัง
จบจ้า เย้
อ่านต่อทางนี้
https://engineering.monday.com/how-we-use-ai-to-turn-figma-designs-into-production-code/
ภาพจากเว็บไซต์ Monday เลยค่ะ ดีมาก แนะนำไปอ่านเล่น
