フィグママインド

モデル呼び出しプロトコル (MCP) を実装し、公式 API を使用して Figma からコンポーネントとパターンを抽出するアプリケーション。

プロジェクトについて

FigmaMind は、Figma のデザインを分析し、標準化された JSON 表現に変換するツールです。ボタン、入力フィールド、ヘッダーなどのコンポーネントを識別し、それらのプロパティと関係を抽出します。

アプリケーションは 2 種類の API を公開します。

REST API : HTTP経由の従来の使用向け
MCP (モデル呼び出しプロトコル) : LLM やその他の MCP 互換システムとの統合用

主な特徴

公式API経由でFigmaコンポーネントを抽出する
コンポーネントの種類（ボタン、入力、ヘッダーなど）の自動識別
位置と特性の標準化
アセット抽出（画像とアイコン）
モデル呼び出しプロトコル (MCP) の実装
完全にTypeScriptで書かれています

要件

Node.js 18.0.0以上
Figma APIトークン

インストール

リポジトリをクローンします。

git clone https://github.com/seu-usuario/figmamind.git
cd figmamind

依存関係をインストールします:

npm install

プロジェクトルートに Figma トークンを使用して.envファイルを作成します。

FIGMA_TOKEN=seu_token_aqui
PORT=3000

プロジェクトをコンパイルします。

npm run build

使用

サーバーを起動する

npm start

自動リロードを使用した開発の場合:

npm run dev

使用例

REST API経由

Figma デザインの変換:

curl -X POST -H "Content-Type: application/json" \
  --data '{"figmaUrl": "https://www.figma.com/file/FILE_KEY/FILE_NAME?node-id=NODE_ID"}' \
  http://localhost:3000/api/transform

MCP経由

利用可能なツールを一覧表示します。

curl -X POST -H "Content-Type: application/json" \
  --data '{"jsonrpc": "2.0", "method": "tools.list", "id": 1}' \
  http://localhost:3000/tools/list

ツールの実行:

curl -X POST -H "Content-Type: application/json" \
  --data '{"jsonrpc": "2.0", "method": "run", "id": 2, "params": {"name": "figmamind.transform", "arguments": {"figmaUrl": "https://www.figma.com/file/FILE_KEY/FILE_NAME?node-id=NODE_ID"}}}' \
  http://localhost:3000/run

プロジェクト構造

figmamind/
├── docs/                     # Documentação detalhada
├── examples/                 # Exemplos de uso
│   ├── input/                # Dados de exemplo para entrada 
│   └── output/               # Dados de exemplo de saída
├── src/                      # Código-fonte
│   ├── mcp/                  # Implementação do MCP
│   ├── processor/            # Processamento de componentes
│   ├── services/             # Serviços (Figma API)
│   ├── transformers/         # Transformadores específicos
│   ├── types/                # Definições de tipos TypeScript
│   └── utils/                # Utilitários
├── tests/                    # Testes automatizados
└── scripts/                  # Scripts utilitários

テスト

自動テストを実行します。

# Teste da transformação do Figma
npm run test:transform

# Teste dos endpoints MCP
npm run test:mcp

# Teste da API REST de transformação
npm run test:api

# Executa o teste principal
npm test

ドキュメント

詳細なドキュメントについては、 docs/フォルダを参照してください。

TypeScriptへの変換

このプロジェクトは、入力性、コードの堅牢性、保守性を向上させるために、JavaScript から TypeScript に変換されました。変換には次のものが含まれます。

すべてのデータ構造にインターフェースと型を追加する
すべての.jsファイルを.tsに変換する
関数のパラメータと戻り値に強い型付けを実装する
TypeScriptで自動テストを作成する

ライセンス

マサチューセッツ工科大学

ジョアン・ペレイラによって開発された

FigmaMind MCP Server

Integrations