มี GitHub Copilot, Cursor ใช้ มันก็ดี แต่ …คุณเคยเจอปัญหาอะไรประมาณนี้มั้ย?
- คุณต้องสลับหน้าจอไปมา แคปภาพหน้าจอจาก Figma เพื่อให้ Copilot เข้าใจงานดีไซน์ ?
- หรือถ้าจะถามข้อมูลในฐานข้อมูล ก็ต้องคัดลอกผล Query และ Schema มาวางที่ Copilot แล้วถาม?
ทุกข้อมูลคุณต้อง “ป้อนข้อมูล” เข้าไปใน “Prompt” เองทั้งหมด
รู้สึกเหมือนขาด “ช่องทาง”ให้ AI มันไปคุยกับ Source ของข้อมูลโดยตรง
จุดนี้แหละครับที่ “MCP” หรือ “Model Context Protocol” จะเข้ามาช่วยแก้ปัญหาให้เรา
🎯 เป้าหมายของบทความนี้
- เพื่อให้คุณเข้าใจว่า “MCP” คืออะไร
- คุณจะได้ลองใช้ “MCP” เพื่อเชื่อม Model กับ Figma
🧠 แล้ว MCP คืออะไร?
คือ Model Context Protocol (MCP)
แปลตรงตัวได้เลย มันคือ “ช่องทางสำหรับเพิ่ม Context (บริบท) ให้กับ LLM”
ลองนึกถึง MCP ว่าเป็นเหมือน “พอร์ต USB-C สำหรับแอปพลิเคชัน AI” เหมือนที่ USB-C ช่วยให้เราสามารถเชื่อมต่ออุปกรณ์ต่าง ๆ ได้ด้วยมาตรฐานเดียว
MCP ก็ทำหน้าที่คล้ายกัน — เป็นมาตรฐานกลางสำหรับการเชื่อมต่อโมเดล AI กับแหล่งข้อมูลและเครื่องมือต่าง ๆ อย่างเป็นระบบ
โดย MCP นั้นจะแบ่งออกเป็น 2 ฝั่ง
🖥️ ฝั่งบน: MCP — Client
- เป็นฝั่งของ LLM (Large Language Model) เช่น GPT-4 หรือ Claude
- ภายในระบบนี้จะมีสิ่งที่เรียกว่า
MCP Client(เช่นไฟล์client.py) ซึ่งทำหน้าที่เป็นตัวกลางแปลงคำสั่งของโมเดลให้ไปสื่อสารกับโลกภายนอกได้
🔌 ฝั่งล่าง: MCP — Server
- คือฝั่งที่เชื่อมกับระบบภายนอก เช่น Figma, Gmail, Slack หรือฐานข้อมูล
- แต่ละระบบจะมี MCP Server ของตัวเอง ซึ่งทำหน้าที่แปลงคำสั่งจากโมเดลให้เข้าใจและใช้งานกับระบบจริงได้
- เปรียบเหมือนเราเสียบสาย USB เพื่อให้โมเดล “คุย” กับโลกภายนอกได้นั่นเอง
🔁 แล้วทั้งหมดนี้ทำงานยังไง?
ตัวอย่างเช่น:
Prompt →
“ช่วย Extract Color Token จาก Figma Link นี้ <FigmaLink> ให้หน่อย”
- MCP Client → แปลงคำสั่งเป็น
tools/callพร้อมแนบ URL ของ Figma Frame - MCP Server (ของ Figma) → ไปดึงข้อมูลจาก Figma API (สี, style, layout) แล้วจัดให้อยู่ในรูปแบบ JSON
- Client → ส่งข้อมูลกลับเข้า Prompt หรือสร้างเป็นไฟล์
color-token.jsonตามคำสั่ง - Model (เช่น Copilot) → นำข้อมูลไปต่อยอด เช่น สร้าง CSS variable, เขียน Theme หรือ generate code ได้ทันที
คุณไม่ต้องแคปหน้าจอหรือพิมพ์อธิบายอีกต่อไป — เพราะโมเดล “เข้าใจ” Figma ได้โดยตรงผ่าน MCP 🔌
✅ อ่านมาถึงตรงนี้ คุณได้ผ่าน เป้าหมายแรกของบทความนี้แล้ว (“เพื่อให้คุณเข้าใจว่า “MCP” คืออะไร)
คุณจะได้ลองใช้ “MCP” เพื่อเชื่อม Model กับ Figma
ก่อนจะลอง ก็ต้องเตรียมเครื่องมือให้พร้อม
- Node (https://nodejs.org/en)
- IDE : Visual Studio Code (Cursor , Windsurf ก็ใช้ได้ Settings คล้ายๆกัน)
- Figma ที่เก็บ Design System หรือหน้าตา Application ของเรา
- Figma API Key (ไปกดขอได้ที่ https://www.figma.com/developers/api )
หลังจากเตรียมทุกอย่างเรียบร้อยแล้วมาลองกันเลย
วิธีติดตั้ง MCP Server
- ในที่นี้ MCP Server ที่เราจะใช้ มีชื่อว่า “Framelink Figma MCP”
(https://github.com/GLips/Figma-Context-MCP) - ที่ Project ของคุณ ให้คุณสร้างโฟลเดอร์
.vscode(ถ้ายังไม่มี) แล้วสร้างไฟล์ชื่อmcp.jsonภายใน จากนั้นวางโค้ดตามตัวอย่างด้านล่าง
*อย่าลืมแก้ไข Figma API Key ใน Config ด้วยนะ*
{
"mcpServers": {
"Framelink Figma MCP": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
เท่านี้ก็เรียบร้อยครับ สำหรับการตั้งค่า MCP Server for Figma ของเรา ✨
- เปิด Visual Studio Code ขึ้นมา
→ เปิด Copilot Chat → เปลี่ยนเป็น Agent Mode
แล้วคลิกไอคอนไขควง (ตามภาพ)
- คุณควรจะเห็นหัวข้อ MCP Server: Framelink Figma MCP
พร้อมหัวข้อย่อย เช่น:
— `get_figma_data`
— `download_figma_images`
* ตรงนี้อาจจะมีหลายหัวข้อ หัวข้อที่เราต้องการเห็น อาจจะดูด้านล่าง
ลอง Scroll หาดูนะครับ
✅ ถ้าเห็นตามรูปถือว่าถูกต้องครับ สามารถใช้งานได้แล้ว
🧪 Scenario 1: ให้ Extract Color Token จาก Figma แล้วสร้างไฟล์ JSON ให้อัตโนมัติ
ผมเพียงแค่ Copy ลิงก์ของ Frame จาก Figma แล้ววางลงใน Chat ของ Copilot จากนั้นขอให้ Copilot ดึงข้อมูลสี (Color Token) ออกมาให้อยู่ในรูปแบบ JSON
✨ ผลลัพธ์ที่ได้คือ:
- Copilot สามารถเชื่อมไปยัง Figma ผ่าน MCP
- ดึงค่าของสีทั้งหมดจาก Frame ที่ระบุ
- แล้วนำค่ามาสร้างเป็นไฟล์ `colors.json` ให้อัตโนมัติในโปรเจกต์ของเรา
✅ ง่ายกว่าที่คิดใช่ไหมครับ? งั้นต่อไปเราจะลองสั่งให้ Copilot “สร้างหน้า UI ทั้งหน้า” จาก Figma ด้วยเหมือนกัน 😎
คราวนี้เราจะลองสั่งให้ Copilot “สร้างหน้า UI ทั้งหน้า” จาก Figma
โดยใช้ Frame ที่ระบุไว้ใน Design System
ผมเพียงแค่ Copy ลิงก์ของ Frame จาก Figma แล้ววางลงใน Chat ของ Copilot (เหมือนข้อ1) จากนั้นขอให้ Copilot สร้าง Screen นี้ในรูปแบบ HTML
- Copilot ทำการสร้างหน้า Emission Factor และเรียกใช้ Color Token จากไฟล์ JSON ที่ได้จาก Scenario ก่อนหน้า (ไม่ได้สั่งให้ใช้ แต่ Copilot ทำให้เอง)
- Layout ที่สร้างขึ้นตรงกับ Figma เกือบ 100%
(แตกต่างเพียงเล็กน้อยในจุดพวก icons บางจุด ซึ่งถือว่ายอมรับได้)
✅ ถ้ามาถึงตรงนี้ คุณได้ผ่าน เป้าหมายที่สองของบทความนี้แล้ว
(“คุณจะได้ลองใช้ “MCP” เพื่อเชื่อม Model กับ Figma”)
ตอนนี้คุณเข้าใจหลักการของ MCP แล้วและได้ลองใช้งานจริงกับ Figma เรียบร้อยแล้ว
🚀 บทความนี้เป็นเพียงจุดเริ่มต้นของ MCP เท่านั้น หากถ้าคุณมองเห็นศักยภาพของ MCP คุณสามารถต่อยอดไปใช้กับ MCP ประเภทอื่นๆได้ เช่น
- Git — Allows LLM to interact with a local git repository, incl. optional push support.
- Github Actions — A Model Context Protocol (MCP) server for interacting with Github Actions.
- MongoDB — A Model Context Protocol Server for MongoDB.
หากถ้าคุณเชื่อมต่อ “Context + Model” ได้ดีพอ… คุณจะสามารถใช้ AI ต่อกับ Services ต่างๆได้โดยตรง โดยไม่ต้อง Copy Result, Screen มา Prompt อธิบาย Model เองอีกต่อไป 🚀
#Figma,#MCP,#AItools,#Copilot,#PromptEngineering
สำหรับใครที่กำลังมองหาวิธีสร้าง RAG Application หรือ Chatbot หรือจะเป็น AI Solution เพื่อใช้งานในองค์กร ที่ PALO IT เรามีทีมผู้เชี่ยวชาญพร้อมช่วยตั้งแต่เริ่มต้นจนระบบใช้งานได้จริง! ไม่ว่าจะเป็น
Data Cleaning — เตรียมข้อมูลให้สะอาด พร้อมใช้งาน เพื่อผลลัพธ์ที่แม่นยำ
RAG Optimisation — ปรับแต่งระบบให้ตอบไว ตรงประเด็น และพร้อมรองรับการใช้งานระดับองค์กร
Evaluation — ทดสอบและวัดผลลัพธ์ของโมเดล เพื่อให้มั่นใจว่า RAG ของคุณตอบได้ดีจริง
ไม่ว่าคุณจะเพิ่งเริ่มต้น หรือมีระบบอยู่แล้วและอยากต่อยอด เราพร้อมเป็น partner ที่จะช่วยให้คุณไปได้ไกลกว่าเดิม
ทักไปที่เพจ Facebook: PALO IT Thailand ได้เลยครับ 🎉