Framelink Figma

Provides access to Figma data for Cursor and AI tools via an MCP server using NCDS, enabling precise design implementation.

typescript

0

GitHub Stars

typescript

Language

7 months ago

First Indexed

3 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "violet4795-figma-developer-mcp-ncds": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp-ncds",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ],
      "env": {
        "PORT": "<PORT>",
        "FIGMA_API_KEY": "YOUR-KEY"
      }
    }
  }
}

You set up and run the Figma MCP server to let an AI coding agent access Figma design data through the NCDS framework. This enables rapid, layout-accurate UI implementation by translating Figma metadata into executable code while minimizing unnecessary context.

How to use

Install and run the MCP server in your development environment, then connect your MCP client or IDE to the server using the provided stdio configuration. You supply a Figma file link or a frame to Cursor or your AI client, request design-to-code tasks (such as implementing a UI from the Figma data), and the server responds with code and metadata derived from the Figma file.

How to install

Prerequisites: ensure you have Node.js and npm installed on your system. You will also need a Figma API access token to authorize requests.

{
  "mcpServers": {
    "ncds_figma_mcp": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp-ncds", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Additional setup and notes

If you prefer to specify environment variables, you can provide them in the env section when configuring the MCP client. The server supports FIGMA_API_KEY and PORT as optional environment variables to customize startup and API access.

{
  "mcpServers": {
    "ncds_figma_mcp": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp-ncds", "--figma-api-key=YOUR-KEY", "--stdio"],
      "env": [
        {"name": "FIGMA_API_KEY", "value": "YOUR-KEY"},
        {"name": "PORT", "value": "3000"}
      ]
    }
  }
}

Security and usage notes

Only use the MCP server with trusted clients. Keep your Figma API key secret and rotate it if you suspect exposure. When possible, limit the scope of the Figma tokens to the minimum required access for the tasks you perform.