KSN Figma MCP

Local Figma MCP bridge that connects an MCP client to the Figma Plugin API.

MCP client -> mcp.js -> bridge-server.js -> Figma plugin UI WebSocket -> plugin/code.ts -> Figma Plugin API

This follows the same broad shape as Figma's MCP workflows: read design context, export screenshots/assets, inspect variables/styles, map nodes to code, upload assets, and write to the canvas with a use_figma tool. Official remote-only features such as creating new Figma files, hosted auth, remote libraries, shader libraries, and Figma's private code-generation pipeline are not reproducible from a local plugin alone.

Setup

Install root dependencies:

npm install

Install and build the Figma plugin:

npm --prefix plugin install
npm run build:plugin

Import the plugin in Figma Desktop:

1. Open Figma Desktop.
2. Go to Plugins -> Development -> Import plugin from manifest.
3. Select plugin/manifest.json.
4. Run KSN Figma MCP Bridge from Plugins -> Development.

Start the bridge:

npm run bridge

Add the MCP server to your client, replacing the path if needed:

codex mcp add ksn-figma-mcp node /Users/11502010/Desktop/Innovations/RD/ksn-figma-mcp/mcp.js

Use With npx

Start the local bridge:

npx -y ksn-figma-mcp bridge

Print the Figma plugin manifest path, then import that manifest in Figma Desktop:

npx -y ksn-figma-mcp plugin-path

Add the MCP server to Codex:

codex mcp add ksn-figma-mcp -- npx -y ksn-figma-mcp

Tools

• check_bridge_status
• whoami
• get_metadata
• get_design_context
• get_figjam
• get_screenshot
• download_assets
• upload_assets
• get_variable_defs
• search_design_system
• add_code_connect_map
• get_code_connect_map
• use_figma

use_figma Example

const frame = figma.createFrame();
frame.name = params.name || "Generated frame";
frame.resize(360, 240);
frame.fills = [{ type: "SOLID", color: { r: 1, g: 1, b: 1 } }];
figma.currentPage.appendChild(frame);
figma.viewport.scrollAndZoomIntoView([frame]);
return helpers.serializeNode(frame, { detail: true, depth: 1 });

use_figma intentionally executes JavaScript in your active Figma file. Treat it like a local developer tool: only run code from sources you trust.

Environment

• FIGMA_MCP_BRIDGE_PORT: bridge port, default 3845
• FIGMA_MCP_BRIDGE_URL: MCP bridge URL, default http://127.0.0.1:3845
• FIGMA_MCP_REQUEST_TIMEOUT_MS: plugin request timeout, default 60000
• FIGMA_MCP_MAX_BODY_BYTES: HTTP body limit, default 50MB

Verify

npm run check