@nvanexan/figma-mcp

Figma MCP server for GitHub Copilot coding agent — PAT auth via STDIO.

Extracts design context (layout, styles, typography, effects) from Figma files as CSS-like properties, and exports rendered images of Figma nodes. Built on the Model Context Protocol.

Install

npm install -g @nvanexan/figma-mcp

Or use directly with npx:

npx @nvanexan/figma-mcp

Setup

Set your Figma Personal Access Token as an environment variable:

export FIGMA_API_KEY=your-figma-pat

You can generate a token in Figma under Settings > Personal Access Tokens.

GitHub Copilot / Claude Code

Add the server to your MCP configuration:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@nvanexan/figma-mcp"],
      "env": {
        "FIGMA_API_KEY": "your-figma-pat"
      }
    }
  }
}

Tools

get_figma_context

Extracts design context from a Figma URL and returns a simplified node tree with CSS-like properties (flexbox layout, colors, typography, effects, dimensions).

get_figma_image

Exports a rendered image of a Figma node.

Development

npm install
npm run build
npm test

Scripts

Releasing

This project uses GitHub Actions for CI and publishing.

To release a new version:

1. Update the version in package.json following semver:

   npm version patch  # 0.1.0 → 0.1.1 (bug fixes)
   npm version minor  # 0.1.0 → 0.2.0 (new features)
   npm version major  # 0.1.0 → 1.0.0 (breaking changes)

2. Push the commit and tag:

   git push origin main --follow-tags

3. The CI pipeline will automatically run tests and publish to npm.

License

MIT