loading…
Search for a command to run...
loading…
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
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.
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.
npm install -g @nvanexan/figma-mcp
Or use directly with npx:
npx @nvanexan/figma-mcp
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.
Add the server to your MCP configuration:
{
"mcpServers": {
"figma": {
"command": "npx",
"args": ["-y", "@nvanexan/figma-mcp"],
"env": {
"FIGMA_API_KEY": "your-figma-pat"
}
}
}
}
get_figma_contextExtracts 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_imageExports 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) |
npm install
npm run build
npm test
| 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 |
This project uses GitHub Actions for CI and publishing.
To release a new version:
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)
git push origin main --follow-tags
MIT
Добавь это в claude_desktop_config.json и перезапусти Claude Desktop.
{
"mcpServers": {
"nvanexan-figma-mcp": {
"command": "npx",
"args": []
}
}
}