Máy chủ MCP (Model Context Protocol) của Figma tạo ra kết nối trực tiếp giữa các tệp thiết kế Figma của bạn và các agent lập trình như Claude Code và Cursor. Thay vì phải chuyển đổi thiết kế thành mã thủ công — kiểm tra giá trị khoảng cách, sao chép mã màu hex, tái tạo cấu trúc component — agent lập trình sẽ đọc trực tiếp tệp Figma của bạn và tạo ra mã phù hợp với hệ thống thiết kế.
Kết nối MCP là hai chiều. Các agent lập trình đọc dữ liệu thiết kế từ Figma (component, biến, cấu trúc layout). Chúng cũng có thể ghi ngược lại canvas — đẩy các trạng thái đã được mã hóa, biến thể responsive, và màn hình đã triển khai dưới dạng các layer Figma có thể chỉnh sửa để designer xem xét. Điều này loại bỏ hoàn toàn nút thắt cổ chai trong việc bàn giao thiết kế truyền thống.
Điểm Quan Trọng
Việc thiết lập mất dưới 10 phút, không tốn chi phí (MCP miễn phí trong giai đoạn beta), và ngay lập tức biến đổi quy trình từ thiết kế sang mã. Agent lập trình nhìn thấy ngữ cảnh hệ thống thiết kế của bạn — component, màu sắc, token khoảng cách — và tạo ra mã phù hợp. Không còn phải đoán giá trị khoảng cách hoặc ước lượng màu sắc từ ảnh chụp màn hình. Máy chủ MCP là cầu nối giữa công cụ thiết kế và trình soạn thảo mã mà các nhóm sản phẩm đã mong muốn trong một thập kỷ.
Hiểu Về Kiến Trúc MCP
MCP (Model Context Protocol) là một tiêu chuẩn mở được tạo ra bởi Anthropic cho phép các AI agent kết nối với các nguồn dữ liệu bên ngoài. Đây là cùng một giao thức hỗ trợ kết nối giữa Claude và các công cụ như Google Drive, Slack, và GitHub. Máy chủ MCP của Figma hiển thị các tệp thiết kế của bạn thông qua giao thức này, làm cho chúng có thể đọc được bởi bất kỳ agent lập trình tương thích MCP nào.
| Thành phần | Chức năng | Nhà cung cấp |
|---|---|---|
| Figma MCP Server | Hiển thị dữ liệu thiết kế qua giao thức MCP | Figma (được host tại mcp.figma.com/mcp) |
| Agent lập trình (client) | Đọc dữ liệu thiết kế và tạo mã | Claude Code, Cursor, Windsurf, v.v. |
| Xác thực | OAuth qua tài khoản Figma | Đăng nhập Figma của bạn |
| Dữ liệu hiển thị | Component, biến, style, layout | Các tệp Figma của bạn |
| Quyền ghi | Đẩy trạng thái đã mã hóa ngược lại canvas | Qua kỹ năng /figma-use |
Thiết lập: Claude Code (5 Phút)
Bước 1: Mở terminal và điều hướng đến thư mục dự án của bạn.
Bước 2: Khởi động Claude Code với máy chủ MCP đã được cấu hình. Thêm máy chủ Figma MCP vào cấu hình Claude Code của bạn (thường ở ~/.claude/mcp_servers.json hoặc .mcp.json của dự án):
Bước 3: Khi Claude Code lần đầu kết nối với máy chủ Figma MCP, bạn sẽ được nhắc xác thực qua OAuth — đăng nhập bằng tài khoản Figma của bạn. Điều này cấp quyền đọc các tệp thiết kế của bạn.
Bước 4: Kiểm tra kết nối bằng cách yêu cầu Claude Code mô tả một tệp Figma: "Đọc tệp Figma tại [dán URL tệp Figma] và mô tả cấu trúc component của nó." Nếu nó trả về tên component, biến và thông tin layout, kết nối đang hoạt động.
Thiết lập: Cursor (5 Phút)
Bước 1: Mở Cursor Settings → MCP Servers.
Bước 2: Thêm một máy chủ MCP mới với URL: https://mcp.figma.com/mcp
Bước 3: Xác thực qua OAuth khi được nhắc — cùng đăng nhập Figma như ở trên.
Bước 4: Trong chat AI của Cursor, tham chiếu tệp Figma của bạn: "Đọc thiết kế tại [Figma URL] và tạo một React component cho phần header sử dụng Tailwind CSS." Cursor đọc ngữ cảnh thiết kế và tạo mã phù hợp.
📬 Thấy hữu ích không?
Một insight AI thực tế mỗi tuần. Cộng với gói prompt miễn phí khi đăng ký.
Đăng ký miễn phí →Dữ Liệu Mà Máy Chủ MCP Hiển Thị
Hiểu rõ những gì agent lập trình có thể "nhìn thấy" giúp bạn viết prompt tốt hơn và tổ chức các tệp Figma để MCP có thể đọc được:
| Loại Dữ Liệu | Những Gì Được Hiển Thị | Cách Agent Lập Trình Sử Dụng |
|---|---|---|
| Component | Tên, thuộc tính, biến thể, instance | Ánh xạ đến thư viện component mã |
| Biến màu | Tên, giá trị hex, bộ sưu tập | Ánh xạ đến biến CSS hoặc cấu hình Tailwind |
| Style văn bản | Font, kích thước, độ đậm, chiều cao dòng | Ánh xạ đến class typography |
| Khoảng cách | Giá trị padding, gap, margin | Ánh xạ đến token khoảng cách |
| Layout | Hướng auto layout, căn chỉnh, wrap | Ánh xạ đến thuộc tính flexbox/grid |
| Cấu trúc layer | Mối quan hệ cha-con | Ánh xạ đến cấu trúc DOM |
Ý nghĩa thực tế: bạn đặt tên càng tốt trong Figma, agent lập trình càng hiểu chúng tốt hơn. "Button/Primary/Large" ánh xạ rõ ràng đến một code component. "Frame 147" không cho agent biết gì hữu ích. Đây là cùng nguyên tắc khi chuẩn bị cho Design Agent — hệ thống thiết kế được tổ chức tốt sẽ tạo ra kết quả AI tốt hơn bất kể AI đang thiết kế hay lập trình.
Quy Trình Hai Chiều Trong Thực Tế
Sức mạnh thực sự của MCP không chỉ là đọc từ Figma — mà là khả năng ghi ngược lại hoàn thiện chu trình. Khi developer triển khai các trường hợp đặc biệt mà designer không chỉ định (trạng thái lỗi, trạng thái loading, trạng thái trống, breakpoint responsive), những triển khai đó có thể được đẩy ngược lại canvas Figma dưới dạng frame có thể chỉnh sửa. Designer xem xét các trạng thái mã thực tế mà không cần chuyển sang xem trước mã.
Quy trình này loại bỏ nguồn gốc phổ biến nhất của xung đột thiết kế-phát triển: khoảng cách giữa "những gì được thiết kế" và "những gì được xây dựng." Với MCP, cả hai bên làm việc từ cùng một nguồn sự thật, và các thay đổi lan truyền theo hai chiều. Quy trình chi tiết từng bước có trong hướng dẫn Figma + Claude Code của chúng tôi.
Để có prompt tốt hơn khi sử dụng các agent kết nối MCP — dù để đọc thiết kế hay tạo mã — Prompt Optimizer miễn phí thêm cấu trúc tạo ra kết quả chính xác hơn. Để tối ưu hóa một cú nhấp bên trong ChatGPT, Claude, và Gemini, TresPrompt mang nó trực tiếp đến thanh bên của bạn.
Câu Hỏi Thường Gặp
Máy chủ MCP có miễn phí không?
Có — máy chủ MCP miễn phí trong giai đoạn beta. Không có AI credit nào được tiêu thụ cho kết nối MCP. Figma chưa công bố giá cho MCP sau beta, nhưng chi phí hạ tầng máy chủ là tối thiểu (đây là quyền đọc, không phải tính toán), vì vậy có khả năng sẽ vẫn miễn phí hoặc chi phí rất thấp.
MCP có hoạt động với các công cụ khác ngoài Claude Code và Cursor không?
Có — bất kỳ agent tương thích MCP nào đều có thể kết nối. Điều này bao gồm Windsurf, Cline, và các công cụ khác hỗ trợ giao thức MCP. URL máy chủ (https://mcp.figma.com/mcp) giống nhau bất kể client nào kết nối.
MCP có thể đọc bất kỳ tệp Figma nào tôi có quyền truy cập không?
Có — MCP kế thừa quyền tài khoản Figma của bạn. Nếu bạn có thể xem một tệp trong Figma, MCP có thể đọc nó. Nếu bạn không có quyền truy cập, MCP không thể đọc nó. Điều này có nghĩa là các tệp nhóm, tệp được chia sẻ, và tệp cá nhân của bạn đều có thể truy cập qua MCP.
Có rủi ro agent lập trình sửa đổi tệp Figma của tôi không?
Khả năng ghi ngược lại là tùy chọn và sử dụng một kỹ năng cụ thể (/figma-use). Agent sẽ không sửa đổi tệp của bạn trừ khi được hướng dẫn rõ ràng để đẩy trạng thái đã mã hóa ngược lại canvas. Quyền đọc là mặc định; quyền ghi yêu cầu gọi có chủ ý. Ngay cả với quyền ghi, agent tạo frame mới thay vì sửa đổi frame hiện có, vì vậy thiết kế gốc của bạn được bảo tồn.
Tôi có nên thiết lập MCP ngay cả khi không lập trình không?
Nếu bạn là designer không lập trình, MCP có giá trị trực tiếp hạn chế — nó chủ yếu dành cho các agent lập trình đọc thiết kế của bạn. Tuy nhiên, hiểu cách MCP hoạt động giúp bạn cộng tác hiệu quả hơn với các developer sử dụng nó. Bạn cũng có thể thử nghiệm bằng cách kết nối Claude.ai với các tệp Figma để phân tích thiết kế, nghiên cứu và tạo tài liệu (ngay cả khi không viết mã).
Tiết lộ: Một số liên kết trong bài viết này là liên kết affiliate. Chúng tôi chỉ đề xuất các công cụ đã được kiểm tra cá nhân và sử dụng thường xuyên. Xem chính sách tiết lộ đầy đủ của chúng tôi.