Figma

คู่มือเซิร์ฟเวอร์ Figma MCP

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

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

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

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

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

คุณสมบัติ

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

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

• สร้างภาพเพลซโฮลเดอร์: เมื่อไม่มีภาพต้นฉบับ ภาพที่จับได้ หรือภาพจากไลบรารี เอเจนต์สามารถใช้ generate_image หลังจากขออนุญาตและเปิดเผยการใช้เครดิต Figma AI ภาพที่สร้างขึ้นจะถูกอัปโหลดด้วย upload_assets และนำไปใช้กับการออกแบบ

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

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

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

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

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

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

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

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

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

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

เชื่อมต่อกับเซิร์ฟเวอร์ Figma MCP

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

VS Code

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

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

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

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

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

Cursor

วิธีที่แนะนำในการตั้งค่าเซิร์ฟเวอร์ Figma MCP ใน Cursor คือการติดตั้งปลั๊กอิน Figma ซึ่งรวมถึงการตั้งค่าเซิร์ฟเวอร์ MCP และทักษะเอเจนต์สำหรับขั้นตอนการทำงานทั่วไป

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

/add-plugin figma

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

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

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

Claude Code

วิธีที่แนะนำในการตั้งค่าเซิร์ฟเวอร์ Figma MCP ใน Claude Code คือการติดตั้งปลั๊กอิน Figma ซึ่งรวมถึงการตั้งค่าเซิร์ฟเวอร์ MCP และทักษะเอเจนต์สำหรับขั้นตอนการทำงานทั่วไป

รันคำสั่งต่อไปนี้เพื่อติดตั้งปลั๊กอินจากตลาดปลั๊กอินอย่างเป็นทางการของ 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 ได้

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

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

การสั่งงานไคลเอ็นต์ MCP ของคุณ

เซิร์ฟเวอร์ Figma MCP แนะนำชุดเครื่องมือที่ช่วยให้ LLM แปลการออกแบบใน Figma เมื่อเชื่อมต่อแล้ว คุณสามารถสั่งงานไคลเอ็นต์ MCP ของคุณเพื่อเข้าถึงโหนดการออกแบบเฉพาะได้

เพื่อให้บริบทการออกแบบ Figma แก่ไคลเอ็นต์ AI ของคุณ:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ตัวอย่าง:

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

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

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

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

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

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

• "รับชื่อและค่าของตัวแปรที่ใช้ในเฟรมนี้"

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

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

• พื้นฐานเลย์เอาต์ที่ต้องการ
• การจัดระเบียบไฟล์
• รูปแบบการตั้งชื่อ
• สิ่งที่ไม่ควรฮาร์ดโค้ด

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

ตัวอย่าง:

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

## 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

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

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

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

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

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

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

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

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

นำบริบท Make มาสู่เอเจนต์ของคุณ

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

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

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

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

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

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

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

ตัวอย่างเวิร์กโฟลว์

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

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

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

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

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