Kết nối agent với Figma qua Framelink MCP · Guides

Bài này hướng dẫn cho agent lập trình truy cập dữ liệu Figma để dựng thiết kế bằng bất kỳ framework nào chỉ trong một lần.

Framelink MCP for Figma là một server dùng Model Context Protocol (MCP), cho Cursor và các công cụ lập trình có AI khác truy cập file Figma của bạn. Khi Cursor có dữ liệu thiết kế Figma, nó dựng thiết kế chính xác ngay lần đầu tốt hơn hẳn so với các cách khác như dán ảnh chụp màn hình.

Xem thêm hướng dẫn quickstart.

Demo

Xem video demo dựng giao diện trong Cursor bằng dữ liệu thiết kế Figma

Cách hoạt động

Mở khung chat của IDE (ví dụ agent mode trong Cursor).
Dán link tới một file, frame hoặc group trong Figma.
Yêu cầu Cursor làm gì đó với file Figma, ví dụ dựng thiết kế.
Cursor sẽ lấy metadata liên quan từ Figma và dùng nó để viết code.

MCP server này được thiết kế riêng cho Cursor. Trước khi trả ngữ cảnh (context) lấy từ Figma API, server rút gọn và chuyển đổi phản hồi để model chỉ nhận thông tin bố cục và định dạng liên quan nhất.

Giảm lượng ngữ cảnh đưa cho model giúp AI chính xác hơn và câu trả lời sát yêu cầu hơn.

Bắt đầu

Nhiều trình soạn code và AI client khác dùng một file cấu hình để quản lý MCP server.

Bạn cấu hình server figma-developer-mcp bằng cách thêm đoạn sau vào file cấu hình.

macOS / Linux

json

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

Windows

json

{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Bạn cũng có thể đặt FIGMA_API_KEY và PORT trong trường env.

Muốn biết thêm cách cấu hình Framelink MCP for Figma, xem tài liệu Framelink.

Tìm hiểu thêm

Framelink MCP for Figma đơn giản nhưng mạnh. Để tận dụng hết, bạn có thể tìm hiểu thêm tại trang Framelink.

Nguồn

Dịch và biên tập từ https://raw.githubusercontent.com/GLips/Figma-Context-MCP/main/README.md, giấy phép MIT.