Figma-Context-MCP

Cho agent đọc bố cục, màu và kiểu chữ từ một file Figma thật để dựng đúng giao diện theo bản thiết kế.

Ưu, nhược và chỗ chưa rõ

Figma-Context-MCP: ưu, nhược và chỗ chưa rõ, mỗi dòng kèm nguồn
ƯuREADME ghi rằng server rút gọn dữ liệu Figma trả về, chỉ giữ thông tin bố cục và kiểu dáng, để agent đọc ít chữ hơn và dựng giao diện sát bản thiết kế hơn so với dán ảnh chụp màn hình.README, How it works
ƯuMột người dùng thử cả hai server với GPT-4.1 trên một hộp thoại cài đặt và báo Framelink cho kết quả tốt hơn; MCP chính thức của Figma bỏ sót font, màu và nền.Issue #178 (bình luận 2025-07-08)
ƯuBài review của ChatForest (do AI viết, không chạy thử) ghi rằng server dùng được với mọi tài khoản Figma, không cần ghế trả phí, và giữ nguyên cấu trúc lồng nhau của component.ChatForest, cập nhật 2026-08-13
NhượcNhiều người gặp lỗi 429 Too Many Requests từ Figma, kể cả ở lần gọi đầu ngày. Tác giả nói server không tự giới hạn; giới hạn đến từ gói Figma của chủ file. Issue vẫn mở.Issue #258
NhượcTelemetry gửi nguyên câu báo lỗi, chỉ xoá API key, nên mã file Figma và mã node có thể bị gửi đi. Bản sửa ngày 2026-09-05 chưa vào nhánh main tại commit mình đọc.Issue #354
NhượcCấu hình mẫu trong README đặt token ngay trong dòng lệnh (--figma-api-key=YOUR-KEY), nên token có thể nằm trong lịch sử shell và danh sách tiến trình. README cũng cho đặt FIGMA_API_KEY trong mục env.ChatForest, cập nhật 2026-08-13
Chưa rõNhánh main dừng ở commit ngày 2026-06-24 và bản npm mới nhất là 0.13.2 (2026-06-18); việc mới nằm ở các nhánh khác như beta. Chưa rõ khi nào có bản phát hành tiếp.CHANGELOG tại commit c083d65
Chưa rõREADME chỉ nêu tên Cursor; cách cài cho Claude Code nằm trong trang tài liệu riêng của tác giả.README, Getting Started

Khi nên dùng

  • Bạn có bản thiết kế trong Figma và muốn agent dựng giao diện theo đúng khoảng cách, màu và font trong file đó.

Khi không nên dùng

  • Tài khoản Figma của bạn (hoặc của chủ file) là ghế xem miễn phí và bạn cần gọi nhiều lần, hoặc dự án không cho gửi dữ liệu telemetry ra ngoài.

Cách cài

Cursor
{ "mcpServers": { "Framelink MCP for Figma": { "command": "npx", "args": ["-y", "[email protected]", "--figma-api-key=YOUR-KEY", "--stdio"] } } }
Theo tài liệu của tác giả
Claude Code
claude mcp add Framelink_Figma_MCP -- npx -y [email protected] --figma-api-key=YOUR-KEY --stdio
Theo tài liệu của tác giả

Nó chạm vào những gì

File đọc và ghi
Đọc FIGMA_API_KEY từ biến môi trường hoặc file .env. Công cụ download_figma_images ghi ảnh vào thư mục IMAGE_DIR, mặc định là thư mục đang chạy, và chặn đường dẫn ra ngoài thư mục đó.
Gọi mạng
Gọi api.figma.com/v1 bằng token của bạn. Telemetry bật sẵn, gửi sự kiện tới us.i.posthog.com, có bật đoán vị trí theo IP (GeoIP); tắt bằng FRAMELINK_TELEMETRY=off hoặc DO_NOT_TRACK=1.
Script lúc cài
Gói npm figma-developer-mcp không có postinstall. Không có hook.
Tiến trình
npx bật một server MCP chạy qua stdio (hoặc HTTP nếu bạn chọn) suốt phiên làm việc.

Đọc từ: figma.ts#L30, client.ts#L10-L11, client.ts#L105-L120, config.ts#L157-L162, bin.ts#L60

Mục này chạy mã trên máy bạn với quyền của tài khoản bạn. Theo tài liệu Claude Code, hook và MCP server chạy ngoài sandbox. Đọc phần trên và file của tác giả trước khi cài. Tài liệu bảo mật plugin

UI và thiết kế

Cả nhóm →