Skip to main content
Glama
enesjakoptzh

FigmaMind MCP Server

by joao-loker
GitHub
TypeScript
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

フィグママインド

モデル呼び出しプロトコル (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トークン

インストール

  1. リポジトリをクローンします。
git clone https://github.com/seu-usuario/figmamind.git cd figmamind
  1. 依存関係をインストールします:
npm install
  1. プロジェクト ルートに Figma トークンを使用して.envファイルを作成します。
FIGMA_TOKEN=seu_token_aqui PORT=3000
  1. プロジェクトをコンパイルします。
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で自動テストを作成する

ライセンス

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

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

This server cannot be installed

-
security - not tested
F
license - not found
-
quality - not tested

How are these scores calculated?

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Figma デザインからコンポーネントを抽出し、標準化された JSON 形式に変換して、モックアップや AI ツールでインターフェース再構築に簡単に使用できるようにします。

  1. プロジェクトについて
    1. 主な特徴
      1. 要件
        1. インストール
          1. 使用
            1. サーバーを起動する
            2. 使用例
          2. プロジェクト構造
            1. テスト
              1. ドキュメント
                1. TypeScriptへの変換
                  1. ライセンス

                    Related MCP Servers

                    • Figma MCP Server

                      MatthewDailey
                      A
                      security
                      F
                      license
                      A
                      quality
                      Enables AI assistants to interact with Figma files through the ModelContextProtocol, allowing viewing, commenting, and analyzing Figma designs directly in chat interfaces.
                      Last updated -
                      5
                      997
                      173
                      TypeScript
                      • Apple

                    • Talk to Figma MCP

                      yhc984
                      -
                      security
                      F
                      license
                      -
                      quality
                      Enables Cursor AI to interact with Figma designs, allowing users to read design information and programmatically modify elements through natural language commands.
                      Last updated -
                      TypeScript

                    • Figma MCP Server

                      1yhy
                      -
                      security
                      A
                      license
                      -
                      quality
                      A Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.
                      Last updated -
                      124
                      6
                      TypeScript
                      MIT License
                      • Linux
                      • Apple

                    • Figma MCP Server

                      rlagudals95
                      -
                      security
                      A
                      license
                      -
                      quality
                      Gives AI-powered coding tools like Cursor, Windsurf, and Cline access to Figma design files, enabling more accurate code generation directly from Figma designs.
                      Last updated -
                      44,047
                      TypeScript
                      MIT License

                    View all related MCP servers

                    Appeared in Searches

                    New MCP Servers

                    MCP directory API

                    We provide all the information about MCP servers via our MCP API.

                    curl -X GET 'https://glama.ai/api/mcp/v1/servers/joao-loker/FigmaMind'

                    If you have feedback or need assistance with the MCP directory API, please join our Discord server