Screenshot to Figma กับ Cursor และ Figma MCP Server: เวิร์กโฟลว์สำหรับ AI coding agent
ถ้าคุณใช้ AI coding agent อย่าง Cursor, Claude Code, Windsurf หรือ Codex เพื่อสร้าง UI จากดีไซน์ คุณน่าจะเจอกำแพงเดียวกับที่ทุกคนเจอ: วางสกรีนช็อตลงในแชตใช้ได้กับ component ง่ายๆ เท่านั้น แล้วพังทันทีเมื่อเจองานจริง Agent จะตีความจากภาพ การตีความนั้นผิด คุณแก้ต่อ token ก็ไหลไปเรื่อยๆ สุดท้ายคุณเลิกทำแล้วกลับไปสร้างใหม่ด้วยมือ
มีไปป์ไลน์ที่ดีกว่านั้น ใช้ Codia AI แปลงสกรีนช็อตให้เป็นไฟล์ Figma ที่มีโครงสร้างก่อน จากนั้นเชื่อม Figma MCP server กับ agent ของคุณ ตอนนี้ agent จะอ่านข้อมูลเลย์เอาต์ที่มีโครงสร้าง Variables, components และ design tokens แทนภาพที่แบนลงไป ผลลัพธ์ดีขึ้น วงรอบการแก้น้อยลง และงานรู้สึกเหมือนไม่ต้องสู้กับเครื่องมือ
ใช้ Codia Screenshot to Figma เพื่อแปลงสกรีนช็อตและภาพ UI ให้เป็นเลเยอร์ Figma ที่แก้ไขได้ ก่อนนำไปรีดีไซน์ เปรียบเทียบ หรือส่งต่อให้ทีม
Figma MCP Server คืออะไร
Figma MCP server คือสะพานอย่างเป็นทางการระหว่างไฟล์ Figma กับ AI agent ที่รองรับ Model Context Protocol มันเปิดเผยไฟล์ Figma, components, Variables และ design tokens ของคุณเป็นข้อมูลที่มีโครงสร้าง ซึ่ง agent อ่านได้โดยตรง แทนที่จะต้อง reverse-engineer ทุกอย่างจากสกรีนช็อต
เมื่อถึงขั้นตอนการสร้างใหม่ ให้เปิด Codia Screenshot to Figma แล้วแปลงภาพอ้างอิงเป็นเลเยอร์ที่แก้ไขได้ก่อนปรับรายละเอียดดีไซน์
ตัวแก้ไขที่รองรับ MCP ในตอนนี้: VS Code, Cursor, Windsurf, Claude Code, Codex
MCP แก้ปัญหาอะไร
เมื่อคุณวางสกรีนช็อตลงใน Cursor หรือ Claude Code แล้วบอกว่า "build this" agent จะทำแบบนี้:
- ดูภาพด้วย vision
- เดาโครงสร้างเลย์เอาต์
- เดาระยะห่าง
- เดาสี
- เดาคอมโพเนนต์
- เขียนโค้ดจากการเดาเหล่านั้น
ทุกจุดที่ "เดา" คือจุดที่ต้นทุน token สะสมและคุณภาพลดลง ไฟล์ดีไซน์จริงมีข้อมูลเหล่านั้นอยู่แล้ว ในฐานะข้อมูล ไม่ใช่พิกเซล MCP เปิดข้อมูลนั้นออกมา
Codia แก้อะไรในเวิร์กโฟลว์นี้
MCP ต้องมีไฟล์ Figma จึงจะมีประโยชน์ ถ้าคุณไม่มี มีแค่สกรีนช็อตของ UI ที่อยากสร้าง MCP ก็ช่วยไม่ได้ คุณก็กลับไปวางภาพอีก
Codia ปิดช่องว่างนั้น Screenshot → Codia → ไฟล์ Figma ที่มีโครงสร้าง (พร้อม Variables, Auto Layout, components ที่มีชื่อ) → พร้อมสำหรับ MCP
ไปป์ไลน์สามขั้น
ขั้นที่ 1: แปลงสกรีนช็อตด้วย Codia
นำ reference screenshot ของคุณ — หน้า competitor, ภาพ inspiration, หน้าจอโปรดักชันเดิม — มาแปลงเป็น Figma ด้วย Codia AI:
- อัปโหลดไปที่ Codia Figma plugin หรือ web app
- รัน conversion (~10 วินาทีสำหรับ full screen ที่สะอาด)
- เปิดผลลัพธ์ใน Figma
ผลลัพธ์จะเป็น Frames จริง ข้อความจริง Auto Layout จริงในจุดที่สอดคล้อง และ components สำหรับองค์ประกอบที่ซ้ำกัน สำคัญที่สุดคือมันมี โครงสร้าง ซึ่งเป็นสิ่งที่ MCP ใช้
อ่านเพิ่มเติมเกี่ยวกับการแปลงได้ที่ Screenshot to Figma: คู่มือฉบับสมบูรณ์
ขั้นที่ 2: ทำความสะอาดไฟล์ Figma สำหรับ MCP
MCP ให้ค่ากับไฟล์ Figma ที่สะอาดอย่างมาก ใช้เวลา 5 นาที:
- Apply Variables กับสีของคุณ Raw hex values จะให้ agent แค่ string แต่ Variables ให้ token ซึ่งทำให้ output ของ agent ใช้ design system ของคุณแทนที่จะสร้างใหม่
- ตรวจ Auto Layout ให้กับทุก container ที่ควรตอบสนองได้ MCP จะส่งต่อสิ่งนี้ไปยังความเข้าใจของ agent โดยตรงว่าเลย์เอาต์ควรทำงานอย่างไร
- ตั้งชื่อคอมโพเนนต์ให้สื่อความหมาย
PrimaryButton,NavItem,PricingCard— ไม่ใช่Group 47agent จะใช้ชื่อนี้ในโค้ดที่สร้าง - จัด repeated elements เป็นคอมโพเนนต์ ไม่ใช่ instance แบบ ad-hoc MCP จะเปิดคอมโพเนนต์เป็นแนวคิดระดับ first-class
ถ้าคุณเริ่มจากไฟล์ที่ Codia แปลงมา ส่วนใหญ่นี้จะมีอยู่แล้ว — conversion จะสร้าง Auto Layout ตั้งชื่อองค์ประกอบ และจัดกลุ่ม pattern ที่ซ้ำกันให้คุณ
ขั้นที่ 3: เชื่อม MCP กับ editor และสร้างโค้ด
ติดตั้งและตั้งค่า Figma MCP server ใน editor ที่คุณใช้ เอกสารตั้งค่าทางการ: Figma MCP server guide
จากนั้นใน prompt ให้ชี้ไปที่ไฟล์หรือ selection ของ Figma:
"ใช้ Figma file [link หรือ selection ID] เพื่อสร้าง React component ที่ตรงกับดีไซน์นี้อย่างแม่นยำ ใช้ Variables ของ design system และจับคู่ spacing tokens ให้ตรง"
ตอนนี้ agent มี:
- ลำดับชั้นเลเยอร์จริง
- ค่า spacing จริงจาก Auto Layout
- color token จริงจาก Variables
- คำจำกัดความของคอมโพเนนต์จริง
- screenshot ของ selection (ถ้ามี) สำหรับยืนยันภาพ
ผลลัพธ์จะสอดคล้องกับดีไซน์มากกว่าการ prompt แบบ "วางสกรีนช็อตลงในแชต" อย่างชัดเจน
ทำไมไปป์ไลน์นี้ดีกว่า "วางสกรีนช็อตลงในแชต"
| วิธี | agent ได้อะไร | คุณภาพผลลัพธ์ | ต้นทุน token |
|---|---|---|---|
| วางสกรีนช็อตในแชต | พิกเซล + prompt ของคุณ | ต่ำ-กลาง ต้องเดาเยอะ | สูง — ต้องแก้ซ้ำหลายรอบ |
| Codia → MCP → agent | เลย์เอาต์ที่มีโครงสร้าง + Variables + components + screenshot | กลาง-สูง เดาน้อยลง | ต่ำ — แก้น้อยลง |
| Codia → MCP → agent + ไฟล์ Figma ที่สะอาด | เหมือนด้านบนพร้อมข้อมูล design system | สูง | ต่ำที่สุด |
ผลกระทบจริง: ทีมที่ใช้ไปป์ไลน์เต็มรูปแบบรายงานว่าจำนวนรอบ "แก้อันนี้หน่อย" ลดลงราว 50–70% เมื่อเทียบกับ prompt จากภาพอย่างเดียว ค่า token ก็ลดตาม
ทีละขั้นใน Cursor
ตัวอย่างการใช้งานกับ Cursor:
- ใน Figma เปิดไฟล์ที่ Codia สร้างขึ้น เลือก frame ที่ต้องการสร้าง
- ใน Cursor ติดตั้ง Figma MCP server (Settings → MCP → Add Server)
- ในแชตของ Cursor เขียนว่า: "ใช้ Figma MCP server ดึง frame ที่เลือกจากไฟล์ Figma ของฉัน แล้วสร้าง React + Tailwind component ที่ตรงกับดีไซน์แบบแม่นยำ ใช้ Variables เป็น Tailwind theme tokens"
- agent เรียก MCP tool ดึงข้อมูลที่มีโครงสร้าง + screenshot ของ selection
- มันสร้าง component รอบแรกจะใกล้ดีไซน์มากกว่าการ prompt จากสกรีนช็อต
- วนแก้ โดยขอการเปลี่ยนแปลงเฉพาะเจาะจงอ้างอิง source Figma เดิม
การจับคู่กับ Claude Code
หลักการเดียวกัน ต่างกันแค่เครื่องมือ Claude Code รองรับ MCP แบบ native ติดตั้ง Figma MCP server ด้วยวิธีเดียวกัน รูปแบบ prompt ก็เหมือนกัน
ถ้าคุณใช้ Claude Code กับงาน backend อยู่แล้ว การเพิ่ม Figma MCP server จะช่วยให้ agent ตัวเดียวกันสร้าง UI จากไฟล์ Figma ที่แปลงมาด้วย Codia ได้
การจับคู่กับ Windsurf
เหมือนกันอีก Windsurf รองรับ MCP อยู่แล้ว ดังนั้น Figma MCP server จะเสียบเข้าไปได้เหมือนกับ Cursor หรือ Claude Code
ข้อผิดพลาดที่พบบ่อย
ข้ามขั้น Variables ถ้าไฟล์ Figma ของคุณใช้ raw hex value ทุกที่ MCP จะส่ง string ดิบให้ agent ใช้ Variables ของ design system ของคุณ — นี่คือความต่างระหว่าง "สีแบรนด์ที่ถูก" กับ "สีที่ใกล้แบรนด์พอใช้"
ลืม Auto Layout ถ้าไม่มี Auto Layout MCP จะอธิบายตำแหน่งได้ แต่ไม่อธิบาย intent ด้าน responsive Auto Layout แปลงสิ่งนั้นเป็น "นี่คือ flex row ที่มี gap 16px" ซึ่ง agent ใช้ต่อได้จริง
ขอทุกอย่างใน prompt เดียว "สร้าง dashboard ทั้งหมด" ใหญ่เกินไป "สร้าง sidebar component ที่ตรงกับ Figma selection" ดีกว่ามาก สร้างทีละ component แล้วค่อยประกอบ
เลือกใน Figma ไม่แม่น MCP ดึงสิ่งที่คุณเลือก selection กว้าง = context กว้าง เลือก frame ให้ตรงเป๊ะ
เอา prompt จากสกรีนช็อตมาปนกับ MCP ถ้าคุณตั้ง MCP ไว้แล้วก็ใช้มันไป อย่า paste สกรีนช็อต พร้อม reference จาก MCP เพราะ agent จะเห็นแหล่งความจริงสองชุดและเลือกอันที่สะดวกกว่า
ก้าวต่อจากหน้าจอเดี่ยว: สร้าง component library
ไปป์ไลน์นี้ขยายได้:
- แปลงสกรีนช็อตตัวแทนเป็นชุดด้วย Codia
- componentize ผลลัพธ์ภายใน Figma
- Apply Variables และ design system ของคุณ
- ใช้ MCP สร้าง component library ที่สอดคล้องกันในโค้ด
สำหรับการแปลงเป็นชุด ใช้ Visual Struct API — รองรับสูงสุด 1,000 ภาพต่อแบตช์
เมื่อไม่ควรใช้ไปป์ไลน์นี้
- ปุ่มหรือไอคอนง่ายๆ บางครั้งวางสกรีนช็อตให้ agent ดูตรงๆ ก็เร็วกว่าจริง
- ดีไซน์ที่มีอยู่ใน Figma อยู่แล้ว ข้าม Codia แล้วไป MCP ตรงๆ
- การสร้างโค้ดที่ไม่ต้องการความแม่นของดีไซน์ ถ้า "พอเหมือน" ก็พอ เส้นทางจากสกรีนช็อตอาจพอแล้ว
คำถามที่พบบ่อย
ต้องจ่ายเงินสำหรับ Figma MCP server ไหม
Figma MCP server อย่างเป็นทางการเป็นส่วนหนึ่งของแพลตฟอร์ม Figma โปรดตรวจแพ็กเกจของ Figma สำหรับความพร้อมใช้งานของ MCP
agent เห็นไฟล์ Figma จริงหรือเห็นแค่ API
MCP server ให้ agent เข้าถึงข้อมูลที่มีโครงสร้างจากไฟล์ Figma ของคุณ — เลเยอร์ ชื่อ ตำแหน่ง Variables components — และสามารถส่ง screenshot ของ selection เพื่อยืนยันภาพได้
ใช้กับไฟล์ Figma ของตัวเองได้ไหม ไม่ใช่ของ Codia
ได้ MCP ใช้ได้กับไฟล์ Figma ที่มีโครงสร้างดีทุกไฟล์ Codia คือสะพานสำหรับกรณีที่คุณมีแค่สกรีนช็อต ไม่ได้มี source Figma อยู่แล้ว
ถ้าไฟล์ Figma ที่แปลงมารกจะทำอย่างไร
ใช้เวลา 5 นาทีเก็บให้เรียบร้อย: ตั้งชื่อคอมโพเนนต์ Apply Variables ตรวจ Auto Layout คุณภาพผลลัพธ์ของ agent จะขึ้นกับคุณภาพไฟล์
ใช้กับ Cursor Auto / Claude / GPT models ได้ไหม
ได้ MCP ไม่ผูกกับโมเดล server จะส่งข้อมูลที่มีโครงสร้างให้โมเดลใดก็ตามที่ editor ใช้อยู่
เทียบกับ Figma Make แล้วต่างกันอย่างไร
Figma Make สร้าง UI จาก prompt ภายใน Figma ส่วน Codia + MCP pipeline สร้าง โค้ด ภายนอก Figma โดยใช้ไฟล์ Figma ของคุณเป็น source of truth ของดีไซน์ เครื่องมือคนละแบบ ผลลัพธ์คนละแบบ