Figma MCP NCDS

figma-mcp-ncds

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": {
    "nhn-commerce-fe-figma-mcp-ncds": {
      "command": "npx",
      "args": [
        "-y",
        "@ncds/figma-mcp",
        "--figma-api-key=YOUR-KEY",
        "--_stdio"
      ],
      "env": {
        "PORT": "8000",
        "FIGMA_API_KEY": "YOUR-KEY"
      }
    }
  }
}

This MCP server provides a dedicated bridge between Figma design data and coding agents by exposing a capable MCP interface that feeds design metadata to models. It enables tools like Cursor to request Figma content through a streamlined, translated context, improving accuracy when turning designs into code.

How to use

Open your MCP client and connect to the NCDS Figma MCP server. Provide a link to a Figma file, frame, or group, then request design-to-code actions such as implementing a design in your editor. The MCP server simplifies responses by translating Figma metadata into the most relevant layout and styling details, helping the AI generate accurate implementations more efficiently.

How to install

Prerequisites you need before running the MCP server: Node.js and npm installed on your system.

Create a configuration file for the MCP server with the following content.

{
  "mcpServers": {
    "NCDS Figma MCP": {
      "command": "npx",
      "args": ["-y", "@ncds/figma-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Additional sections

Configuration, security, and practical notes for running this MCP server are provided below to help you get started quickly and securely.

Available tools

cursor_integration

Cursor AI coding agent can request and work with Figma data through the MCP server to implement designs in the editor.

figma_mcp

MCP server that wires Figma API data into a usable context for AI agents, translating layout and styling metadata for code generation.