Figma

Hướng dẫn MCP Server Figma

MCP server Figma đưa Figma trực tiếp vào quy trình làm việc của bạn bằng cách cung cấp thông tin thiết kế quan trọng và ngữ cảnh cho các tác nhân AI tạo mã từ các tệp thiết kế Figma.

[!NOTE] Giới hạn tốc độ áp dụng cho các công cụ MCP server Figma đọc dữ liệu từ Figma. Một số công cụ, chẳng hạn như những công cụ ghi vào tệp Figma, được miễn trừ khỏi giới hạn tốc độ.

Người dùng trên gói Starter hoặc có ghế View hoặc Collab trên các gói trả phí sẽ bị giới hạn tối đa 6 lần gọi công cụ mỗi tháng.

Người dùng có ghế Dev hoặc Full trên các gói Professional, Organization hoặc Enterprise có giới hạn tốc độ theo phút, tuân theo các giới hạn tương tự như Figma REST API Bậc 1. Giống như REST API của Figma, Figma có quyền thay đổi giới hạn tốc độ.

Để có đầy đủ tài liệu về MCP server Figma, hãy xem tài liệu dành cho nhà phát triển của chúng tôi. Bằng cách sử dụng MCP server Figma và các tài nguyên liên quan (bao gồm cả các kỹ năng này), bạn đồng ý với Điều khoản dành cho nhà phát triển Figma. Các kỹ năng này hiện đang có sẵn dưới dạng tính năng Beta.

Tính năng

• Ghi vào canvas (chỉ máy chủ từ xa): Tạo và sửa đổi nội dung Figma gốc trực tiếp từ máy khách MCP của bạn. Với các kỹ năng phù hợp, các tác nhân có thể xây dựng và cập nhật khung, thành phần, biến và bố cục tự động trong các tệp Figma của bạn bằng hệ thống thiết kế của bạn làm nguồn chân lý.

  Lưu ý: Chúng tôi đang nhanh chóng cải thiện cách Figma hỗ trợ các tác nhân AI. Tính năng ghi vào canvas cuối cùng sẽ là tính năng trả phí dựa trên mức sử dụng, nhưng hiện đang miễn phí trong giai đoạn beta.

• Tạo mã từ các khung đã chọn

  Chọn một khung Figma và chuyển nó thành mã. Rất hữu ích cho các nhóm sản phẩm đang xây dựng luồng mới hoặc lặp lại các tính năng ứng dụng.

• Trích xuất ngữ cảnh thiết kế

  Kéo các biến, thành phần và dữ liệu bố cục trực tiếp vào IDE của bạn. Điều này đặc biệt hữu ích cho các hệ thống thiết kế và quy trình làm việc dựa trên thành phần.

• Viết mã thông minh hơn với Code Connect

  Tăng chất lượng đầu ra bằng cách tái sử dụng các thành phần thực tế của bạn. Code Connect giữ cho mã được tạo nhất quán với cơ sở mã của bạn.

  Tìm hiểu thêm về Code Connect →

• Tạo thiết kế Figma từ các trang web (đang triển khai)

  Chụp, nhập hoặc chuyển đổi một trang web thành thiết kế Figma trực tiếp từ tác nhân mã AI của bạn.

Cài đặt & Thiết lập

Kết nối với MCP server Figma

Các máy khách MCP khác nhau yêu cầu thiết lập hơi khác nhau. Làm theo hướng dẫn bên dưới cho máy khách cụ thể của bạn để kết nối với MCP server Figma.

VS Code

1. Sử dụng phím tắt ⌘ Shift P để tìm kiếm MCP:Add Server.
2. Chọn HTTP.
3. Dán url máy chủ https://mcp.figma.com/mcp vào thanh tìm kiếm. Sau đó nhấn Enter.
4. Khi được nhắc nhập ID máy chủ, hãy nhập figma.
5. Chọn xem bạn muốn thêm máy chủ này trên toàn cầu hay chỉ cho không gian làm việc hiện tại. Sau khi xác nhận, bạn sẽ thấy cấu hình như thế này trong tệp mcp.json của mình:

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

6. Mở thanh công cụ trò chuyện bằng ⌥⌘B hoặc ⌃⌘I và chuyển sang chế độ Agent.
7. Với cửa sổ trò chuyện đang mở, hãy nhập #get_design_context để xác nhận rằng các công cụ MCP server Figma có sẵn. Nếu không có công cụ nào được liệt kê, hãy khởi động lại VS Code.

[!NOTE] Bạn phải bật GitHub Copilot trên tài khoản của mình để sử dụng MCP trong VS Code.

Để biết thêm thông tin, hãy xem tài liệu chính thức của VS Code.

Cursor

Cách được khuyến nghị để thiết lập MCP server Figma trong Cursor là cài đặt Plugin Figma, bao gồm cài đặt máy chủ MCP cũng như các Kỹ năng tác nhân cho các quy trình làm việc phổ biến.

Cài đặt plugin bằng cách nhập lệnh sau vào cửa sổ trò chuyện tác nhân của Cursor:

/add-plugin figma

Plugin bao gồm:

• Cấu hình máy chủ MCP cho MCP server Figma
• Các kỹ năng để triển khai thiết kế, kết nối các thành phần qua Code Connect và tạo quy tắc hệ thống thiết kế
• Các quy tắc xử lý tài sản phù hợp từ MCP server Figma

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

Claude Code

Cách được khuyến nghị để thiết lập MCP server Figma trong Claude Code là cài đặt Plugin Figma, bao gồm cài đặt máy chủ MCP cũng như các Kỹ năng tác nhân cho các quy trình làm việc phổ biến.

Chạy lệnh sau để cài đặt plugin từ chợ plugin chính thức của Anthropic.

claude plugin install figma@claude-plugins-official

Tìm hiểu thêm về Claude Code Plugins và Agent Skills của Anthropic.

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

Gemini CLI

Cài đặt tiện ích mở rộng Figma cho Gemini CLI bằng cách chạy lệnh sau:

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

Sau khi cài đặt, xác thực với Figma bằng cách chạy gemini rồi thực hiện lệnh sau trong CLI:

/mcp auth figma

Để gỡ cài đặt tiện ích mở rộng:

gemini extensions uninstall figma

Các trình soạn thảo khác

Các trình soạn thảo mã và công cụ khác hỗ trợ Streamable HTTP cũng có thể kết nối với MCP server Figma.

Nếu bạn đang sử dụng một trình soạn thảo hoặc công cụ khác, hãy kiểm tra tài liệu của nó để xác nhận rằng nó hỗ trợ giao tiếp dựa trên Streamable HTTP. Nếu có, bạn có thể thêm MCP server Figma theo cách thủ công bằng cấu hình này:

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

Nhắc máy khách MCP của bạn

MCP server Figma giới thiệu một bộ công cụ giúp các LLM dịch các thiết kế trong Figma. Sau khi kết nối, bạn có thể nhắc máy khách MCP của mình truy cập vào một nút thiết kế cụ thể.

Để cung cấp ngữ cảnh thiết kế Figma cho máy khách AI của bạn:

1. Sao chép liên kết đến một khung hoặc lớp trong Figma.
2. Nhắc máy khách của bạn giúp bạn triển khai thiết kế tại URL đã chọn.

[!NOTE] Máy khách của bạn sẽ không thể điều hướng đến URL đã chọn, nhưng nó sẽ trích xuất node-id cần thiết để MCP server xác định đối tượng nào cần trả về thông tin.

Công cụ và kỹ năng

Figma duy trì danh sách các công cụ do MCP server Figma cung cấp trong tài liệu dành cho nhà phát triển.

Bạn cũng có thể tìm hiểu thêm về các kỹ năng đi kèm với plugin Figma cho các tác nhân được hỗ trợ trong Trung tâm trợ giúp Figma. Tùy thuộc vào tác nhân, bạn cũng có thể thấy các thuật ngữ connector, extension hoặc power; các thuật ngữ này bao gồm cùng một bộ kỹ năng.

Kho lưu trữ này cũng chứa các kỹ năng quy trình làm việc độc lập không được đóng gói với plugin Figma:

• workflow-skills/video-interaction-mapper: Chuyển đổi bản ghi UI thành storyboard Figma có chú thích
• workflow-skills/generate-project-plan: Chuyển đổi PRD (cộng với cơ sở mã tùy chọn) thành bảng kế hoạch dự án FigJam

Các phương pháp hay nhất về MCP

Chất lượng của mã được tạo phụ thuộc vào một số yếu tố. Một số do bạn kiểm soát và một số do các công cụ bạn đang sử dụng. Dưới đây là một số gợi ý để có đầu ra sạch và nhất quán.

Cấu trúc tệp Figma của bạn để có mã tốt hơn

Cung cấp ngữ cảnh tốt nhất cho ý định thiết kế của bạn, để MCP và trợ lý AI của bạn có thể tạo mã rõ ràng, nhất quán và phù hợp với hệ thống của bạn.

• Sử dụng các thành phần cho bất kỳ thứ gì được tái sử dụng (nút, thẻ, trường nhập liệu, v.v.)
• Liên kết các thành phần với cơ sở mã của bạn qua Code Connect. Đây là cách tốt nhất để có được việc tái sử dụng thành phần nhất quán trong mã. Nếu không có nó, mô hình đang đoán.
• Sử dụng các biến cho khoảng cách, màu sắc, bán kính và kiểu chữ.
• Đặt tên lớp theo ngữ nghĩa (ví dụ: CardContainer, không phải Group 5)
• Sử dụng bố cục tự động để truyền đạt ý định phản hồi.

[!TIP] Thay đổi kích thước khung trong Figma để kiểm tra xem nó hoạt động như mong đợi trước khi tạo mã.

• Sử dụng chú thích và tài nguyên dành cho nhà phát triển để truyền đạt ý định thiết kế khó nắm bắt từ hình ảnh, chẳng hạn như cách một thứ gì đó nên hoạt động, căn chỉnh hoặc phản hồi.

Viết lời nhắc hiệu quả để hướng dẫn AI

MCP cung cấp cho trợ lý AI của bạn dữ liệu Figma có cấu trúc, nhưng lời nhắc của bạn thúc đẩy kết quả. Lời nhắc tốt có thể:

• Căn chỉnh kết quả với khung hoặc hệ thống tạo kiểu của bạn
• Tuân theo cấu trúc tệp và quy ước đặt tên
• Thêm mã vào các đường dẫn cụ thể (ví dụ: src/components/ui)
• Thêm hoặc sửa đổi mã trong các tệp hiện có thay vì tạo tệp mới
• Tuân theo các hệ thống bố cục cụ thể (ví dụ: lưới, flexbox, absolute)

Ví dụ:

• "Tạo mã iOS SwiftUI từ khung này"
• "Sử dụng Chakra UI cho bố cục này"
• "Sử dụng các thành phần src/components/ui"
• "Thêm cái này vào src/components/marketing/PricingCard.tsx"
• "Sử dụng thành phần bố cục Stack của chúng tôi"

Hãy nghĩ về lời nhắc như một bản tóm tắt ngắn gọn cho đồng đội. Ý định rõ ràng dẫn đến kết quả tốt hơn.

Kích hoạt các công cụ cụ thể khi cần

MCP hỗ trợ các công cụ khác nhau và mỗi công cụ cung cấp cho trợ lý AI của bạn một loại ngữ cảnh có cấu trúc khác nhau. Đôi khi, trợ lý không tự động chọn đúng công cụ, đặc biệt khi có nhiều công cụ hơn. Nếu kết quả không đúng, hãy thử nói rõ ràng trong lời nhắc của bạn.

• get_design_context cung cấp biểu diễn React + Tailwind có cấu trúc của vùng chọn Figma của bạn. Đây là điểm khởi đầu mà trợ lý AI của bạn có thể dịch sang bất kỳ khung hoặc kiểu mã nào, tùy thuộc vào lời nhắc của bạn.
• get_variable_defs trích xuất các biến và kiểu được sử dụng trong vùng chọn của bạn (màu sắc, khoảng cách, kiểu chữ, v.v.). Điều này giúp mô hình tham chiếu trực tiếp các token của bạn trong mã được tạo.

Ví dụ: nếu bạn nhận được mã thô thay vì token, hãy thử điều gì đó như:

• "Lấy tên và giá trị biến được sử dụng trong khung này."

Thêm quy tắc tùy chỉnh

Đặt hướng dẫn cấp dự án để giữ đầu ra nhất quán—giống như ghi chú giới thiệu cho nhà phát triển mới. Đây là những thứ như:

• Các nguyên hàm bố cục ưa thích
• Tổ chức tệp
• Các mẫu đặt tên
• Những gì không nên mã hóa cứng

Bạn có thể cung cấp điều này ở bất kỳ định dạng nào mà máy khách MCP của bạn sử dụng cho các tệp hướng dẫn.

Ví dụ:

Đảm bảo đầu ra tốt nhất quán

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

Quy tắc chất lượng chung

- 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

Thêm những điều này một lần có thể giảm đáng kể nhu cầu nhắc lặp đi lặp lại và đảm bảo rằng đồng đội hoặc tác nhân luôn tuân theo cùng một kỳ vọng.

Hãy nhớ kiểm tra tài liệu của IDE hoặc máy khách MCP của bạn về cách cấu trúc các quy tắc và thử nghiệm để tìm ra những gì hoạt động tốt nhất cho nhóm của bạn. Hướng dẫn rõ ràng, nhất quán thường dẫn đến mã tốt hơn, có thể tái sử dụng hơn với ít trao đổi qua lại hơn.

Chia nhỏ các vùng chọn lớn

Chia màn hình thành các phần nhỏ hơn (như các thành phần hoặc khối logic) để có kết quả nhanh hơn, đáng tin cậy hơn.

Các vùng chọn lớn có thể làm chậm các công cụ, gây lỗi hoặc dẫn đến phản hồi không đầy đủ, đặc biệt khi có quá nhiều ngữ cảnh để mô hình xử lý. Thay vào đó:

1. Tạo mã cho các phần nhỏ hơn hoặc các thành phần riêng lẻ (ví dụ: Card, Header, Sidebar)
2. Nếu cảm thấy chậm hoặc bị kẹt, hãy giảm kích thước vùng chọn của bạn

Điều này giúp giữ ngữ cảnh ở mức quản lý được và kết quả dễ dự đoán hơn, cho cả bạn và mô hình.

Nếu điều gì đó trong đầu ra trông không ổn, thường hữu ích khi xem lại những điều cơ bản: cách tệp Figma được cấu trúc, cách lời nhắc được viết và ngữ cảnh nào đang được gửi. Tuân theo các phương pháp hay nhất ở trên có thể tạo ra sự khác biệt lớn và thường dẫn đến mã nhất quán hơn, có thể tái sử dụng hơn.

Mang ngữ cảnh Make đến tác nhân của bạn

Tích hợp Make + MCP giúp bạn dễ dàng đưa các nguyên mẫu từ thiết kế đến sản xuất. Bằng cách kết nối trực tiếp các dự án Make với agent của bạn qua MCP, bạn có thể trích xuất tài nguyên và tái sử dụng chúng trong codebase của mình. Điều này giảm bớt sự ma sát khi mở rộng các nguyên mẫu thành ứng dụng thực tế, đồng thời đảm bảo ý đồ thiết kế được truyền tải một cách trung thực vào quá trình triển khai.

Với tích hợp này, bạn có thể:

• Lấy ngữ cảnh dự án trực tiếp từ Make (các tệp riêng lẻ hoặc toàn bộ dự án)
• Yêu cầu sử dụng các thành phần mã hiện có thay vì bắt đầu từ đầu
• Mở rộng nguyên mẫu với dữ liệu thực để xác thực và đưa thiết kế vào sản xuất nhanh hơn

Cách hoạt động

[!NOTE] Tích hợp này tận dụng khả năng tài nguyên của MCP, cho phép agent của bạn lấy ngữ cảnh trực tiếp từ các dự án Make. Tính năng này chỉ khả dụng trên các ứng dụng khách hỗ trợ tài nguyên MCP.

Các bước để lấy tài nguyên từ Make

1. Yêu cầu agent lấy ngữ cảnh bằng cách cung cấp một liên kết Make hợp lệ
2. Nhận danh sách các tệp khả dụng từ dự án Make của bạn
3. Tải xuống các tệp bạn muốn lấy khi được nhắc

Ví dụ về quy trình làm việc

Mục tiêu: Triển khai một thành phần popup trong codebase sản xuất của bạn khớp với thiết kế và hành vi được xác định trong Make.

1. Chia sẻ liên kết dự án Make của bạn với agent.
2. Yêu cầu agent: "Tôi muốn lấy hành vi và kiểu dáng của thành phần popup từ tệp Make này và triển khai nó bằng thành phần popup của tôi."

Agent của bạn sẽ lấy ngữ cảnh liên quan từ Make và hướng dẫn bạn mở rộng thành phần popup hiện có với chức năng và kiểu dáng của nguyên mẫu.

Hướng dẫn về Biểu tượng

Xem Nguyên tắc sử dụng thương hiệu Figma để hiển thị bất kỳ biểu tượng nào có trong kho lưu trữ này.