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 ที่คุณเพิ่มตอนเก็บกวาด แทนภาพที่แบนลงไป ผลลัพธ์ดีขึ้น วงรอบการแก้น้อยลง และงานรู้สึกเหมือนไม่ต้องสู้กับเครื่องมือ

ใช้ 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 จะทำแบบนี้:

1. ดูภาพด้วย vision
2. เดาโครงสร้างเลย์เอาต์
3. เดาระยะห่าง
4. เดาสี
5. เดาคอมโพเนนต์
6. เขียนโค้ดจากการเดาเหล่านั้น

ทุกจุดที่ "เดา" คือจุดที่ต้นทุน token สะสมและคุณภาพลดลง ไฟล์ดีไซน์จริงมีข้อมูลเหล่านั้นอยู่แล้ว ในฐานะข้อมูล ไม่ใช่พิกเซล MCP เปิดข้อมูลนั้นออกมา

Codia แก้อะไรในเวิร์กโฟลว์นี้

MCP ต้องมีไฟล์ Figma จึงจะมีประโยชน์ ถ้าคุณไม่มี มีแค่สกรีนช็อตของ UI ที่อยากสร้าง MCP ก็ช่วยไม่ได้ คุณก็กลับไปวางภาพอีก

Codia ปิดช่องว่างนั้น Screenshot → Codia → ไฟล์ Figma ที่มีเลเยอร์แก้ไขได้และจัดกลุ่มไว้แทนภาพแบน → เก็บกวาดสั้น ๆ ใน Figma (ตั้งชื่อเลเยอร์หลัก, components, Variables, Auto Layout ในจุดที่สำคัญ) → พร้อมสำหรับ MCP

ไปป์ไลน์สามขั้น

ขั้นที่ 1: แปลงสกรีนช็อตด้วย Codia

นำ reference screenshot ของคุณ — หน้า competitor, ภาพ inspiration, หน้าจอโปรดักชันเดิม — มาแปลงเป็น Figma ด้วย Codia AI:

1. อัปโหลดสกรีนช็อต PNG, JPG หรือ WebP ไปที่ Codia Figma plugin หรือ web app
2. รัน conversion (หน้าจอส่วนใหญ่พร้อมให้แก้ไขภายในไม่กี่นาที)
3. เปิดผลลัพธ์ใน Figma

ผลลัพธ์คือ Figma frame ที่มีเลเยอร์ข้อความแก้ไขได้ (ตรวจจับฟอนต์ ขนาด และสี) shapes รูปภาพและไอคอนแยกเป็นเลเยอร์ภาพของตัวเอง และลำดับชั้นเลเยอร์ที่จัดกลุ่มซ้อนกัน Auto Layout จะมีเฉพาะบางแถวและคอลัมน์ที่ Codia ตรวจพบเลย์เอาต์แบบ flex ส่วนใหญ่ของผลลัพธ์ยังเป็นการวางตำแหน่งแบบ absolute และ Codia ไม่ได้สร้าง components, Variables หรือชื่อเลเยอร์ที่สื่อความหมาย สำคัญที่สุดคือมันมี โครงสร้าง — เลเยอร์จริงแทนพิกเซล — ซึ่งเป็นฐานของขั้นตอนเก็บกวาดถัดไป

อ่านเพิ่มเติมเกี่ยวกับการแปลงได้ที่ Screenshot to Figma: คู่มือฉบับสมบูรณ์

ขั้นที่ 2: ทำความสะอาดไฟล์ Figma สำหรับ MCP

MCP ให้ค่ากับไฟล์ Figma ที่สะอาดอย่างมาก เก็บกวาดสั้น ๆ ดังนี้:

• Apply Variables กับสีของคุณ Raw hex values จะให้ agent แค่ string แต่ Variables ให้ token ซึ่งทำให้ output ของ agent ใช้ design system ของคุณแทนที่จะสร้างใหม่
• เพิ่ม Auto Layout ให้กับ container ที่ควรตอบสนองได้ — Codia ใส่ให้แค่บางแถวและคอลัมน์ จึงต้องตรวจส่วนที่เหลือ MCP จะส่งต่อสิ่งนี้ไปยังความเข้าใจของ agent โดยตรงว่าเลย์เอาต์ควรทำงานอย่างไร
• ตั้งชื่อคอมโพเนนต์ให้สื่อความหมาย PrimaryButton, NavItem, PricingCard — ไม่ใช่ Group 47 agent จะใช้ชื่อนี้ในโค้ดที่สร้าง
• เปลี่ยน repeated elements ให้เป็นคอมโพเนนต์ ไม่ใช่สำเนาแบบ ad-hoc MCP จะเปิดคอมโพเนนต์เป็นแนวคิดระดับ first-class

Codia ช่วยตัดงาน trace ด้วยมือที่กินเวลาหลายชั่วโมง — คุณเริ่มจากเลเยอร์ที่แก้ไขได้และจัดกลุ่มไว้แล้ว ไม่ต้องวาดหน้าจอใหม่ — แต่ไม่ได้ตัดขั้นตอนเก็บกวาดนี้ Codia ใช้ชื่อเลเยอร์ทั่วไปอย่าง group, text และ image ไม่ได้สร้าง components หรือ Variables และใส่ Auto Layout เฉพาะจุดที่ตรวจพบแถวหรือคอลัมน์แบบ flex ขั้นตอนนี้แหละที่ทำให้ไฟล์พร้อมสำหรับ MCP

ขั้นที่ 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	เลเยอร์ที่แก้ไขได้ + การเก็บกวาดของคุณ (components, Variables) + screenshot	กลาง-สูง เดาน้อยลง	ต่ำลง — แก้น้อยลง
แบบเดียวกัน โดยเก็บกวาดให้ตรงกับ design system	เหมือนด้านบนพร้อมข้อมูล design system	สูง	ต่ำที่สุด

ในทางปฏิบัติ: ยิ่ง agent ได้โครงสร้างเป็นข้อมูลแทนพิกเซลมากเท่าไร งานสร้าง UI ก็ยิ่งต้องการรอบ "แก้อันนี้หน่อย" น้อยลงเมื่อเทียบกับ prompt จากภาพอย่างเดียว ค่า token ก็ลดตาม

ทีละขั้นใน Cursor

ตัวอย่างการใช้งานกับ Cursor:

1. ใน Figma เปิดไฟล์ที่ Codia สร้างขึ้นและเก็บกวาดแล้วในขั้นตอนที่ 2 เลือก frame ที่ต้องการสร้าง
2. ใน Cursor ติดตั้ง Figma MCP server (Settings → MCP → Add Server)
3. ในแชตของ Cursor เขียนว่า: "ใช้ Figma MCP server ดึง frame ที่เลือกจากไฟล์ Figma ของฉัน แล้วสร้าง React + Tailwind component ที่ตรงกับดีไซน์แบบแม่นยำ ใช้ Variables เป็น Tailwind theme tokens"
4. agent เรียก MCP tool ดึงข้อมูลที่มีโครงสร้าง + screenshot ของ selection
5. มันสร้าง component รอบแรกจะใกล้ดีไซน์มากกว่าการ prompt จากสกรีนช็อต
6. วนแก้ โดยขอการเปลี่ยนแปลงเฉพาะเจาะจงอ้างอิง 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

ไปป์ไลน์นี้ขยายได้:

1. แปลงสกรีนช็อตตัวแทนเป็นชุดด้วย Codia
2. componentize ผลลัพธ์ภายใน Figma
3. Apply Variables และ design system ของคุณ
4. ใช้ MCP สร้าง component library ที่สอดคล้องกันในโค้ด

สำหรับการแปลงเป็นชุด ใช้ Visual Struct API — batch endpoints ประมวลผลภาพจำนวนมากได้ในครั้งเดียว พร้อม webhook callback เมื่อเสร็จ

เมื่อไม่ควรใช้ไปป์ไลน์นี้

• ปุ่มหรือไอคอนง่ายๆ บางครั้งวางสกรีนช็อตให้ 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 ที่แปลงมารกจะทำอย่างไร

ยังไงก็ควรเผื่อเวลาเก็บกวาดสั้น ๆ: Codia ให้เลเยอร์ที่แก้ไขได้และจัดกลุ่มไว้ แต่การตั้งชื่อ components และ Variables เป็นหน้าที่ของคุณ ตั้งชื่อเลเยอร์หลัก เปลี่ยน repeated elements เป็น components 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 ของดีไซน์ เครื่องมือคนละแบบ ผลลัพธ์คนละแบบ

คู่มือที่เกี่ยวข้อง

• Screenshot to Figma: คู่มือฉบับสมบูรณ์
• Image to Figma: แปลงภาพใดก็ได้ให้เป็นเลเยอร์ Figma ที่แก้ไขได้
• Codia vs image.to.design: เปรียบเทียบแบบละเอียด
• Figma to Code: เวิร์กโฟลว์ฉบับสมบูรณ์
• Visual Struct API: แปลงสกรีนช็อต UI ให้เป็น JSON ที่มีโครงสร้าง