WSL環境でFigma MCPサーバーを起動する方法
はじめに
自作アプリ開発中に、Claude Codeを使ってFigmaのデザインデータを活用したいと考えました。
Figma MCPサーバーを使えば、Figmaで作成した画面デザインのデザイントークンを簡単に取得できます。しかし、WSL環境でMCPサーバーを使用する場合、公式の手順通りに設定してもうまく接続できないことがあります。
本記事では、WSL環境でFigma MCPサーバーに接続する方法を解説します。この方法は、Claude Codeに限らず、WSL上で動作する他のMCP対応ツールでも利用可能です。
前提条件
- WSL2がインストールされたWindows環境
- MCP対応ツール（Claude Codeなど）がインストール済み
- Node.js/npmがWSL環境にインストール済み
- Figmaのパーソナルアクセストークンを取得済み
公式手順での問題点
Figmaの公式ドキュメント（Figma MCPサーバーのガイド）には、MCPサーバーへの接続手順が記載されています。
しかし、この手順はWindowsシステム上に直接MCPクライアントを配置することを前提としており、WSL経由でMCPツールを使用している場合、そのままでは接続できません。
解決方法：自前でMCPサーバーを立ち上げる
WSL環境では、自分でMCPサーバーの設定を行うことで接続できます。
手順
- mcp.jsonの設定
- .envファイルの設定
- MCPクライアントの再起動
1. mcp.jsonの設定
プロジェクトルートに .mcp.json ファイルを作成し、以下の内容を記述します。
{
"mcpServers": {
"figma-framelink": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--figma-api-key=${FIGMA_PERSONAL_ACCESS_TOKEN}",
"--stdio"
],
"env": {
"FIGMA_PERSONAL_ACCESS_TOKEN": "${FIGMA_PERSONAL_ACCESS_TOKEN}"
}
}
}
}
設定の詳細
-
command:npxコマンドを使用してMCPサーバーを起動 -
args:-
-y: インストールの確認をスキップ -
figma-developer-mcp: Figma公式のMCPサーバーパッケージ -
--figma-api-key: APIキーを環境変数から取得 -
--stdio: 標準入出力を使用した通信。ネットワークポートを開く必要がなくなったりして、なんかセキュリティ的に安全になるっぽいです（詳しくは良くわかってない）。このオプションを外すとfigma mcpの接続に失敗したので付けといてください。
-
-
env: 環境変数の設定
2. .envファイルの設定
プロジェクトルートに .env ファイルを作成し、Figmaのパーソナルアクセストークンを設定します。
FIGMA_PERSONAL_ACCESS_TOKEN=your_token_here
3. MCPクライアントの再起動
設定ファイルを作成したら、使用しているMCPクライアント（Claude Codeなど）を再起動して設定を反映させます。
動作確認
MCPクライアントを起動し、Figma MCPサーバーに接続できるか確認します。
Claude Codeの場合
Claude Codeを起動後、MCPツールが利用可能になっているか確認できます。接続が成功すれば、Figmaのデザインデータにアクセスできるようになります。
接続確認のポイント
- MCPサーバーが正常に起動しているか
- 環境変数が正しく読み込まれているか
- Figma APIキーが有効か
まとめ
WSL環境でFigma MCPサーバーを使用するには、以下の手順が必要です。
-
mcp.jsonでMCPサーバーの設定を行う -
.envファイルにFigmaのパーソナルアクセストークンを設定 - MCPクライアントを再起動
この方法は、Claude Codeに限らず、WSL環境で動作する他のMCP対応ツールでも利用できます。Windows + WSL環境でもFigmaのデザインデータをスムーズに活用できるようになります。
Discussion