Command Palette

Search for a command to run...

UnylyUnyly
Весь каталог

@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

GitHubEmbed

Описание

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

Установка @Nvanexan/Figma

У этого сервера нет опубликованного пакета — он собирается из исходников. Открой репозиторий и следуй инструкции в README.

▸ github.com/nvanexan/figma-mcp

FAQ

@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

Compare @Nvanexan/Figma with

Не уверен что выбрать?

Найди свой стек за 60 секунд

Автор?

Embed-бейдж для README

Похожее

Все в категории development