Thiết lập Figma MCP Server

Từ việc gõ các prompt đến việc điều khiển một AI agent

🔄 Trong Bài học 2, bạn đã sử dụng Figma Make - AI tích hợp sẵn tạo ra các thiết kế từ văn bản. Bạn đã nhận thấy hạn chế lớn nhất của nó: Nó không biết hệ thống thiết kế của bạn. Bây giờ, bạn sẽ kết nối một AI agent bên ngoài có thể đọc các thành phần, token và cấu trúc file của bạn. Sự khác biệt là rất đáng kể.

Nhưng trước tiên, bạn cần kết nối. Đó chính là MCP.

MCP thực chất là gì?

MCP là viết tắt của Model Context Protocol. Nếu điều đó nghe có vẻ như thuật ngữ chuyên ngành, đây là phiên bản đơn giản: Đó là một cách chuẩn để các công cụ AI giao tiếp với những dịch vụ khác.

Trước MCP, việc kết nối một AI agent với Figma có nghĩa là ai đó phải xây dựng một tích hợp tùy chỉnh. Một cho Claude. Một cho Cursor. Một cho Gemini. Mỗi sự kết hợp giữa AI và công cụ đều cần code kết nối riêng.

MCP loại bỏ điều đó. Figma xây dựng một MCP server duy nhất. Bất kỳ AI client nào nói được MCP đều có thể kết nối với nó. Claude Code, Cursor, VS Code với GitHub Copilot, Gemini CLI, Windsurf - tất cả đều kết nối đến máy chủ theo cùng một cách.

Hãy nghĩ về nó như một cổng USB-C. Bạn không cần một loại cáp khác nhau cho mỗi thiết bị. Một tiêu chuẩn, nhiều kết nối.

Figma MCP server nằm tại: https://mcp.figma.com/mcp

URL đó là endpoint duy nhất. Mọi AI client đều kết nối đến đó.

✅ Kiểm tra nhanh: Tại sao MCP lại quan trọng đối với các nhà thiết kế?

Đáp án: Nếu không có MCP, bạn sẽ bị giới hạn ở bất kỳ công cụ AI nào mà Figma chọn để tích hợp trực tiếp. Với MCP, bất kỳ AI agent nào hỗ trợ giao thức đều có thể làm việc với các file Figma của bạn - mang lại cho bạn sự lựa chọn.

Thiết lập với Claude Code

Claude Code là cách phổ biến nhất mà các nhà thiết kế kết nối với Figma MCP. Dưới đây là hai cách để thêm nó:

Tùy chọn 1: Cài đặt Plugin

claude plugin install figma@claude-plugins-official

Đây là phương pháp đơn giản nhất. Plugin tự động xử lý cấu hình.

Tùy chọn 2: Thêm MCP thủ công

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

Thao tác này thêm trực tiếp Figma MCP server vào cấu hình Claude Code của bạn. Cả hai phương pháp đều đạt được cùng một kết quả - kết nối đến MCP endpoint của Figma.

Quy trình OAuth

Lần đầu tiên AI agent của bạn cố gắng truy cập Figma, điều gì đó sẽ xảy ra:

1. Terminal của bạn hiển thị một URL (hoặc tự động mở trình duyệt của bạn)

2. Màn hình chấp thuận OAuth của Figma xuất hiện - "Allow [Agent Name] to access your Figma files?" (Cho phép [Tên agent] truy cập các file Figma của bạn?)

3. Bạn nhấp vào "Allow" (Cho phép)

4. Trình duyệt chuyển hướng trở lại, agent nhận được token truy cập

5. Xong! Các phiên sau sẽ sử dụng lại token.

Đây là quy trình tương tự mà bạn đã sử dụng khi đăng nhập vào các ứng dụng bằng Google hoặc GitHub. Không cần sao chép-dán API key. Không cần chỉnh sửa file cấu hình thủ công. Chỉ cần trình duyệt chấp thuận.

Thiết lập với các client khác

MCP server của Figma hoạt động với nhiều ứng dụng hơn là chỉ Claude Code. Đối với Cursor, VS Code (với Copilot hoặc Cline), Gemini CLI, Windsurf và các ứng dụng khác - cách thiết lập là giống nhau: Thêm https://mcp.figma.com/mcp vào cấu hình MCP của client.

Đối với Cursor, điều đó có nghĩa là thêm nó vào .cursor/mcp.json. Đối với VS Code, là cài đặt MCP của extension. Đối với Gemini CLI: gemini mcp add figma --url https://mcp.figma.com/mcp.

Cùng một URL server, cùng một quy trình OAuth, với mọi ứng dụng. Hiện nay có hơn 10 ứng dụng hỗ trợ MCP.

✅ Kiểm tra nhanh: Bạn đã thiết lập MCP với Claude Code và cũng muốn sử dụng nó với Cursor. Bạn có cần một Figma server khác không?

Câu trả lời: Không. Cùng một URL máy chủ hoạt động cho mọi client. Bạn chỉ cần thêm nó vào cấu hình MCP của từng client và xác thực riêng biệt.

Thực tế về giá cả

Đây là phần mà không ai nói đến đủ.

Quyền truy cập Figma MCP được liên kết với gói Figma của bạn. Đây là những gì mỗi cấp độ thực sự cung cấp cho bạn:

Hãy nói thẳng về gói miễn phí: 6 lượt gọi MCP mỗi tháng là gần như không thể sử dụng được. Một lệnh "tạo nút" đơn giản có thể cần đến 2-3 lượt gọi (đọc file, tạo phần tử, xác minh kết quả). Bạn sẽ dùng hết số lượt gọi hàng tháng chỉ trong một phiên ngắn.

Nếu bạn muốn thực sự làm việc với các MCP agent, gói Professional với giá 12 USD/tháng là điểm khởi đầu. 200 lượt gọi mỗi ngày là đủ cho một vài phiên thiết kế.

Thế nào được tính là một lượt gọi? Mỗi lần gọi công cụ MCP là một lượt gọi. Khi một agent đọc cấu trúc file của bạn - đó là một lượt gọi. Khi nó tạo một thành phần, lại mất một lượt gọi khác. Chụp ảnh màn hình kết quả để xác minh lại cần một lượt gọi khác. Tác vụ "tạo một màn hình đơn giản" điển hình có thể cần đến 10-15 lượt gọi. Một tác vụ phức tạp hơn, 30-50 lượt.

Với 200 lượt gọi mỗi ngày trên gói Professional, bạn có thể thoải mái thực hiện 5-10 phiên thiết kế mỗi ngày. Đó là quá đủ cho hầu hết các nhà thiết kế.

AI credit được tính riêng biệt với lượt gọi MCP. Phần ghi công bao gồm Figma Make và các tính năng AI khác trong ứng dụng. Việc gọi MCP dành riêng cho quyền truy cập của agent bên ngoài.

Ví dụ minh họa: Kết nối và xác minh

Hãy cùng xem qua quy trình thiết lập hoàn chỉnh. Bạn sẽ sử dụng Claude Code, nhưng các khái niệm này áp dụng cho bất kỳ client nào.

Bước 1: Cài đặt plugin.

claude plugin install figma@claude-plugins-official

Kết quả đầu ra trên terminal: "Plugin Figma đã được cài đặt thành công."

Bước 2: Bắt đầu cuộc trò chuyện và đề cập đến Figma.

Mở Claude Code và nói điều gì đó kích hoạt quyền truy cập Figma:

List the pages in my Figma file: [dán URL file của bạn]

Bước 3: Xác thực.

Lần đầu tiên, Claude Code sẽ mở trình duyệt của bạn đến màn hình OAuth của Figma. Nhấp vào "Allow". Trình duyệt sẽ chuyển hướng. Quay lại terminal, bạn sẽ thấy xác nhận.

Bước 4: Xác minh kết nối.

Claude Code sẽ phản hồi bằng một danh sách các trang trong file của bạn. Ví dụ:

Your file "Mobile App Redesign" has 5 pages:
- Cover
- Components
- Home Screen
- Profile
- Settings

Nếu bạn thấy các trang được liệt kê, kết nối hoạt động. Nếu bạn nhận được lỗi, hãy kiểm tra:

• URL file Figma của bạn có chính xác không?

• Bạn có quyền chỉnh sửa file không?

• Bạn đã đăng nhập vào đúng tài khoản Figma trong trình duyệt của mình chưa?

✅ Kiểm tra nhanh: Bạn đã thiết lập MCP và yêu cầu Claude Code liệt kê các trang trong file Figma của bạn. Nó hiển thị các trang chính xác. Điều này xác nhận điều gì?

Câu trả lời: OAuth token hợp lệ, kết nối MCP đang hoạt động và agent có thể đọc file của bạn. Bạn đã sẵn sàng bắt đầu tạo thiết kế thông qua agent.

Những gì agent có thể (và không thể) thấy

Sau khi kết nối, AI agent có quyền truy cập vào:

• Cấu trúc file — trang, khung, layer

• Thành phần — thư viện thành phần, instance, biến thể của bạn

• Token thiết kế — màu sắc, kiểu chữ, biến khoảng cách

• Nội dung văn bản — nội dung của mỗi lớp văn bản

• Thuộc tính bố cục — cài đặt Auto Layout, ràng buộc, khoảng cách lề

Hiện tại, agent không thể truy cập:

• Hình ảnh — nó không thể xem hoặc tạo hình ảnh raster

• Tạo mẫu — không có tương tác, chuyển tiếp hoặc luồng

• Bình luận — nó không thể đọc hoặc ghi bình luận Figma

• Lịch sử phiên bản — không có quyền truy cập vào các phiên bản file trước đó

Những hạn chế này rất quan trọng. Nếu thiết kế của bạn phụ thuộc nhiều vào nội dung hình ảnh hoặc tương tác nguyên mẫu, agent không thể hỗ trợ những phần đó. Nhưng đối với bố cục, thành phần, kiểu chữ và khoảng cách - nó có mọi thứ cần thiết.

Thực hành: Kiểm tra kết nối

Hoàn thành các bước sau để xác minh thiết lập của bạn:

1. Cài đặt kết nối Figma MCP trong ứng dụng AI ưa thích của bạn (khuyến nghị Claude Code)

2. Xác thực thông qua quy trình OAuth

3. Kiểm tra bằng cách yêu cầu agent liệt kê các trang trong một trong các file Figma của bạn

4. Xác minh bằng cách yêu cầu nó mô tả các thành phần trên một trang

Nếu cả 4 bước đều thành công, bạn đã sẵn sàng cho Bài học 4 - nơi bạn sẽ tạo thiết kế đầu tiên của mình thông qua AI agent.

Nếu bước 3 hoặc 4 thất bại, hãy khắc phục sự cố:

• Kiểm tra lại định dạng URL file (nó phải bắt đầu bằng https://www.figma.com/)

• Xác nhận bạn có quyền chỉnh sửa, không chỉ quyền xem

• Thử ngắt kết nối và xác thực lại

Những điểm chính cần ghi nhớ

• MCP (Model Context Protocol) là một tiêu chuẩn mở cho phép bất kỳ AI agent nào kết nối với Figma - nó không bị giới hạn ở một công cụ cụ thể

• Figma MCP Server endpoint là https://mcp.figma.com/mcp — cùng một URL cho mọi client

• Xác thực sử dụng OAuth (phê duyệt trình duyệt), không phải API key thủ công

• Gói miễn phí cung cấp cho bạn 6 lượt gọi MCP mỗi tháng — thực chất là gói chỉ để thử nghiệm

• Gói Professional (12 USD/tháng) với 200 lượt gọi/ngày là điểm khởi đầu thực tế cho công việc thực sự

• Agent có thể xem cấu trúc file, các thành phần, token, văn bản và bố cục — nhưng không thể xem hình ảnh, nguyên mẫu hoặc nhận xét