Figma MCP + Cursor + Xcode
สวัสดีครับ บทความนี้ขอเล่าเรื่องอย่างง่ายเกี่ยวกับการใช้งาน Figma MCP ครับ เจ้าตัวนี้จะเป็นโปรโตคอลสำหรับ Figma ที่จะสื่อสารกับแอพอื่นๆ หรือภายนอกของ Figma
เราจะนำมาต่อกับ Cursor ซึ่ง Cursor จะสามารถอ่านและเขียนหรือดีไซน์จากไฟล์ figma ได้เลยด้วย json และดาวโหลด Cursor สำหรับเดสท็อปก่อนครับ ที่นี่
เชื่อมต่อ Figma และ Cursor
เมื่อดาวโหลดเสร็จแล้ว ให้เราล้อกอิน Cursor ให้เรียบร้อย และตรง Agent ให้พิมพ์ /add-plugin figma
ทำการ Authen Figma plugin ให้เรียบร้อย เสร็จแล้วลองถาม Cursor ดูว่า “คุณอ่านไฟล์นี้ได้ไหม (ให้เรานำลิงค์ของ Figma มาวาง) https://www.figma.com/design/Y5BB……Nm/Littl….lk”
เราสามารถให้ Cursor ออกแบบดีไซน์ได้เช่น “ช่วยสร้างหน้าชื่อ Login และออกแบบให้หน่อย” เป็นต้น
เชื่อมต่อ Cursor และ Xcode
เราจะใช้ XcodeBuildMCP ในการช่วยให้ Cursor สามารถรันแอพและบิวด์แอพได้ สามารถติดตั้งได้จากลิงค์
คุณจำเป็นต้องติดตั้งก่อน
brew tap getsentry/xcodebuildmcp brew install xcodebuildmcp
และคุณต้องติดตั้ง Node ไว้ที่เครื่องด้วย เพื่อให้ Cursor Agent ใช้คำสั่ง npx ได้ ในการเชื่อมต่อกับ XcodeBuildMCP ดาวโหลดและติดตั้ง Node ได้ที่
เลื่อนลงมาที่หัวข้อ Cursor และคลิกปุ่ม Add to Cursor
ให้คลิก install และรอจนกว่าจะขึ้น Online
สามารถใช้งานได้
ตอนนี้สามารถที่จะ Copy ลิงค์จาก Figma และให้ Cursor ช่วยสร้างโปรเจค Xcode ให้ได้
เท่าที่ได้ลองใช้ เราจำเ)้นต้องสั่งให้ละเอียดหน่อย เช่น ใช้ UIKit, เป็น Storyboard, ใช้ TableView เป็นต้น
ทั้งนี้ XcodeBuildMCP ยังรองรับกับ AI อีกหลายเจ้า
Figma MCP ก็รองรับกับหลาย Tools เช่นกันตามลิงค์ด้านล่าง