Figma-MCP คืออะไร?
Figma-MCP คือเซิร์ฟเวอร์ที่ใช้ Model Context Protocol ทำให้สามารถจัดเตรียมบริบทที่เป็นมาตรฐานสำหรับ LLMs เพื่อโต้ตอบกับทรัพยากร Figma การผสานรวมนี้ช่วยให้นักออกแบบและนักพัฒนาสามารถใช้ประโยชน์จาก AI ในการทำงานออกแบบอัตโนมัติ ปรับปรุงการทำงานร่วมกัน และปรับปรุงเวิร์กโฟลว์
Figma-MCP ทำงานอย่างไร?
MCP Protocol: Model Context Protocol เป็นวิธีที่เป็นมาตรฐานสำหรับ LLMs ในการทำความเข้าใจและโต้ตอบกับแอปพลิเคชันภายนอก เช่น Figma โดยมีกรอบการทำงานที่มีโครงสร้างสำหรับการแลกเปลี่ยนบริบทระหว่างระบบเหล่านี้
Figma Integration: เซิร์ฟเวอร์ Figma MCP เชื่อมต่อกับ API ของ Figma ทำให้ LLMs สามารถเข้าถึงและจัดการองค์ประกอบการออกแบบ เช่น ไฟล์ ส่วนประกอบ และสไตล์ การผสานรวมนี้รองรับการดำเนินการอ่าน ทำให้เครื่องมือ AI สามารถดึงข้อมูลการออกแบบและสร้างข้อมูลเชิงลึกได้
AI-Powered Design Automation: ด้วย Figma-MCP คุณสามารถทำงานอัตโนมัติ เช่น การสร้างรูปแบบการออกแบบ การอัปเดตสไตล์ และแม้แต่การสร้างส่วนประกอบใหม่ตามการออกแบบที่มีอยู่ การทำงานอัตโนมัตินี้ช่วยประหยัดเวลาและเพิ่มประสิทธิภาพในการทำงานในเวิร์กโฟลว์การออกแบบ
วิธีใช้และเริ่มต้นใช้งาน Figma-MCP
การใช้ Figma-MCP เกี่ยวข้องกับการตั้งค่าเซิร์ฟเวอร์และการผสานรวมกับเครื่องมือ AI เช่น Cursor นี่คือคำแนะนำโดยละเอียดเพื่อช่วยให้คุณเริ่มต้น:
ขั้นตอนที่ 1: ข้อกำหนดเบื้องต้น
- Node.js (v16.0 หรือสูงกว่า)
- npm (v7.0 หรือสูงกว่า) หรือ pnpm (v8.0 หรือสูงกว่า)
- บัญชี Figma: แนะนำให้ใช้แผน Professional หรือ Enterprise
- Figma API access token: คุณต้องมี Figma API access token พร้อมสิทธิ์การอ่าน
ขั้นตอนที่ 2: วิธีรับ Figma API Access Token ของคุณ
ในการผสานรวม MCP กับ Figma คุณจะต้องมี API access token โทเค็นนี้ทำหน้าที่เป็นคีย์ที่ปลอดภัยซึ่งช่วยให้ MCP โต้ตอบกับบัญชี Figma ของคุณได้ นี่คือคำแนะนำทีละขั้นตอนในการสร้างและจัดเก็บ Figma API access token ของคุณ:
ลงทะเบียนสำหรับบัญชี Figma:
- เยี่ยมชมเว็บไซต์อย่างเป็นทางการของ Figma: ไปที่ เว็บไซต์ของ Figma
- ลงทะเบียน: สร้างบัญชีใหม่หากคุณยังไม่มี
ขั้นตอนที่ 2: ดาวน์โหลดแอป Figma:
- เลือก OS ของคุณ: ดาวน์โหลดแอปเดสก์ท็อป Figma ที่เข้ากันได้กับระบบปฏิบัติการของคุณ (Windows, macOS หรือ Linux)
- ติดตั้งแอป: ทำตามคำแนะนำการติดตั้งง่ายๆ เพื่อตั้งค่า Figma บนอุปกรณ์ของคุณ
เข้าสู่ระบบ Figma:
- เปิดแอป: เปิดแอปเดสก์ท็อป Figma
- เข้าสู่ระบบ: ใช้ข้อมูลประจำตัว Figma ของคุณเพื่อเข้าสู่ระบบ
เข้าถึงการตั้งค่าโปรไฟล์ของคุณ:
1. คลิกไอคอนโปรไฟล์ของคุณ: ในแถบด้านข้าง คลิกที่ไอคอนโปรไฟล์ของคุณ (โดยปกติคือชื่อหรืออวาตาร์ของคุณ)
2. เปิดเมนูแบบเลื่อนลง: เมนูจะปรากฏขึ้น—คลิก Settings
นำทางไปยังการตั้งค่าความปลอดภัย:
1. ไปที่ Security: ในเมนูการตั้งค่า ค้นหาและคลิกที่แท็บ Security
2. ค้นหา Personal Access Tokens: เลื่อนลงไปที่ส่วน Personal Access Tokens
สร้างโทเค็นใหม่:
- คลิก “Generate New Token”: ซึ่งจะเปิดพร้อมท์เพื่อสร้างโทเค็นใหม่
- ตั้งชื่อโทเค็นของคุณ: ตั้งชื่อโทเค็นของคุณ เช่น
Figma_MCPเพื่อระบุวัตถุประสงค์ได้อย่างง่ายดาย - สร้างโทเค็น: คลิก Create เพื่อสร้าง API access token ใหม่ของคุณ
จัดเก็บโทเค็นของคุณอย่างปลอดภัย:
- คัดลอกโทเค็น: เมื่อสร้างแล้ว ให้คัดลอกโทเค็นทันที หมายเหตุ: Figma จะแสดงโทเค็นนี้เพียงครั้งเดียว ดังนั้นโปรดบันทึก
- จัดเก็บอย่างปลอดภัย: วางโทเค็นลงในตำแหน่งที่ปลอดภัย เช่น ตัวจัดการรหัสผ่านหรือไฟล์ที่เข้ารหัส
เคล็ดลับ Pro สำหรับการใช้ Figma API Token ของคุณ:
ตัวแปรสภาพแวดล้อม: จัดเก็บโทเค็นของคุณในตัวแปรสภาพแวดล้อมเพื่อการเข้าถึงที่ปลอดภัยในสคริปต์:
export FIGMA_API_TOKEN="your_token_here"- หลีกเลี่ยงการฮาร์ดโค้ด: อย่าฮาร์ดโค้ดโทเค็นของคุณลงในโค้ดเบสของคุณโดยตรง
- เพิกถอนหากถูกบุกรุก: หากคุณสงสัยว่าโทเค็นของคุณถูกบุกรุก ให้เพิกถอนทันทีในการตั้งค่า Security และสร้างโทเค็นใหม่
ขั้นตอนที่ 3: ติดตั้ง Figma-MCP Server
การติดตั้งอย่างรวดเร็วด้วย NPM: เรียกใช้เซิร์ฟเวอร์อย่างรวดเร็วโดยใช้ NPM โดยไม่ต้องติดตั้งที่เก็บ:
npx figma-developer-mcp --figma-api-key=<your-figma-api-key>อีกวิธีหนึ่ง คุณสามารถใช้ pnpx, yarn dlx หรือ bunx เพื่อให้ได้ผลลัพธ์ที่คล้ายกัน
ติดตั้งจากแหล่งที่มาในเครื่อง: โคลนที่เก็บ:
git clone https://github.com/GLips/Figma-Context-MCP.git
cd Figma-Context-MCPติดตั้ง dependencies โดยใช้ pnpm install
คัดลอก .env.example ไปยัง .env และกรอก Figma API access token ของคุณ
เรียกใช้เซิร์ฟเวอร์ด้วย pnpm run dev
ขั้นตอนที่ 3: กำหนดค่าเซิร์ฟเวอร์
ตัวแปรสภาพแวดล้อม: กำหนดค่าเซิร์ฟเวอร์โดยใช้ตัวแปรสภาพแวดล้อมในไฟล์ .env ตั้งค่า FIGMA_API_KEY เป็น access token ของคุณ และตั้งค่า PORT หากคุณต้องการใช้พอร์ตอื่นที่ไม่ใช่พอร์ตเริ่มต้น 3333
อาร์กิวเมนต์บรรทัดคำสั่ง: อีกวิธีหนึ่ง ใช้อาร์กิวเมนต์บรรทัดคำสั่ง เช่น --figma-api-key และ --port ซึ่งมีลำดับความสำคัญเหนือกว่าตัวแปรสภาพแวดล้อม
ขั้นตอนที่ 4: การผสานรวม Figma-MCP Server ของคุณกับเครื่องมือ AI
ตอนนี้ Figma-MCP server ของคุณทำงานอยู่แล้ว ก็ถึงเวลาเชื่อมต่อกับเครื่องมือ AI เช่น Windsurf, Cline และ Claude ในขณะที่ Figma + MCP รองรับเวิร์กโฟลว์ที่ขับเคลื่อนด้วย AI หลายรายการ สำหรับบทช่วยสอนนี้ เราจะใช้ Cursor IDE และ Cursor Composer การผสานรวมนี้จะช่วยให้คุณทำงานออกแบบเป็นโค้ดอัตโนมัติ สร้างส่วนประกอบ UI และอื่นๆ นี่คือวิธีการ:
1. ตรวจสอบให้แน่ใจว่า Figma-MCP Server กำลังทำงาน: ตรวจสอบให้แน่ใจว่า Figma-MCP server ของคุณทำงานอยู่และทำงานบนพอร์ตที่ถูกต้อง (เช่น พอร์ต 3333) หากไม่เป็นเช่นนั้น วิธีที่แนะนำคือเพียงแค่เรียกใช้คำสั่งต่อไปนี้ดังที่กล่าวมาข้างต้น:
npx figma-developer-mcp --figma-api-key=<your-figma-api-key>2. เพิ่ม MCP Server: เปิด Cursor และไปที่เมนู Settings ไปที่ส่วน MCP ในการตั้งค่าแล้วคลิก Add New MCP Server ตั้งชื่อตามที่คุณต้องการ จากนั้นเลือกตัวเลือก SSE (Server-Sent Events) และวาง URL ของ Figma-MCP server ของคุณ (เช่น http://localhost:3333)
เครื่องมืออื่นๆ เช่น Windsurf, Cline และ Claude Desktop ใช้ไฟล์การกำหนดค่าเพื่อเริ่มเซิร์ฟเวอร์ ดังนั้น คุณยังสามารถกำหนดค่า figma-developer-server ได้โดยการเพิ่มสิ่งต่อไปนี้ลงในไฟล์การกำหนดค่าของคุณ:
{
"mcpServers": {
"figma-developer-mcp": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--stdio"],
"env": {
"FIGMA_API_KEY": "<your-figma-api-key>"
}
}
}
}3. ตรวจสอบการเชื่อมต่อ: จุดสีเขียวจะปรากฏขึ้นถัดจากชื่อเซิร์ฟเวอร์ ซึ่งบ่งชี้ถึงการเชื่อมต่อที่สำเร็จ จุดสีแดงหมายความว่าการเชื่อมต่อไม่สำเร็จ และคุณต้องดูที่การกำหนดค่าหรือตรวจสอบว่าเซิร์ฟเวอร์ทำงานอยู่หรือไม่
4. เลือกการออกแบบใน Figma: เปิด Figma และไปที่โปรเจกต์ Figma ของคุณและเลือกการออกแบบที่คุณต้องการทำงานด้วย หากจำเป็น ให้จัดกลุ่มส่วนประกอบหรือส่วนต่างๆ ของ wireframe ของคุณเพื่อสร้างการออกแบบที่สอดคล้องกัน
5. คัดลอกลิงก์: ในการคัดลอกลิงก์ของการออกแบบที่คุณต้องการทำงานด้วย: คลิกขวาที่การออกแบบที่เลือก > เลือก Copy/Paste As > จากนั้นเลือกตัวเลือก Copy Link to Selection ลิงก์นี้จะใช้เพื่ออ้างอิงการออกแบบใน Cursor
6. ใช้กับ Cursor Composer: ในการทำงานกับการออกแบบเฉพาะด้วย Cursor ให้เปิด Composer และเปิดใช้งาน Agent Mode
จากนั้นวาง Figma link ที่คัดลอกลงใน Cursor Composer ตอนนี้คุณสามารถขอให้ Cursor ทำงานต่างๆ เช่น:
- สร้างโค้ด: “นำการออกแบบ Figma นี้ไปใช้ใน React”
- สร้างส่วนประกอบ: “แปลงการออกแบบนี้เป็นส่วนประกอบ UI ที่นำกลับมาใช้ใหม่ได้”
- ปรับปรุงเลย์เอาต์: “แนะนำการปรับปรุงสำหรับเลย์เอาต์นี้”
เคล็ดลับเพิ่มเติมในการใช้ Figma-MCP
MCP Inspector: หากคุณต้องการตรวจสอบการตอบสนองจากเซิร์ฟเวอร์ MCP เพียงแค่เรียกใช้ pnpm inspect ในเทอร์มินัลใหม่ คำสั่งนี้จะเปิด MCP Inspector Web UI ทำให้คุณสามารถดูเครื่องมือที่มีอยู่ เรียกใช้การเรียกเครื่องมือ และตรวจสอบการตอบสนอง
get_file: ดึงข้อมูลเกี่ยวกับไฟล์ Figma พารามิเตอร์ ได้แก่ fileKey และ depth (ไม่จำเป็น)
get_node: ดึงข้อมูลเกี่ยวกับโหนดเฉพาะภายในไฟล์ Figma พารามิเตอร์ ได้แก่ fileKey และ nodeId
ด้วยการทำตามขั้นตอนเหล่านี้ คุณสามารถผสานรวม Figma MCP กับเครื่องมือ AI ได้อย่างมีประสิทธิภาพ ปรับปรุงเวิร์กโฟลว์การออกแบบของคุณด้วยงานอัตโนมัติและการนำการออกแบบไปใช้อย่างถูกต้อง
คุณสมบัติของ Figma MCP
MCP Compliance: เซิร์ฟเวอร์เป็นไปตาม Model Context Protocol ทำให้มั่นใจได้ถึงความเข้ากันได้กับแอปพลิเคชัน LLM ต่างๆ
Type-Safe Implementation: สร้างโดยใช้ TypeScript ซึ่งมีโค้ดเบสที่แข็งแกร่งและดูแลรักษาได้
Custom URI Scheme: รองรับ custom URI scheme สำหรับการเข้าถึงทรัพยากร Figma ทำให้ง่ายต่อการจัดการสินทรัพย์การออกแบบ
Error Handling and Validation: รวมถึงการจัดการข้อผิดพลาดและการตรวจสอบความถูกต้องของคำขอที่แข็งแกร่งเพื่อให้มั่นใจถึงการทำงานที่เชื่อถือได้
Batch Operations: รองรับการดำเนินการแบบกลุ่มสำหรับการจัดการองค์ประกอบการออกแบบอย่างมีประสิทธิภาพ
บทสรุป
Figma MCP เป็นเครื่องมืออันทรงพลังที่เชื่อมช่องว่างระหว่างการออกแบบและ AI โดยนำเสนอเวิร์กโฟลว์ที่คล่องตัวสำหรับนักออกแบบและนักพัฒนา ด้วยการผสานรวม Figma กับแบบจำลองภาษาขนาดใหญ่ คุณสามารถปลดล็อกระดับใหม่ของประสิทธิภาพและความคิดสร้างสรรค์ในกระบวนการออกแบบของคุณ ไม่ว่าคุณกำลังมองหาที่จะทำงานอัตโนมัติ ปรับปรุงการทำงานร่วมกัน หรือเพียงแค่สำรวจศักยภาพของ AI ในการออกแบบ Figma MCP มอบรากฐานที่คุณต้องการเพื่อให้ประสบความสำเร็จ
เรียนรู้วิธีเชื่อมต่อ Figma MCP server ของคุณกับเครื่องมือ AI เช่น Cursor สำหรับเวิร์กโฟลว์การออกแบบเป็นโค้ดที่ราบรื่น คู่มือทีละขั้นตอน
ปลดปล่อยความคิดสร้างสรรค์และการออกแบบในระดับพระเจ้าด้วย Figma MCP server และวิธีผสานรวมกับเครื่องมือ AI เช่น Cursor สำหรับเวิร์กโฟลว์การออกแบบเป็นโค้ดที่ราบรื่น
