Giới thiệu

Hướng dẫn lấy API Key của Figma và cấu hình giao thức MCP (Model Context Protocol).

Lấy API Key Figma

Chuẩn bị

Trước khi thực hiện các bước lấy API Key Figma, cần đảm bảo:

• Tài khoản Figma hợp lệ (đăng ký tại https://www.figma.com/)
• Quyền quản trị viên (nếu cần truy cập tài nguyên nhóm hoặc doanh nghiệp)

Các bước chi tiết

1. Đăng nhập tài khoản Figma Truy cập trang web Figma và đăng nhập. Nhấp vào biểu tượng hồ sơ ở góc trên bên phải, chọn "Settings" (Cài đặt) từ menu thả xuống.
2. Truy cập quản lý token cá nhân Trên trang cài đặt, tìm mục "Personal Access Tokens" (Token truy cập cá nhân) ở thanh điều hướng bên trái và nhấp vào.
3. Tạo token mới Nhấp vào nút "Create a new personal access token" (Tạo token truy cập cá nhân mới). Hệ thống sẽ yêu cầu bạn nhập tên/mô tả cho token, nên sử dụng tên mô tả rõ ràng (ví dụ: "Tích hợp AI Cursor" hoặc "Đồng bộ hệ thống thiết kế") để dễ quản lý sau này.
4. Cài đặt phạm vi quyền Tùy theo nhu cầu sử dụng, chọn phạm vi quyền phù hợp. Figma API hỗ trợ nhiều cấp độ quyền như:

• file:read - Đọc nội dung tệp
• file:write - Ghi thay đổi tệp
• team:read - Đọc thông tin nhóm
• plugin:read - Đọc dữ liệu plugin

5. Tạo và lưu trữ an toàn token Nhấp vào nút "Create token" (Tạo token), hệ thống sẽ sinh ra một khóa API duy nhất.

Lưu ý quan trọng: Khóa này chỉ hiển thị một lần, vui lòng sao chép và lưu trữ ngay lập tức.

Cấu hình máy chủ MCP Figma

Lựa chọn máy chủ MCP

Hiện có nhiều lựa chọn máy chủ MCP cho Figma, dưới đây là hai giải pháp phổ biến:

Lựa chọn 1: Framelink (MCP Server Figma)

Framelink là dự án mã nguồn mở được thiết kế riêng cho Figma. Đặc điểm nổi bật:

• Lấy dữ liệu thiết kế qua API Figma, đơn giản hóa và dịch chuyển phản hồi
• Giảm lượng thông tin cung cấp cho mô hình, nâng cao độ chính xác và liên quan của phản hồi AI
• Hỗ trợ tải xuống hàng loạt hình ảnh SVG và PNG trong tệp Figma

Lựa chọn 2: Spider Design MCP

Spider Design MCP là bộ định tuyến thông minh tự động chọn giữa MasterGo MCP hoặc Figma MCP dựa trên URL. Ưu điểm:

• Phát hiện tự động nguồn tệp thiết kế (Figma hoặc MasterGo)
• Cung cấp giao diện thống nhất, đơn giản hóa quản lý đa nền tảng
• Hỗ trợ chế độ gỡ lỗi, thuận tiện cho việc kiểm tra

Hướng dẫn cài đặt và cấu hình

Cài đặt trực tiếp qua NPM

# Cài đặt Framelink MCP
npx figma-developer-mcp --figma-api-key=<Khóa API Figma của bạn>

# Hoặc cài đặt Spider Design MCP
npm install -g spider-design-mcp

Cấu hình biến môi trường

Tạo file .env và thêm khóa API Figma:

FIGMA_API_KEY=Khóa_API_Figma_của_bạn
PORT=3333  # Tùy chọn, cổng mặc định là 3333

Cấu hình Cursor

Sau khi cấu hình MCP Figma, có thể truy vấn dữ liệu thiết kế Figma trực tiếp trong Cursor, thực hiện chuyển đổi thiết kế sang mã nguồn liền mạch.

Các bước cấu hình:

1. Mở cài đặt Cursor Trong Cursor, mở giao diện cài đặt (phím tắt Ctrl+, hoặc Cmd+,).
2. Tìm kiếm phần cấu hình MCP Trong cài đặt, tìm kiếm từ khóa "MCP" hoặc di chuyển đến phần cấu hình MCP.
3. Thêm máy chủ MCP Figma Tùy chọn máy chủ MCP, thêm cấu hình tương ứng:

Đối với Framelink MCP:

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=API_ACCESS_TOKEN",
        "--stdio"
      ]
    }
  }
}

Đối với Spider Design MCP:

{
  "mcpServers": {
    "Spider Design MCP": {
      "command": "npx",
      "args": [
        "-y",
        "spider-design-mcp",
        "--figma-api-key=FIGMA_ACCESS_KEY",
        "--token=MASTERGO_ACCESS_TOKEN"
      ]
    }
  }
}

4. Kiểm tra kết nối Lưu cấu hình và khởi động lại Cursor. Sau đó, thử kéo thả liên kết tệp Figma vào bảng Composer và đặt câu hỏi liên quan đến thiết kế để xác minh kết nối.

Cấu hình các công cụ AI khác

Ngoài Cursor, máy chủ MCP Figma cũng hỗ trợ các công cụ lập trình AI khác:

Cấu hình Windsurf

Cách cấu hình Windsurf tương tự như Cursor, chỉ cần thêm cấu hình máy chủ MCP vào tệp cài đặt.

Cấu hình Cline

Cline cũng dựa trên giao thức MCP, có thể thêm máy chủ MCP Figma vào tệp cấu hình.