Figma MCP Server

Figma MCP Server

Claude/Cursor が Figma のデザインデータに直接アクセスできると、スクリーンショットに依存するアプローチよりもはるかに効果的に、正確なデザインを一度の手順で生成できます。

Figma API と読み取り専用で連携する Model Context Protocol（MCP）サーバーです。Figma のファイルやプロジェクトへの基本的なアクセスに対応しており、Claude Desktop やその他の MCP 対応クライアントでの利用を想定して設計されています。

機能

• Figma API による安全な認証
• Figma ファイル操作（読み取り、一覧表示）

前提条件

• Node.js 18.x 以降
• Figma アクセストークン（読み取り権限）

設定

1. .env.example を .env にコピーし、Figma アクセストークンを設定します。

FIGMA_ACCESS_TOKEN=your_figma_token
MCP_SERVER_PORT=3000
DEBUG=figma-mcp:*

2. Claude Desktop と連携するには、Claude の設定にサーバーを追加します（examples/claude_desktop_config.json を参照）。

### Available Tools

- **get-file**: Retrieve Figma file details
- **list-files**: List files in a Figma project
- **create-variables**: Create variables in a Figma file
- **update-variables**: Update existing variables in a Figma file
- **delete-variables**: Delete variables from a Figma file
- **create-reference**: Create a reference between variables
- **validate-references**: Check for circular references and validate dependencies
- **create-theme**: Create a theme with variable mode configurations

See `src/handlers/figma.ts` and `src/commands/figma.ts` for implementation details.


See `src/handlers/figma.ts` and `src/commands/figma.ts` for implementation details.

## Project Structure

- `src/server.ts` — Main server logic
- `src/handlers/figma.ts` — Figma API handlers
- `src/commands/figma.ts` — Command definitions
- `src/schemas/` — Input validation schemas
- `src/types/` — TypeScript types
- `bin/figma-mcp-server` — CLI entry point
- `examples/` — Example Claude Desktop configs