@Nvanexan/Figma
БесплатноНе проверен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.
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
Установка @Nvanexan/Figma
У этого сервера нет опубликованного пакета — он собирается из исходников. Открой репозиторий и следуй инструкции в README.
▸ github.com/nvanexan/figma-mcpFAQ
@Nvanexan/Figma MCP бесплатный?
Да, @Nvanexan/Figma MCP бесплатный — установка в пару кликов через Unyly без оплаты.
Нужен ли API-ключ для @Nvanexan/Figma?
Нет, @Nvanexan/Figma работает без API-ключей и переменных окружения.
@Nvanexan/Figma — hosted или self-hosted?
Доступен hosted-вариант: Unyly запускает сервер в облаке, локальная установка не обязательна.
Как установить @Nvanexan/Figma в Claude Desktop, Claude Code или Cursor?
Открой @Nvanexan/Figma на unyly.org, выбери вкладку своего клиента (Claude Desktop, Claude Code, Cursor) и нажми Install — конфиг сгенерируется автоматически, без правки JSON.
Похожие MCP
GitHub
PRs, issues, code search, CI status
автор: 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
автор: mcpdotdirectCompare @Nvanexan/Figma with
Не уверен что выбрать?
Найди свой стек за 60 секунд
Автор?
Embed-бейдж для README
Похожее
Все в категории development
