MCP คืออะไร? ลองใช้จริงกับ Figma ใน 10 นาที

คุณจะได้ลองใช้ “MCP” เพื่อเชื่อม Model กับ Figma

 

ก่อนจะลอง ก็ต้องเตรียมเครื่องมือให้พร้อม

1. Node (https://nodejs.org/en)
2. IDE : Visual Studio Code (Cursor , Windsurf ก็ใช้ได้ Settings คล้ายๆกัน)
3. Figma ที่เก็บ Design System หรือหน้าตา Application ของเรา
4. Figma API Key (ไปกดขอได้ที่ https://www.figma.com/developers/api )

จากลิงค์ข้อที่ 4 กดเข้าไปแล้วกดตามรูปได้เลยครับ จะได้ API KEY มาใช้ทันที

หลังจากเตรียมทุกอย่างเรียบร้อยแล้วมาลองกันเลย

 

วิธีติดตั้ง 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 หาดูนะครับ

✅ ถ้าเห็นตามรูปถือว่าถูกต้องครับ สามารถใช้งานได้แล้ว

ตัวอย่างหน้า Screen ต่างๆบน Figma

 

🧪 Scenario 1: ให้ Extract Color Token จาก Figma แล้วสร้างไฟล์ JSON ให้อัตโนมัติ

ผมเพียงแค่ Copy ลิงก์ของ Frame จาก Figma แล้ววางลงใน Chat ของ Copilot จากนั้นขอให้ Copilot ดึงข้อมูลสี (Color Token) ออกมาให้อยู่ในรูปแบบ JSON

✨ ผลลัพธ์ที่ได้คือ:
- Copilot สามารถเชื่อมไปยัง Figma ผ่าน MCP
- ดึงค่าของสีทั้งหมดจาก Frame ที่ระบุ
- แล้วนำค่ามาสร้างเป็นไฟล์ `colors.json` ให้อัตโนมัติในโปรเจกต์ของเรา

คุณจะเห็นฝั่งซ้ายเป็น JSON ที่ถูกสร้างขึ้น และฝั่งขวาคือ Chat ที่ใช้สั่งให้ Copilot ทำงาน

✅ ง่ายกว่าที่คิดใช่ไหมครับ? งั้นต่อไปเราจะลองสั่งให้ Copilot “สร้างหน้า UI ทั้งหน้า” จาก Figma ด้วยเหมือนกัน 😎

คราวนี้เราจะลองสั่งให้ Copilot “สร้างหน้า UI ทั้งหน้า” จาก Figma
โดยใช้ Frame ที่ระบุไว้ใน Design System

ผมเพียงแค่ Copy ลิงก์ของ Frame จาก Figma แล้ววางลงใน Chat ของ Copilot (เหมือนข้อ1) จากนั้นขอให้ Copilot สร้าง Screen นี้ในรูปแบบ HTML

ตัวอย่าง Screen Emission Factor ที่ใช้เป็นต้นแบบบน Figma

• Copilot ทำการสร้างหน้า Emission Factor และเรียกใช้ Color Token จากไฟล์ JSON ที่ได้จาก Scenario ก่อนหน้า (ไม่ได้สั่งให้ใช้ แต่ Copilot ทำให้เอง)

Code HTML ที่ Copilot Generate จาก Figma

• Layout ที่สร้างขึ้นตรงกับ Figma เกือบ 100%
  (แตกต่างเพียงเล็กน้อยในจุดพวก icons บางจุด ซึ่งถือว่ายอมรับได้)

Preview หน้าจอที่ได้จากโค้ดที่สร้างขึ้น

✅ ถ้ามาถึงตรงนี้ คุณได้ผ่าน เป้าหมายที่สองของบทความนี้แล้ว
(“คุณจะได้ลองใช้ “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 ได้เลยครับ 🎉