Which integrations are available for this server?

Provides tools to extract design context from Figma files, including layout, styles, typography, and effects as CSS-like properties, and allows exporting rendered images of Figma nodes in various formats.

How do I use @nvanexan/figma-mcp?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@@nvanexan/figma-mcp extract the CSS styles from https://www.figma.com/file/Abc123/design?node-id=1-1" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

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

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:

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)
Push the commit and tag:
git push origin main --follow-tags
The CI pipeline will automatically run tests and publish to npm.