Figma

คู่มือ Figma MCP Server

Figma MCP server นำ Figma เข้าสู่ขั้นตอนการทำงานของคุณโดยตรง โดยให้ข้อมูลและบริบทการออกแบบที่สำคัญแก่ AI agents ที่สร้างโค้ดจากไฟล์ออกแบบ Figma

[!NOTE] การจำกัดอัตราการเรียกใช้ (Rate limits) มีผลกับเครื่องมือของ Figma MCP server ที่อ่านข้อมูลจาก Figma เครื่องมือบางอย่าง เช่น เครื่องมือที่เขียนลงในไฟล์ Figma ได้รับการยกเว้นจากการจำกัดอัตราการเรียกใช้

ผู้ใช้ในแผน Starter หรือผู้ที่มีสิทธิ์ View หรือ Collab ในแผนแบบชำระเงินจะถูกจำกัดให้เรียกใช้เครื่องมือได้สูงสุด 6 ครั้งต่อเดือน

ผู้ใช้ที่มี Dev หรือ Full seat ใน แผน Professional, Organization หรือ Enterprise จะมีการจำกัดอัตราการเรียกใช้ต่อนาที ซึ่งเป็นไปตามข้อจำกัดเดียวกันกับ Tier 1 Figma REST API เช่นเดียวกับ REST API ของ Figma Figma ขอสงวนสิทธิ์ในการเปลี่ยนแปลงการจำกัดอัตราการเรียกใช้

สำหรับเอกสารครบชุดของ Figma MCP server โปรดดู เอกสารสำหรับนักพัฒนา ของเรา การใช้ Figma MCP server และทรัพยากรที่เกี่ยวข้อง (รวมถึงทักษะเหล่านี้) ถือว่าคุณยอมรับ ข้อกำหนดสำหรับนักพัฒนา Figma ทักษะเหล่านี้เปิดให้ใช้งานเป็นฟีเจอร์เบต้าในขณะนี้

คุณสมบัติ

• เขียนลงบน canvas (เฉพาะ remote server): สร้างและแก้ไขเนื้อหา Figma ดั้งเดิมโดยตรงจาก MCP client ของคุณ ด้วยทักษะที่เหมาะสม agents สามารถสร้างและอัปเดต frames, components, variables และ auto layout ในไฟล์ Figma ของคุณโดยใช้ระบบการออกแบบของคุณเป็นแหล่งข้อมูลหลัก

  หมายเหตุ: เรากำลังปรับปรุงการสนับสนุน AI agents ของ Figma อย่างรวดเร็ว ฟีเจอร์การเขียนลงบน canvas จะกลายเป็นฟีเจอร์แบบชำระเงินตามการใช้งานในที่สุด แต่ปัจจุบันเปิดให้ใช้ฟรีในช่วงเบต้า

• สร้างโค้ดจาก frames ที่เลือก

  เลือก Figma frame แล้วแปลงเป็นโค้ด เหมาะสำหรับทีมผลิตภัณฑ์ที่สร้างโฟลว์ใหม่หรือปรับปรุงฟีเจอร์แอปอย่างต่อเนื่อง

• ดึงบริบทการออกแบบ

  ดึง variables, components และข้อมูล layout เข้าสู่ IDE ของคุณโดยตรง มีประโยชน์อย่างยิ่งสำหรับระบบการออกแบบและขั้นตอนการทำงานที่ใช้ components เป็นหลัก

• เขียนโค้ดอย่างชาญฉลาดด้วย Code Connect

  เพิ่มคุณภาพผลลัพธ์ด้วยการนำ components จริงของคุณกลับมาใช้ใหม่ Code Connect ทำให้โค้ดที่สร้างขึ้นสอดคล้องกับ codebase ของคุณ

  เรียนรู้เพิ่มเติมเกี่ยวกับ Code Connect →

• สร้างการออกแบบ Figma จากหน้าเว็บ (กำลังทยอยเปิดตัว)

  จับภาพ นำเข้า หรือแปลงหน้าเว็บเป็นการออกแบบ Figma โดยตรงจาก AI coding agent ของคุณ

การติดตั้งและการตั้งค่า

เชื่อมต่อกับ Figma MCP server

MCP clients ที่แตกต่างกันต้องมีการตั้งค่าที่แตกต่างกันเล็กน้อย ปฏิบัติตามคำแนะนำด้านล่างสำหรับ client เฉพาะของคุณเพื่อเชื่อมต่อกับ Figma MCP server

VS Code

1. ใช้ทางลัด ⌘ Shift P เพื่อค้นหา MCP:Add Server
2. เลือก HTTP
3. วาง server url https://mcp.figma.com/mcp ในแถบค้นหา จากนั้นกด Enter
4. เมื่อได้รับแจ้งให้ระบุ server ID ให้ป้อน figma
5. เลือกว่าต้องการเพิ่มเซิร์ฟเวอร์นี้แบบ global หรือเฉพาะ workspace ปัจจุบัน เมื่อยืนยันแล้ว คุณจะเห็นการกำหนดค่าลักษณะนี้ในไฟล์ mcp.json ของคุณ:

{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

6. เปิดแถบเครื่องมือแชทโดยใช้ ⌥⌘B หรือ ⌃⌘I และสลับไปที่โหมด Agent
7. เมื่อเปิดแชทแล้ว พิมพ์ #get_design_context เพื่อยืนยันว่าเครื่องมือของ Figma MCP server พร้อมใช้งาน หากไม่มีเครื่องมือใดแสดงขึ้น ให้รีสตาร์ท VS Code

[!NOTE] คุณต้องเปิดใช้งาน GitHub Copilot ในบัญชีของคุณเพื่อใช้ MCP ใน VS Code

สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสารอย่างเป็นทางการของ VS Code

Cursor

วิธีแนะนำในการตั้งค่า Figma MCP server ใน Cursor คือการติดตั้ง Figma Plugin ซึ่งรวมการตั้งค่า MCP server และ Agent Skills สำหรับขั้นตอนการทำงานทั่วไป

ติดตั้งปลั๊กอินโดยพิมพ์คำสั่งต่อไปนี้ในแชท agent ของ Cursor:

/add-plugin figma

ปลั๊กอินประกอบด้วย:

• การกำหนดค่า MCP server สำหรับ Figma MCP server
• ทักษะสำหรับการนำการออกแบบไปใช้ การเชื่อมต่อ components ผ่าน Code Connect และการสร้างกฎระบบการออกแบบ
• กฎสำหรับการจัดการทรัพยากรอย่างเหมาะสมจาก Figma MCP server

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Claude Code

วิธีแนะนำในการตั้งค่า Figma MCP server ใน Claude Code คือการติดตั้ง Figma Plugin ซึ่งรวมการตั้งค่า MCP server และ Agent Skills สำหรับขั้นตอนการทำงานทั่วไป

รันคำสั่งต่อไปนี้เพื่อติดตั้งปลั๊กอินจากตลาดปลั๊กอินอย่างเป็นทางการของ Anthropic

claude plugin install figma@claude-plugins-official

เรียนรู้เพิ่มเติมเกี่ยวกับ Claude Code Plugins และ Agent Skills ของ Anthropic

claude mcp add --transport http figma https://mcp.figma.com/mcp

Gemini CLI

ติดตั้งส่วนขยาย Figma สำหรับ Gemini CLI โดยรันคำสั่งต่อไปนี้:

gemini extensions install https://github.com/figma/mcp-server-guide

เมื่อติดตั้งแล้ว ให้ยืนยันตัวตนกับ Figma โดยรัน gemini จากนั้นรันคำสั่งต่อไปนี้ภายใน CLI:

/mcp auth figma

หากต้องการถอนการติดตั้งส่วนขยาย:

gemini extensions uninstall figma

ตัวแก้ไขอื่นๆ

ตัวแก้ไขโค้ดและเครื่องมืออื่นๆ ที่รองรับ Streamable HTTP สามารถเชื่อมต่อกับ Figma MCP server ได้เช่นกัน

หากคุณใช้ตัวแก้ไขหรือเครื่องมืออื่น โปรดตรวจสอบเอกสารของเครื่องมือนั้นเพื่อยืนยันว่ารองรับการสื่อสารแบบ Streamable HTTP หรือไม่ หากรองรับ คุณสามารถเพิ่ม Figma MCP server ด้วยตนเองโดยใช้การกำหนดค่านี้:

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

การสั่งงาน MCP client ของคุณ

Figma MCP server แนะนำชุดเครื่องมือที่ช่วยให้ LLMs แปลการออกแบบใน Figma เมื่อเชื่อมต่อแล้ว คุณสามารถสั่งงาน MCP client ของคุณเพื่อเข้าถึงโหนดการออกแบบที่เฉพาะเจาะจง

เพื่อให้บริบทการออกแบบ Figma แก่ AI client ของคุณ:

1. คัดลอกลิงก์ไปยัง frame หรือ layer ใน Figma
2. สั่งงาน client ของคุณให้ช่วยคุณ implement การออกแบบที่ URL ที่เลือก

[!NOTE] client ของคุณจะไม่สามารถนำทางไปยัง URL ที่เลือกได้ แต่จะแยก node-id ที่จำเป็นสำหรับ MCP server เพื่อระบุว่าควรส่งคืนข้อมูลเกี่ยวกับออบเจ็กต์ใด

เครื่องมือและทักษะ

Figma จัดทำรายการเครื่องมือที่ให้บริการโดย Figma MCP server ใน เอกสารสำหรับนักพัฒนา

คุณยังสามารถเรียนรู้เพิ่มเติมเกี่ยวกับทักษะที่รวมอยู่ในปลั๊กอิน Figma สำหรับ agents ที่รองรับ ได้ใน Figma Help Center ทั้งนี้ขึ้นอยู่กับ agent คุณอาจเห็นคำว่า connector, extension หรือ power; คำเหล่านี้รวมถึงชุดทักษะเดียวกัน

พื้นที่เก็บข้อมูลนี้ยังมีทักษะขั้นตอนการทำงานแบบสแตนด์อโลนที่ไม่ได้รวมอยู่ในปลั๊กอิน Figma:

• workflow-skills/video-interaction-mapper: เปลี่ยนการบันทึก UI เป็น storyboards Figma ที่มีคำอธิบายประกอบ
• workflow-skills/generate-project-plan: เปลี่ยน PRD (พร้อมการอ้างอิง codebase เพิ่มเติม) เป็นบอร์ดแผนโครงการ FigJam

แนวทางปฏิบัติที่ดีที่สุดสำหรับ MCP

คุณภาพของโค้ดที่สร้างขึ้นขึ้นอยู่กับหลายปัจจัย บางอย่างควบคุมโดยคุณ และบางอย่างควบคุมโดยเครื่องมือที่คุณใช้ นี่คือคำแนะนำบางประการสำหรับผลลัพธ์ที่สะอาดและสอดคล้องกัน

จัดโครงสร้างไฟล์ Figma ของคุณเพื่อโค้ดที่ดีขึ้น

ให้บริบทที่ดีที่สุดสำหรับเจตนาการออกแบบของคุณ เพื่อให้ MCP และผู้ช่วย AI ของคุณสามารถสร้างโค้ดที่ชัดเจน สอดคล้องกัน และสอดคล้องกับระบบของคุณ

• ใช้ components สำหรับสิ่งที่นำกลับมาใช้ใหม่ (ปุ่ม การ์ด ช่องป้อนข้อมูล ฯลฯ)
• เชื่อมโยง components กับ codebase ของคุณ ผ่าน Code Connect นี่เป็นวิธีที่ดีที่สุดเพื่อให้ได้การนำ components กลับมาใช้ใหม่ในโค้ดอย่างสอดคล้องกัน หากไม่มีสิ่งนี้ โมเดลจะเป็นการเดา
• ใช้ variables สำหรับระยะห่าง สี รัศมี และการพิมพ์
• ตั้งชื่อ layers ตามความหมาย (เช่น CardContainer ไม่ใช่ Group 5)
• ใช้ Auto layout เพื่อสื่อสารเจตนาแบบ responsive

[!TIP] ปรับขนาด frame ใน Figma เพื่อตรวจสอบว่าทำงานตามที่คาดหวังก่อนสร้างโค้ด

• ใช้คำอธิบายประกอบและทรัพยากรสำหรับนักพัฒนา เพื่อสื่อสารเจตนาการออกแบบที่ยากต่อการจับจากภาพเพียงอย่างเดียว เช่น สิ่งที่ควรทำงาน จัดตำแหน่ง หรือตอบสนองอย่างไร

เขียนพรอมต์ที่มีประสิทธิภาพเพื่อแนะนำ AI

MCP ให้ข้อมูล Figma ที่มีโครงสร้างแก่ผู้ช่วย AI ของคุณ แต่พรอมต์ของคุณขับเคลื่อนผลลัพธ์ พรอมต์ที่ดีสามารถ:

• จัดผลลัพธ์ให้สอดคล้องกับเฟรมเวิร์กหรือระบบสไตล์ของคุณ
• ปฏิบัติตามโครงสร้างไฟล์และหลักการตั้งชื่อ
• เพิ่มโค้ดไปยังเส้นทางเฉพาะ (เช่น src/components/ui)
• เพิ่มหรือแก้ไขโค้ดในไฟล์ที่มีอยู่แทนการสร้างไฟล์ใหม่
• ปฏิบัติตามระบบ layout เฉพาะ (เช่น grid, flexbox, absolute)

ตัวอย่าง:

• "สร้างโค้ด iOS SwiftUI จาก frame นี้"
• "ใช้ Chakra UI สำหรับ layout นี้"
• "ใช้ components src/components/ui"
• "เพิ่มสิ่งนี้ไปที่ src/components/marketing/PricingCard.tsx"
• "ใช้ layout component Stack ของเรา"

คิดว่าพรอมต์เหมือนการสรุปงานให้เพื่อนร่วมทีม เจตนาที่ชัดเจนนำไปสู่ผลลัพธ์ที่ดีขึ้น

เรียกใช้เครื่องมือเฉพาะเมื่อจำเป็น

MCP รองรับเครื่องมือที่แตกต่างกัน และแต่ละเครื่องมือให้บริบทที่มีโครงสร้างประเภทต่างๆ แก่ผู้ช่วย AI ของคุณ บางครั้งผู้ช่วยไม่ได้เลือกเครื่องมือที่ถูกต้องโดยอัตโนมัติ โดยเฉพาะอย่างยิ่งเมื่อมีเครื่องมือมากขึ้น หากผลลัพธ์ไม่ถูกต้อง ลองระบุในพรอมต์ของคุณอย่างชัดเจน

• get_design_context ให้การแสดง React + Tailwind ที่มีโครงสร้างของการเลือก Figma ของคุณ นี่คือจุดเริ่มต้นที่ผู้ช่วย AI ของคุณสามารถแปลเป็นเฟรมเวิร์กหรือสไตล์โค้ดใดก็ได้ ขึ้นอยู่กับพรอมต์ของคุณ
• get_variable_defs แยก variables และ styles ที่ใช้ในการเลือกของคุณ (สี ระยะห่าง การพิมพ์ ฯลฯ) สิ่งนี้ช่วยให้โมเดลอ้างอิง tokens ของคุณโดยตรงในโค้ดที่สร้างขึ้น

ตัวอย่างเช่น หากคุณได้รับโค้ดดิบแทน tokens ลองใช้สิ่งนี้:

• "รับชื่อและค่าของ variables ที่ใช้ใน frame นี้"

เพิ่มกฎที่กำหนดเอง

ตั้งค่าคำแนะนำระดับโปรเจกต์เพื่อให้ผลลัพธ์สอดคล้องกัน เช่นเดียวกับบันทึกการเริ่มงานสำหรับนักพัฒนาใหม่ สิ่งเหล่านี้ได้แก่:

• primitives ของ layout ที่ต้องการ
• การจัดระเบียบไฟล์
• รูปแบบการตั้งชื่อ
• สิ่งที่ไม่ควร hardcode

คุณสามารถระบุสิ่งนี้ในรูปแบบใดก็ได้ที่ MCP client ของคุณใช้สำหรับไฟล์คำแนะนำ

ตัวอย่าง:

รับประกันผลลัพธ์ที่ดีอย่างสม่ำเสมอ

## Figma MCP Integration Rules
These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.

### Required flow (do not skip)
1. Run get_design_context first to fetch the structured representation for the exact node(s).
2. If the response is too large or truncated, run get_metadata to get the high‑level node map and then re‑fetch only the required node(s) with get_design_context.
3. Run get_screenshot for a visual reference of the node variant being implemented.
4. Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation.
5. Translate the output (usually React + Tailwind) into this project's conventions, styles and framework.  Reuse the project's color tokens, components, and typography wherever possible.
6. Validate against Figma for 1:1 look and behavior before marking complete.

### Implementation rules
- Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style.
- Replace Tailwind utility classes with the project's preferred utilities/design‑system tokens when applicable.
- Reuse existing components (e.g., buttons, inputs, typography, icon wrappers) instead of duplicating functionality.
- Use the project's color system, typography scale, and spacing tokens consistently.
- Respect existing routing, state management, and data‑fetch patterns already adopted in the repo.
- Strive for 1:1 visual parity with the Figma design. When conflicts arise, prefer design‑system tokens and adjust spacing or sizes minimally to match visuals.
- Validate the final UI against the Figma screenshot for both look and behavior.

Cursor

---
description: Figma MCP server rules
globs:
alwaysApply: true
---
- The Figma MCP server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

Claude Code

# MCP Servers

## Figma MCP server rules

- The Figma MCP server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

กฎคุณภาพทั่วไป

- IMPORTANT: Always use components from `/path_to_your_design_system` when possible
- Prioritize Figma fidelity to match designs exactly
- Avoid hardcoded values, use design tokens from Figma where available
- Follow WCAG requirements for accessibility
- Add component documentation
- Place UI components in `/path_to_your_design_system`; avoid inline styles unless truly necessary

การเพิ่มสิ่งเหล่านี้เพียงครั้งเดียวสามารถลดความจำเป็นในการพรอมต์ซ้ำๆ ได้อย่างมาก และทำให้แน่ใจว่าเพื่อนร่วมทีมหรือ agents ปฏิบัติตามความคาดหวังเดียวกันอย่างสม่ำเสมอ

โปรดตรวจสอบเอกสารของ IDE หรือ MCP client ของคุณสำหรับวิธีการจัดโครงสร้างกฎ และทดลองเพื่อค้นหาสิ่งที่ดีที่สุดสำหรับทีมของคุณ คำแนะนำที่ชัดเจนและสอดคล้องกันมักนำไปสู่โค้ดที่ดีขึ้นและนำกลับมาใช้ใหม่ได้มากขึ้น โดยมีการโต้ตอบน้อยลง

แบ่งการเลือกขนาดใหญ่

แบ่งหน้าจอออกเป็นส่วนย่อยๆ (เช่น components หรือชิ้นส่วนเชิงตรรกะ) เพื่อผลลัพธ์ที่รวดเร็วและเชื่อถือได้มากขึ้น

การเลือกขนาดใหญ่อาจทำให้เครื่องมือช้าลง ทำให้เกิดข้อผิดพลาด หรือส่งผลให้การตอบสนองไม่สมบูรณ์ โดยเฉพาะอย่างยิ่งเมื่อมีบริบทมากเกินไปสำหรับโมเดลในการประมวลผล ให้ทำดังนี้แทน:

1. สร้างโค้ดสำหรับส่วนย่อยหรือ components แต่ละรายการ (เช่น Card, Header, Sidebar)
2. หากรู้สึกช้าหรือติดขัด ให้ลดขนาดการเลือกของคุณ

สิ่งนี้ช่วยให้บริบทจัดการได้และผลลัพธ์คาดเดาได้มากขึ้น ทั้งสำหรับคุณและสำหรับโมเดล

หากมีบางอย่างในผลลัพธ์ดูไม่ถูกต้อง มักจะช่วยได้ที่จะกลับไปดูพื้นฐาน: วิธีจัดโครงสร้างไฟล์ Figma วิธีเขียนพรอมต์ และบริบทที่ส่งไป การปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดข้างต้นสามารถสร้างความแตกต่างได้มาก และมักนำไปสู่โค้ดที่สอดคล้องกันและนำกลับมาใช้ใหม่ได้มากขึ้น

การนำบริบท Make มาสู่ agent ของคุณ

การผสานรวม Make + MCP ช่วยให้การนำต้นแบบจาก การออกแบบไปสู่การผลิต ง่ายขึ้น โดยการเชื่อมต่อโปรเจกต์ Make เข้ากับเอเจนต์ของคุณโดยตรงผ่าน MCP คุณสามารถดึงทรัพยากรและนำกลับมาใช้ใหม่ในโค้ดเบสของคุณได้ ซึ่งช่วยลดความยุ่งยากในการขยายต้นแบบไปสู่แอปพลิเคชันจริง และช่วยให้มั่นใจว่าความตั้งใจในการออกแบบถูกถ่ายทอดไปสู่การนำไปปฏิบัติอย่างครบถ้วน

ด้วยการผสานรวมนี้ คุณสามารถ:

• ดึงข้อมูลบริบทของโปรเจกต์ ได้โดยตรงจาก Make (ไฟล์แต่ละไฟล์หรือทั้งโปรเจกต์)
• สั่งให้ใช้คอมโพเนนต์โค้ดที่มีอยู่ แทนการเริ่มต้นจากศูนย์
• ขยายต้นแบบด้วยข้อมูลจริง เพื่อตรวจสอบความถูกต้องและนำการออกแบบไปสู่การผลิตได้เร็วขึ้น

วิธีการทำงาน

[!NOTE] การผสานรวมนี้ใช้ประโยชน์จากความสามารถ resources ของ MCP ซึ่งช่วยให้เอเจนต์ของคุณดึงบริบทจากโปรเจกต์ Make ได้โดยตรง โดยจะใช้งานได้เฉพาะบนไคลเอนต์ที่รองรับ MCP resources เท่านั้น

ขั้นตอนการดึงทรัพยากรจาก Make

1. สั่งให้เอเจนต์ของคุณดึงบริบท โดยระบุลิงก์ Make ที่ถูกต้อง
2. รับรายการไฟล์ที่มีอยู่ จากโปรเจกต์ Make ของคุณ
3. ดาวน์โหลดไฟล์ที่ต้องการดึง เมื่อได้รับพร้อมท์

ตัวอย่างขั้นตอนการทำงาน

เป้าหมาย: นำคอมโพเนนต์ป๊อปอัปไปใช้ในโค้ดเบสการผลิตของคุณให้ตรงกับการออกแบบและพฤติกรรมที่กำหนดไว้ใน Make

1. แชร์ลิงก์โปรเจกต์ Make ของคุณกับเอเจนต์
2. สั่งให้เอเจนต์: "ฉันต้องการดึงพฤติกรรมและสไตล์ของคอมโพเนนต์ป๊อปอัปจากไฟล์ Make นี้ และนำไปใช้กับคอมโพเนนต์ป๊อปอัปที่มีอยู่ของฉัน"

เอเจนต์ของคุณจะดึงบริบทที่เกี่ยวข้องจาก Make และแนะนำคุณในการขยายคอมโพเนนต์ป๊อปอัปที่มีอยู่ด้วยฟังก์ชันการทำงานและสไตล์ของต้นแบบ

แนวทางสำหรับไอคอน

ดู แนวทางการใช้งานแบรนด์ Figma สำหรับการแสดงไอคอนใดๆ ที่อยู่ในพื้นที่เก็บข้อมูลนี้