Figma MCP

Figma Context MCP

AI コーディングツールと Figma デザインをシームレスに統合する MCP サーバー

機能 • クイックスタート • MCP の機能 • アーキテクチャ • ドキュメント • 中文ドキュメント

これは何ですか？

Figma Context MCP は、Model Context Protocol (MCP) サーバーであり、Figma デザインと Cursor、Windsurf、Cline などの AI コーディングアシスタントをつなぎます。

AI ツールが Figma のデザインデータに直接アクセスできると、スクリーンショットを使うよりもはるかに正確なコードを最初の試行で生成できます。

Note: このプロジェクトは Figma-Context-MCP をベースにしており、データ構造の最適化とインテリジェントなレイアウト検出アルゴリズムを備えています。

機能

主要な機能

主な改善点

クイックスタート

前提条件

• Node.js >= 18.0.0
• API アクセスが可能な Figma アカウント

インストール

Smithery 経由（推奨）

npx -y @smithery/cli install @1yhy/Figma-Context-MCP --client claude

npm 経由

npm install -g @yhy2001/figma-mcp-server

ソースから

git clone https://github.com/1yhy/Figma-Context-MCP.git
cd Figma-Context-MCP
pnpm install
pnpm build

設定

1. Figma API トークンを取得する

1. Figma アカウント設定に移動します
2. 「Personal access tokens」までスクロールします
3. 「Create new token」をクリックします
4. トークンをコピーします

2. AI ツールの設定

{
  "mcpServers": {
    "Figma": {
      "command": "npx",
      "args": ["-y", "@yhy2001/figma-mcp-server", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "your-figma-api-key"
      }
    }
  }
}

# From source (development)
cp .env.example .env  # Add FIGMA_API_KEY to .env
pnpm install && pnpm build
pnpm start            # Starts on port 3333

# Or with environment variable
FIGMA_API_KEY=<your-key> pnpm start

# Or via global install
figma-mcp --figma-api-key=<your-key> --port=3333

# Connect via SSE
# URL: http://localhost:3333/sse

使用例

Please implement this Figma design: https://www.figma.com/design/abc123/MyDesign?node-id=1:234

Use React and Tailwind CSS.

MCP の機能

このサーバーは MCP の機能を全面的にサポートしています：

┌─────────────────────────────────────────────────────────────┐
│                  Figma MCP Server v1.1.0                    │
├─────────────────────────────────────────────────────────────┤
│  Tools (2)                        AI-invoked operations     │
│  ├── get_figma_data              Fetch design data          │
│  └── download_figma_images       Download image assets      │
├─────────────────────────────────────────────────────────────┤
│  Prompts (3)                      User-selected templates   │
│  ├── design_to_code              Full design-to-code flow   │
│  ├── analyze_components          Component structure        │
│  └── extract_styles              Style token extraction     │
├─────────────────────────────────────────────────────────────┤
│  Resources (5)                    Lightweight data sources  │
│  ├── figma://help                Usage guide                │
│  ├── figma://file/{key}          File metadata (~200 tok)   │
│  ├── figma://file/{key}/styles   Design tokens (~500 tok)   │
│  ├── figma://file/{key}/components Component list (~300 tok)│
│  └── figma://file/{key}/assets   Asset inventory (~400 tok) │
└─────────────────────────────────────────────────────────────┘

ツール

プロンプト

AI が高品質なコードを生成するための、組み込みのプロフェッショナルなプロンプトテンプレート：

design_to_code ワークフローの内容：

1. プロジェクト分析 - テーマ設定、グローバルスタイル、コンポーネントライブラリを読み込む
2. 構造分析 - ページパターンの特定、コンポーネント分割戦略
3. ASCII レイアウト設計図 - コンポーネントとアセットの注釈付きでレイアウト図を生成
4. アセット管理 - 画像／アイコンの分析、ダウンロード、整理
5. コード生成 - プロジェクトの規約に従ってコードを生成
6. アクセシビリティ最適化 - セマンティック HTML、ARIA ラベル
7. レスポンシブ対応 - モバイルレイアウトの調整

リソース

トークンを節約する軽量なデータアクセス：

# Get file metadata (~200 tokens)
figma://file/abc123

# Get design tokens (~500 tokens)
figma://file/abc123/styles

# Get component list (~300 tokens)
figma://file/abc123/components

# Get asset inventory (~400 tokens)
figma://file/abc123/assets

リソースとツールの比較：

アーキテクチャ

┌──────────────────────────────────────────────────────────────┐
│                        MCP Server                            │
├──────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐   │
│  │   Tools     │  │   Prompts   │  │     Resources       │   │
│  │ (2 tools)   │  │ (3 prompts) │  │   (5 resources)     │   │
│  └──────┬──────┘  └─────────────┘  └──────────┬──────────┘   │
│         │                                      │              │
│         └──────────────────┬───────────────────┘              │
│                            ▼                                  │
│  ┌────────────────────────────────────────────────────────┐  │
│  │                   FigmaService                         │  │
│  │          API Calls • Validation • Error Handling       │  │
│  └────────────────────────┬───────────────────────────────┘  │
│                           │                                  │
│         ┌─────────────────┴─────────────────┐                │
│         ▼                                   ▼                │
│  ┌─────────────────┐              ┌─────────────────────┐    │
│  │   CacheManager  │              │    Parser + Algo    │    │
│  │  L1: LRU Memory │              │  • Layout Detection │    │
│  │  L2: Disk Store │              │  • Icon Merging     │    │
│  └─────────────────┘              │  • CSS Generation   │    │
│                                   └─────────────────────┘    │
└──────────────────────────────────────────────────────────────┘

キャッシュシステム

2 層のキャッシュアーキテクチャにより、API 呼び出しを大幅に削減します：

レイアウト検出アルゴリズム

絶対配置をセマンティックな Flexbox/Grid レイアウトに自動変換します：

Input (Figma absolute positioning):
┌─────────────────────────┐
│ ■ (10,10)  ■ (110,10)   │
│ ■ (10,60)  ■ (110,60)   │
└─────────────────────────┘

Output (Inferred Grid):
display: grid
grid-template-columns: 100px 100px
grid-template-rows: 50px 50px
gap: 10px

プロジェクト構成

src/
├── algorithms/           # Smart algorithms
│   ├── layout/          # Layout detection (Flex/Grid inference)
│   └── icon/            # Icon merge detection
├── core/                 # Core parsing
│   ├── parser.ts        # Figma data parser
│   ├── style.ts         # CSS style generation
│   ├── layout.ts        # Layout processing
│   └── effects.ts       # Effects handling
├── services/             # Service layer
│   ├── figma.ts         # Figma API client
│   └── cache/           # Multi-layer cache system
├── prompts/              # MCP prompt templates
├── resources/            # MCP resource handlers
├── types/                # TypeScript type definitions
├── utils/                # Utility functions
├── server.ts             # MCP server main entry
└── index.ts              # CLI entry

tests/
├── fixtures/             # Test data
│   ├── figma-data/      # Raw JSON from Figma API
│   └── expected/        # Expected output snapshots
├── integration/          # Integration tests
│   ├── layout-optimization.test.ts  # Layout optimization tests
│   ├── output-quality.test.ts       # Output quality validation
│   └── parser.test.ts               # Parser tests
└── unit/                 # Unit tests
    ├── algorithms/      # Algorithm tests (layout, icon detection)
    ├── resources/       # Resource handler tests
    └── services/        # Service layer tests

scripts/
└── fetch-test-data.ts   # Figma test data fetcher

ドキュメント

コアアルゴリズム

リサーチドキュメント

アーキテクチャドキュメント

コマンドラインオプション

コントリビューション

コントリビューションを歓迎します！

# Setup
git clone https://github.com/1yhy/Figma-Context-MCP.git
cd Figma-Context-MCP
pnpm install

# Development
pnpm dev          # Watch mode
pnpm test         # Run tests (272 test cases)
pnpm lint         # Lint code
pnpm build        # Build

# Debug
pnpm inspect      # MCP Inspector

# Test with your own Figma data
pnpm tsx scripts/fetch-test-data.ts <fileKey> <nodeId> <outputName>

# Commit (uses conventional commits)
git commit -m "feat: add new feature"

コミットタイプ

リリースプロセス（メンテナー向け）

# 1. Update version in package.json and CHANGELOG.md

# 2. Commit version bump
git add -A
git commit -m "chore: bump version to x.x.x"

# 3. Publish to npm (auto runs: type-check → lint → test → build)
npm login --scope=@yhy2001  # if not logged in
pnpm run pub:release

# 4. Create git tag and push
git tag vx.x.x
git push origin main --tags

# 5. Create GitHub Release (optional)
# Go to https://github.com/1yhy/Figma-Context-MCP/releases/new

独自の Figma データでのテスト

独自の Figma デザインを使用して、レイアウト検出と最適化をテストできます：

1. 環境変数の設定

# Copy the environment template
cp .env.example .env

# Edit .env file with your configuration
FIGMA_API_KEY=your_figma_api_key_here
TEST_FIGMA_FILE_KEY=your_file_key      # Optional
TEST_FIGMA_NODE_ID=your_node_id        # Optional

2. Figma ノードデータの取得

# Method 1: Using command line arguments (recommended)
pnpm tsx scripts/fetch-test-data.ts <fileKey> <nodeId> <outputName>

# Example: Fetch a specific node
pnpm tsx scripts/fetch-test-data.ts UgtwrncR3GokKDIS7dpm4Z 402-34955 my-design

# Method 2: Using environment variables
TEST_FIGMA_FILE_KEY=xxx TEST_FIGMA_NODE_ID=123-456 pnpm tsx scripts/fetch-test-data.ts

パラメータ：

URL 解析例：

https://www.figma.com/design/UgtwrncR3GokKDIS7dpm4Z/MyProject?node-id=402-34955
                            ↑ fileKey                              ↑ nodeId

3. テストを実行して出力を検証

# Run all tests
pnpm test

# Run only integration tests (validate layout optimization)
pnpm test tests/integration/

# View output JSON files
ls tests/fixtures/figma-data/

4. 最適化結果の分析

テストは以下を自動的に検証します：

• データ圧縮 - 通常 50% 以上の圧縮率
• レイアウト検出 - Flex/Grid レイアウトの認識率
• CSS プロパティ - 冗長なプロパティのクリーンアップ
• 出力品質 - 構造の一貫性チェック

テストが失敗した場合、出力が期待に沿わない可能性があります。エラーメッセージを確認して調整するか、Issue を報告してください。

ライセンス

MIT © 1yhy

謝辞

• Figma-Context-MCP - オリジナルプロジェクト
• Model Context Protocol - MCP 仕様
• Best-README-Template - README テンプレートの参考

Made with ❤️ for the AI coding community