Figme

figme

AI エージェントが Figma の .fig ファイルを読み取れるようにするMCPサーバーです。オフラインで動作し、Figma アカウントや API トークンは必要ありません。

Figma からデザインを .fig ファイルとして保存すると、エージェントはレイヤーやレイアウト、色、テキスト、コンポーネント、デザイントークン、画像など、ファイル内のすべてを読み取れます。figme は任意のフレームを画像として描画することもできるため、エージェントが作成したものとデザインを比較できます。

you: "what does the tab component in design.fig look like?"

fig_overview  → 10 pages, 2,046 components, 273 variables, 212 images
fig_find      → "lv2/tab/large" is 2:1337, on page "Page 1"
fig_style     → display:flex, direction:row, gap:8, padding:"8px 16px",
                cornerRadius:4, stroke #FFFFFF bound to variable "tab/large/underline"
                (active #FFFFFF / inactive #333333)

figme を使う理由

• アカウント、トークン、ネットワークは不要です。 figme はディスク上のファイルを読み取り、figma.com には一切アクセスしません。
• ファイル内のすべてを取得できます。 レイヤーとジオメトリ、自動レイアウト、塗り、線、エフェクト、複数のスタイルが混在するテキスト、コンポーネントとインスタンス、変数、プロトタイプのリンク、画像に対応しています。レイアウトは CSS フレックスボックスとして、色は 16 進数として取得でき、変数に紐づいた色にはトークン名が保持されます。
• 数値だけでなく画像も取得できます。 fig_render は任意のレイヤーを PNG または SVG として描画します。
• 応答はコンパクトです。 ノードが 116,000 個あるファイルでも、応答は約 20 KB に収まります。結果はデフォルトで浅い階層に制限され、フィルタリングやページ分割が可能です。
• Figma の更新にも強い設計です。 すべての .fig ファイルには、そのファイルを記述するスキーマが含まれており、figme はそのスキーマを使ってファイルをデコードするため、Figma が後からフィールドを追加しても問題ありません。

クイックスタート

Node.js 22.15 以降が必要です。

1. デザインを .fig ファイルとして保存します。 Figma で File → Save local copy… を選択します。コミュニティファイルの場合は、先に Open in Figma をクリックしてください。

2. figme をエージェントに追加します。 Claude Code の場合：

claude mcp add figme -- npx -y figme-mcp

Cursor、VS Code、Windsurf、その他のクライアントについては、クライアントの設定を参照してください。

3. 依頼します。 ファイルのフルパスを伝え、Figma のリンクがあれば貼り付けます。

figme を使って、/Users/me/Desktop/App.fig を読み込み、このフレームを React コンポーネントとして作成してください： https://www.figma.com/design/AbC123/App?node-id=3017-121

あとはエージェントがツールを選んで処理します。ほかにも、次のようなことを試せます。

• 「/Users/me/Desktop/App.fig のページと、最もよく使われているコンポーネントを一覧表示してください。」
• 「/Users/me/Desktop/App.fig の色の変数を CSS カスタムプロパティに変換してください。」
• 「/Users/me/Desktop/App.fig のサインイン画面を /Users/me/Desktop/sign-in.png に描画してください。」

クライアントの設定

どのクライアントでも同じコマンド npx -y figme-mcp を実行します。設定する場所だけが異なります。

claude mcp add figme -- npx -y figme-mcp           # this project
claude mcp add -s user figme -- npx -y figme-mcp   # every project

{
  "mcpServers": {
    "figme": { "command": "npx", "args": ["-y", "figme-mcp"] }
  }
}

{
  "mcpServers": {
    "figme": { "command": "npx", "args": ["-y", "figme-mcp"] }
  }
}

code --add-mcp '{"name":"figme","command":"npx","args":["-y","figme-mcp"]}'

{
  "servers": {
    "figme": { "type": "stdio", "command": "npx", "args": ["-y", "figme-mcp"] }
  }
}

{
  "mcpServers": {
    "figme": { "command": "npx", "args": ["-y", "figme-mcp"] }
  }
}

{ "command": "npx", "args": ["-y", "figme-mcp"] }

Windows の場合、クライアントによっては npx を自動で見つけられないことがあります。サーバーが起動しない場合は、cmd 経由で実行してください。

{ "command": "cmd", "args": ["/c", "npx", "-y", "figme-mcp"] }

ヒント

• リンクがあっても、ファイルのフルパスを必ず指定してください。 Figma のリンクだけでは、figme にディスク上のどのファイルに対応するのか伝わりません。また、相対パスはクライアントがサーバーを起動した場所を基準に解決されます。

• エージェントに Figma のリンクを開かせないでください。 ページへのログインが必要なため、エージェントは有用な情報を得られず、URL 内の単語からデザインをでっち上げることがあります。figme はエージェントにリンクを開かないよう指示しますが、それでも開こうとする場合は止めてください。

• 「Node not found」 は通常、保存したファイルがリンク先のファイルと異なることを意味します。fig_overview が報告するドキュメント名とリンク内の名前を比べるか、代わりに名前でレイヤーを探すようエージェントに依頼してください。

• 大きなファイルにはメモリが必要です。 39 MB の .fig は、解析後に約 900 MB の RAM を使用し、figme は解析済みファイルを最大 4 つ保持します。マシンのメモリが少ない場合は、1 つだけにしてください。

  { "command": "npx", "args": ["-y", "figme-mcp", "--max-files", "1"] }
  

ツール

エージェントがツールを自動で選ぶため、指定する必要はありません。

各ツールのパラメーターと応答例は、docs/tools.md にあります。

制限事項

• 読み取り専用です。 figme が .fig を変更することはありません。fig_image または fig_render に保存を依頼した場合にのみ、ファイルを書き込みます。
• ライブリンクではなく、スナップショットです。 .fig には、保存時点のデザインが保持されます。デザインを変更したら、もう一度保存してください。figme は新しいファイルを読み込みます。
• レンダリングは近似であり、ピクセル単位で完全に一致するわけではありません。 fig_render は背景のぼかしや角度付きグラデーションなど一部のエフェクトを近似し、絵文字など一部の要素を省略します。各レンダリングには、近似または省略した項目が記載されます。docs/rendering.md を参照してください。
• 他のファイルのライブラリは含まれません。 別のファイルから公開されたスタイル、変数、コンポーネントは、値を含まない参照として表示されます。
• ベクターパスはデコードされません。 fig_blob は生のバイト列を返します。

貢献

イシューやプルリクエストを歓迎します。CONTRIBUTING.md では、ソースからのビルド方法とテストの実行方法、パーサーの仕組みを説明しています。

ライセンス

MIT