@Nvanexan/Figma
FreeNot checkedEnables 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
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:
- Update the version in
package.jsonfollowing 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.
License
MIT
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-mcpFAQ
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
GitHub
PRs, issues, code search, CI status
by GitHubFilesystem
Secure file operations with configurable access controls.
Memory
Knowledge graph-based persistent memory system.
Template MCP Server
A CLI tool to create a new Model Context Protocol server project with TypeScript support, dual transport options, and an extensible structure
by mcpdotdirectAmap Maps Mcp Server
MCP server for using the AMap Maps API
by duxiaohuiSupabase
Database, auth and storage
by SupabaseEverything
Reference / test server with prompts, resources, and tools.
Git
Tools to read, search, and manipulate Git repositories.
Sequential Thinking
Dynamic and reflective problem-solving through thought sequences.
Time
Time and timezone conversion capabilities.
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
