Command Palette

Search for a command to run...

UnylyUnyly
Browse all

@Nvanexan/Figma

FreeNot checked

Enables extraction of design context from Figma files as CSS-like properties and provides tools to render Figma nodes as images. It integrates with AI agents vi

GitHubEmbed

About

Enables extraction of design context from Figma files as CSS-like properties and provides tools to render Figma nodes as images. It integrates with AI agents via the Model Context Protocol to facilitate design-to-code workflows by providing layout, style, and typography information.

README

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).

Parameter Type Required Description
figmaUrl string yes Figma file URL (with optional node-id)
depth number no Node tree depth, 1–10 (default: 3)

get_figma_image

Exports a rendered image of a Figma node.

Parameter Type Required Description
figmaUrl string yes Figma URL with a node-id
format string no png, jpg, svg, pdf (default: png)
scale number no 0.01–4 (default: 2)

Development

npm install
npm run build
npm test

Scripts

Script Description
npm run build Compile TypeScript to dist/
npm run lint Lint source with ESLint
npm test Run tests
npm run test:watch Run tests in watch mode
npm run test:coverage Run tests with coverage report

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

from github.com/nvanexan/figma-mcp

Installing @Nvanexan/Figma

This server has no published package — it is built from source. Open the repository and follow its README.

▸ github.com/nvanexan/figma-mcp

FAQ

Is @Nvanexan/Figma MCP free?

Yes, @Nvanexan/Figma MCP is free — one-click install via Unyly at no cost.

Does @Nvanexan/Figma need an API key?

No, @Nvanexan/Figma runs without API keys or environment variables.

Is @Nvanexan/Figma hosted or self-hosted?

A hosted option is available: Unyly runs the server in the cloud, no local setup required.

How do I install @Nvanexan/Figma in Claude Desktop, Claude Code or Cursor?

Open @Nvanexan/Figma on unyly.org, pick your client tab (Claude Desktop, Claude Code, Cursor) and press Install — the config is generated automatically, no JSON editing.

Related MCPs

Compare @Nvanexan/Figma with

Not sure what to pick?

Find your stack in 60 seconds

Author?

Embed badge for your README

Browse similar

All development MCPs