MCPは有料ですか？Figmaが有料なのはなぜ？

MCP自体は無料のオープン規格です。Figmaは公式Dev Modeサーバーを有料プラン限定にしていますが、Personal Access Tokenを使えば無料で読み取り中心のワークフローを構築できます。

Personal Access Tokenはどこで発行しますか？最小の権限は？

Figma設定→Security→Personal Access Tokensから発行します。最小構成の例は「現在のユーザー」「ファイルのコンテンツ」「ファイルのメタデータ」「ライブラリのコンテンツ」です。

Codex CLIではどう設定しますか？

~/.codex/config.toml に mcp_servers を定義し、command="npx"、args=["-y","figma-developer-mcp","--stdio"]、envにFIGMA_API_KEYを指定します。

.mcp.json は何に使いますか？

プロジェクトにMCPサーバー設定を同梱するための定義ファイルです。figma サーバーの起動方法や環境変数（FIGMA_API_KEY）を記述して共有できます。

.envは自動で読み込まれますか？トークン疎通の確認は？

.envは自動読込されないため、--envや.mcp.jsonで渡すのが確実です。疎通は curl -H "X-Figma-Token: $FIGMA_API_KEY" https://api.figma.com/v1/me で確認できます。

Windowsでnpx実行がうまくいかない場合の対処は？

ネイティブWindowsでは cmd /c を挟むと安定します（例: claude mcp add my-server -- cmd /c npx -y ）。Node.jsはv18以上を使用してください。

画像やフォントなどのアセットはどう扱うべきですか？

開発中はFigma Images APIの一時URLでもよいですが、本番は必ず自前サーバーや/publicへ書き出した安定URLに置き換えます。

FigmaのMCPを使ってAIコード生成を実現する完全ガイド【完全無料】

Q: Claude CodeからFigma MCPに接続する最短コマンドは？

例: claude mcp add figma --scope user --env FIGMA_API_KEY=figd_xxx -- npx -y figma-developer-mcp --stdio。起動後 /mcp で“figma”がConnectedなら成功です。

📢 はじめに：なぜこの記事が必要なのか
- この記事で実現できること
🎓 前提知識：MCPとは
- Model Context Protocol (MCP) について
🛠 必要なツールの準備
- 必須環境（すべて無料）
👤 Figmaアカウントの作成とセットアップ
- ステップ1：Figmaアカウント作成
- ステップ2：Figmaデスクトップアプリのインストール（推奨）
🔑 Personal Access Tokenの取得
- 重要：これが無料でMCPを使う鍵です！
📊 Figma APIの権限制限構造
- Personal Access Token（無料）
- 有料プラン（Dev/Full seat）
🔥 これこそオープンソースラッピング商法の典型例
⚡ でも大丈夫！読み取り専用でも十分すぎる価値
🚀 書き込みが必要な場合の奇策
💻 Claude Codeでの設定と使用方法
- ステップ1：Claude Codeのインストール
- ステップ2：認証
🚀 無料MCPサーバーのセットアップ
最短で正しくつながるコマンド（Claude Code）
- プロジェクト共有したい場合
よくある見落としチェック
事前設定
実装依頼時の推奨情報
効率化のコツ
Claude Code用実装依頼テンプレート例
Claude Code特有の利点
代替サーバーを使うなら（HAPINS版）
🤖 Codex CLIでの設定と使用方法
- ステップ1：Codex CLIのインストール
- ステップ2：初回セットアップ
- ステップ3：MCPサーバーの設定
- ステップ4：動作確認
🎨 実践：デザインからコード生成
- 準備：サンプルデザインの用意
- 実際のコード生成
- 生成されるコードの例
🔧 トラブルシューティング
- よくある問題と解決方法
- 有料版とは？
現実的な3通り
- 1) 本番（推奨）：書き出して安定ホスティング
- 2) 代替：GitHub Raw等に置く
- 3) 開発中のみ：Figma Images APIの“一時URL”で仮置き
- 小さな運用Tips
🚀 応用編：さらに高度な使い方
- デザインシステムの自動生成
- CI/CDパイプラインとの統合
- 複数フレームワークの対応
📊 比較：有料 vs 無料ソリューション
🎉 まとめと次のステップ
- 達成したこと
- 次のステップ
- コミュニティとリソース
🙏 最後に
- 謝辞

📢 はじめに：なぜこの記事が必要なのか

知っていましたか？ MCPは完全無料のオープン規格です。
でも、Figmaの公式Dev Mode MCP Serverは有料プラン限定（月額$15以上）にしています。

朗報：Personal Access Tokenだけで、無料で同じことができます！

本記事では、Figmaの無料プランユーザーでも、MCPを使ってデザインからコード生成まで実現できる方法を、初心者でも必ず成功できるよう超詳細に解説します。

この記事で実現できること

✅ Figmaデザインから自動でReact/Vue/HTMLコードを生成
✅ Claude CodeやCodex CLIでのAI支援開発
✅ デザイントークンの自動抽出
✅ 完全無料での実装（有料プラン不要）

🎓 前提知識：MCPとは

Model Context Protocol (MCP) について

MCPは、2024年11月にAnthropicがオープンソース化した完全無料の標準規格です。AIアシスタントと外部ツール・データソースを接続するための「USB-Cポート」のようなものです。

なぜFigmaは有料化したのか？

MCP自体：オープンソースで完全無料
Figma公式サーバー：Dev Mode（有料プラン）限定で提供
解決策：コミュニティが開発した無料代替サーバーを使用

🛠 必要なツールの準備

必須環境（すべて無料）

1. Node.js（18以上）

# インストール確認
node --version

# v18以上が表示されればOK
# インストールされていない場合：https://nodejs.org/ からダウンロード

2. npm または pnpm

# npmの確認（Node.jsに付属）
npm --version

# または pnpm（高速な代替）
npm install -g pnpm

3. テキストエディタ（いずれか1つ）

VS Code：https://code.visualstudio.com/
Cursor：https://cursor.com/
Windsurf：https://codeium.com/windsurf

4. Claude CodeまたはCodex CLI（後で詳しく説明）

👤 Figmaアカウントの作成とセットアップ

ステップ1：Figmaアカウント作成

Figmaウェブサイトにアクセス
https://www.figma.com/
「Sign up」をクリック
- メールアドレスまたはGoogleアカウントで登録(勝手に○○としてログインと表示されることも)
  その場合は自動でログインして無料プランになっています。一度使ったことがあると下記の作業が不要の可能性があります。
- 重要：無料プラン（Starter）を選択
メール認証
- 登録メールアドレスに届いた確認リンクをクリック
プロフィール設定
- 名前を入力
- 用途を選択（Personal projectでOK）

ステップ2：Figmaデスクトップアプリのインストール（推奨）

ダウンロードページにアクセス
https://www.figma.com/downloads/
OSに応じたバージョンをダウンロード
- Windows：.exe ファイル
- macOS：.dmg ファイル
- Linux：.AppImage ファイル
インストール後、ログイン
- 作成したアカウントでログイン

左上のプロフィールアイコンをクリックしてもダウンロードできるようです。

🔑 Personal Access Tokenの取得

重要：これが無料でMCPを使う鍵です！

ステップ1：設定画面へアクセス

Figmaを開く（ブラウザまたはデスクトップアプリ）
左上のプロフィールアイコンをクリック
「設定」を選択

初めての場合、設定を出すには左上から「ファイルに戻る」をクリックしないといけないようです。

ステップ2：Personal Access Tokenの生成

「セキュリティ」タブをクリック
下にスクロールして「個人アクセストークン」セクションを見つける
「新規トークンを作成」をクリック
トークンの設定

トークン名: figma-mcp-free（わかりやすい名前）
有効期限: 30日間（または希望の期間）

Figma MCP用に推奨するチェック項目：
✅ 必須（これらは絶対チェック）

ファイルのコンテンツ - デザインファイル読み取りに必須
ファイルのメタデータ - ファイル情報取得に必須
現在のユーザー - API認証確認に必要

⚡ 推奨（MCPの機能を最大化）

ライブラリのコンテンツ - コンポーネント/スタイル取得
ライブラリアセット - Design Token抽出に有用
チームライブラリのコンテンツ - チーム共有コンポーネント対応

🔧 オプション（高度な機能用）

ファイルバージョン - 履歴管理機能を作る場合
プロジェクト - プロジェクト全体の管理機能
Webフック - リアルタイム同期機能（将来実装予定）
開発リリース - Dev Mode相当の機能

🚫 不要

ファイルの開発リリース - 読み取り専用なら不要

最小構成で始めるなら：
✅ 現在のユーザー
✅ ファイルのコンテンツ  
✅ ファイルのメタデータ
✅ ライブラリのコンテンツ
この4つだけでも十分なMCPサーバーが作れます！
後で権限が足りなければトークンを再発行すれば大丈夫です。まずは最小構成で動作確認してから拡張していくのがおすすめです。

「トークンを生成」をクリック
⚠️ 超重要：トークンをコピーして保存

例：figd_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

このトークンは二度と表示されません！
メモ帳などに必ず保存してください

📊 Figma APIの権限制限構造

これが囲い込み戦略の核心部分です。

Personal Access Token（無料）

✅ 読み取り専用
❌ 書き込み権限なし
❌ Dev Mode API制限

有料プラン（Dev/Full seat）

✅ Dev Mode API
✅ 一部書き込み権限
✅ 高度なWebhook

🔥 これこそオープンソースラッピング商法の典型例

Figma REST API（本来は読み書き可能な技術）
↓
人為的に権限制限を追加
↓  
「書き込みたければ有料プランへ」
↓
無料の技術に課金構造を押し付け

⚡ でも大丈夫！読み取り専用でも十分すぎる価値

figma-mcp-freeで実現できること：

デザイントークン抽出 → CSS/Tailwind生成
コンポーネント構造解析 → React/Vue生成
レイアウト情報取得 → レスポンシブ対応
カラー/フォント情報 → テーマファイル生成
アセット一括取得 → 最適化画像出力

これらは全て読み取り専用で可能です！

🚀 書き込みが必要な場合の奇策

Figma Plugin経由

// Plugin内で書き込み実行
figma.createComponent(componentData);

Figma Web自動化

// Playwright/Puppeteerで操作
await page.click('[data-testid="create-component"]');

Import機能活用

# SVG/Sketch/Adobe XD経由で逆流
figma-mcp-free export → edit → reimport

結論：読み取り専用でも十分革命的です！

むしろこれが証明になります：

「Figmaが人為的に制限している書き込み権限すら不要。読み取り専用で公式Dev Mode以上の価値を提供可能」

これぞ技術的反抗の真骨頂ですね！🔥

💻 Claude Codeでの設定と使用方法

ステップ1：Claude Codeのインストール

# npmでインストール
npm install -g @anthropic-ai/claude-code

# インストール確認
claude --version

ステップ2：認証

# Claude Codeを初回起動
claude

# ブラウザが開くので、Claudeアカウントでログイン
# またはAPIキーを使用

🚀 無料MCPサーバーのセットアップ

最短で正しくつながるコマンド（Claude Code）

ユーザースコープに追加する例：

# 新しい（※露出していない）トークンを使ってください
claude mcp add figma --scope user \
  --env FIGMA_API_KEY=figd_xxx \
  -- npx -y figma-developer-mcp --stdio

確認：

claude mcp list   # figma が出てくること
claude            # Claude Code を起動
# 起動後、エディタ内で
/mcp               # "figma" が Connected ならOK

-- は Claude のフラグとサーバー側の引数を区切るために必須です。Anthropic

プロジェクト共有したい場合

プロジェクトのルートに .mcp.json を置くやり方が公式です：

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": { "FIGMA_API_KEY": "figd_xxx" }
    }
  }
}

（このファイル方式は --scope project と同じ保存先になります。）

よくある見落としチェック

.env は自動読込されません。
export FIGMA_API_KEY=... するか、上のように --env / .mcp.json で渡してください。
トークン健全性チェック（まずはAPIが通るかだけ確認）
curl -sH "X-Figma-Token: $FIGMA_API_KEY" https://api.figma.com/v1/me
ユーザーJSONが返れば鍵は有効。Personal Access Token は X-Figma-Token ヘッダで使うのが正解です。
Figma Dev Mode MCP（公式）と混同しない
それは Figmaデスクトップ内で使う別物です。今回の npm 版はローカルの stdio サーバーで、使い分けが必要。
Windows 直実行の注意（WSLでなくネイティブWindowsの場合）
npx を起動する時は cmd /c ラッパーが必要です：
claude mcp add my-server -- cmd /c npx -y <package>

Claude Code + Figma MCP使用のベストプラクティス

事前設定

Figma MCP サーバーの設定とAPIキーが設定済み
「Figmaから直接データ取得OK」の明示があると効率的

実装依頼時の推奨情報

Figmaリンク: 完全なURL（node-idパラメータ含む）
出力先: 具体的なファイルパス（例: src/components/Button.tsx）
構成要素: 必要なファイル種別（コンポーネント + CSS + 画像など）
検証方法: lintやbuild、テストコマンド
制約条件: レスポンシブ、アクセシビリティ要件など

効率化のコツ

nodeId指定: 特定ノードが決まっている場合は明記
アセット種別: 必要な画像フォーマット（SVG/PNG）とサイズ
既存ファイル参照: ローカルのtokens.jsonやCSS変数がある場合はパス指定
設計システム: 既存のコンポーネントパターンやスタイル規約があれば言及

Claude Code用実装依頼テンプレート例

【依頼】Figmaデザインを React コンポーネントとして実装

**FigmaURL**: https://www.figma.com/design/[fileKey]/[title]?node-id=[nodeId]
**出力先**: src/components/[ComponentName]/
**構成**:
- [ComponentName].tsx（メインコンポーネント）
- [ComponentName].module.css（スタイル）
- assets/（必要な画像）

**要件**:
- レスポンシブ対応（モバイル・デスクトップ）
- TypeScript厳密モード対応
- アクセシビリティ（ARIA属性）

**検証**:
- npm run lint
- npm run build
- Storybook動作確認

**補足**: Figma MCPサーバーからデータ取得OK

Claude Code特有の利点

serena MCP: シンボリック検索で既存コード構造を効率的に理解
並列実行: 複数ツールの同時実行で高速処理
TodoWrite: 複雑なタスクの進捗管理と可視化
メモリ機能: プロジェクト情報の永続化で文脈保持

代替サーバーを使うなら（HAPINS版）

npm i -g @hapins/figma-mcp
FIGMA_ACCESS_TOKEN=figd_xxx npx @hapins/figma-mcp

（環境変数名が ACCESS_TOKEN な点だけ違います）

🤖 Codex CLIでの設定と使用方法

ステップ1：Codex CLIのインストール

# npmでインストール
npm install -g @openai/codex

# または yarn
yarn global add @openai/codex

ステップ2：初回セットアップ

# Codexを起動
codex

# 「Sign in with ChatGPT」を選択
# ブラウザでログイン

ステップ3：MCPサーバーの設定

設定ファイルの編集

# 設定ファイルを開く
code ~/.codex/config.toml

# または
nano ~/.codex/config.toml

以下を追加：

# ~/.codex/config.toml

# モデル（任意：省略時も gpt-5 が既定）
model = "gpt-5"

[mcp_servers.figma]
command = "npx"
args    = ["-y", "figma-developer-mcp", "--stdio"]
env     = { FIGMA_API_KEY = "figd_xxx" }

上の設定は“Figmaを読む”ためのものではなく、MCPサーバーの起動・接続方法を指示しています。

それぞれの意味

[mcp_servers.figma]
→ MCPクライアント（Codex/Claude Code等）に「figma という名前のサーバー」を登録。
command = "npx" / args = ["-y","figma-developer-mcp","--stdio"]
→ npxで npm パッケージ figma-developer-mcp を起動。
→ -y は「確認プロンプトに自動で Yes」。
→ --stdio は通信方式の指定で、クライアント⇄サーバー間を標準入出力(StdIn/StdOut)でつなぐという意味です。
👉 つまり Figmaから読み取るスイッチではありません。MCPの“輸送路”を選んでいるだけです（他例：SSE/WebSocketなど）。
env = { FIGMA_API_KEY = "figd_..." }
→ サーバーに Figmaの個人アクセストークンを環境変数で渡す。
サーバーはこれを使って api.figma.com へHTTPリクエストを出し、ファイルやノードを取得・画像を書き出します。
（実際にFigmaのデータを読むのはここ。--stdio は無関係）

全体の流れ（ざっくり図）

クライアント(Codex) ⇄ stdio ⇄ figma-developer-mcp(ローカルNodeプロセス) ⇄ HTTPS ⇄ Figma API（FIGMA_API_KEY使用）

ステップ4：動作確認

# Codexを起動
codex

# プロンプトで確認
> Show me available MCP servers

# figmaが表示されればOK

🎨 実践：デザインからコード生成

準備：サンプルデザインの用意

オプション1：自分のデザインを使用

Figmaで新規ファイルを作成
簡単なボタンやカードをデザイン
フレームまたはコンポーネントを選択

オプション2：公開デザインシステムを使用

Material 3 Design Kit:
https://www.figma.com/community/file/1035203688168086460

実際のコード生成

Claude Codeでの使用例

# Claude Codeを起動
claude

# Figmaのリンクをコピー（例）
# https://www.figma.com/file/xxxxx/MyDesign?node-id=1:2

プロンプト例：

FigmaのこのデザインをReactコンポーネントとして実装してください：
[Figmaリンクをペースト]

要件：
- TypeScriptを使用
- Tailwind CSSでスタイリング
- レスポンシブ対応
- アクセシビリティ考慮

Codex CLIでの使用例

# プロジェクトディレクトリで実行
codex

# プロンプト
/model gpt-5-codex

# Figmaデザインの実装依頼
Implement this Figma design as a React component:
[Figmaリンク]
Use the MCP server to get design tokens and layout information.

以下のように伝えるといいかもしれません。実際にcodex CLIに聞いた内容が以下です。

既に ~/.codex/config.toml に Figma MCP サーバーの設定と API キーが入っているので、依頼時には「Figma から直接トークン取得してOK」
など許可の明文化があると助かります（ネットワーク使用はデフォルト制限されるため、必要なら私から明示的に許可依頼を出します）。
– 実装リクエストを書くときは、今の chatgpt.txt のようにターゲット URL を添えるだけでなく、生成物の置き場所（例: src/app/
components/<name>）、欲しい出力形式（コンポーネント + CSS Modules + 画像配置…）やテスト要件まで記してあると、読み込み→コード着手→
検証の流れが早くなります。
– MCP で取得したいリソースが決まっている場合は、使うコマンドや nodeId、一緒に落としておきたいアセット（画像・JSON）の種類もメモし
ておくと、Figma 側へ問い合わせる際に迷わず進められます。
– 逆に「今回はトークン取得済み」「ローカルにある tokens.json を使う」等あれば、そのパスや内容を併記するとネットワークアクセスなし
で即作業に入れます。
– 今回のように .codex に共通設定を置いておけば十分なので、今後もこのスタイルで問題ありません。追加で注意点があれば chatgpt.txt に
書き足してもらえばこちらで読み取ります。

chatgpt.txtの内容

# Figmaデザイン実装依頼テンプレート

## ゴール
- 指定のFigmaノードをNext.js（React）コンポーネントとして実装し、必要なスタイルやアセットを組み込む。

## 依頼時に含める情報
1. Figmaリンクとnode-id（例: https://www.figma.com/...&node-id=60799-137 など）。
2. 出力ファイルの場所と構成例（例: `src/app/components/IntroductionCard.tsx`, `.module.css`, 画像配置先など）。
3. テスト・検証方法（例: `npm run lint`, `npm run build`, ブラウザでの確認など）。
4. 利用したいデザイントークンやレイアウトデータの入手方法：
   - `.codex/config.toml` に定義済みのFigma MCPサーバーを使用して取得してよいかどうか。
   - もしくはローカルの tokens.json / CSS といった代替データのパス。
5. 特別な制約（レスポンシブ対応の要否、アクセシビリティ要件、コメント方針など）。

参考
– Figma MCPサーバー設定は `~/.codex/config.toml` に登録済み。
– ネットワークアクセスが必要な場合は、コマンド実行時に承認を求めることがあるため、事前に許可方針を明記しておくとスムーズです。
– 画像などのバイナリアセットが必要なら、Figmaからエクスポートするか、ローカルに配置済みパスを提示してください。

上記を満たす依頼であれば、最小限のやり取りで実装・テストまで対応できます。

実際の例

# Figmaデザイン実装依頼テンプレート（例）

## ゴール
- 指定のFigmaノードをNext.js（React）でコンポーネント化し、必要なスタイルとアセットを追加する。

## 依頼時に含める情報
1. Figmaリンクと node-id：
   https://www.figma.com/design/zulHEkmFfSjlprJcoxtPCv/Material-3-Design-Kit--Community-?node-id=60799-137&t=f7VWEEISfmSKhtT0-0
2. 出力ファイル構成（例）：
   - `src/app/components/IntroductionCard.tsx`
   - `src/app/components/IntroductionCard.module.css`
   - 画像は `public/images/` 配下に配置（通常のNext.js手順でOK）
3. テスト・検証方法：
   - `npm run lint`
   - `npm run build`
   - ブラウザで `http://localhost:3000/` を確認
4. デザイントークン／レイアウトデータの取得：
   - `.codex/config.toml` のFigma MCPサーバーを使用して取得してよい
5. 特別な制約：特になし

このフォーマットで依頼すれば、必要な情報が揃った状態で作業に入れます。

生成されるコードの例

🔧 トラブルシューティング

よくある問題と解決方法

問題1：トークンが無効と表示される

原因： トークンのコピーミス、期限切れ、スコープ不足

解決方法：

# トークンの再生成
1. Figma Settings > Security
2. 古いトークンを「Revoke」
3. 新しいトークンを生成
4. 環境変数を更新

export FIGMA_API_KEY="新しいトークン"

問題2：MCPサーバーが接続できない

原因： ファイアウォール、ポート競合、Node.jsバージョン

解決方法：

# Node.jsバージョン確認
node --version
# v18以上が必要

# ポートを指定して起動
npx figma-developer-mcp --port 3334 --figma-api-key=トークン

# ファイアウォール確認（Windows）
netsh advfirewall firewall show rule name=all | findstr 3333

問題3：コード生成がうまくいかない

原因： デザインの複雑さ、プロンプトの不明確さ

解決方法：

シンプルなコンポーネントから始める
- 単一のボタン
- シンプルなカード
- 基本的なフォーム
明確なプロンプトを使用

良い例：
"このボタンコンポーネントをReactで実装。
Tailwindを使用し、hover効果とクリックイベントを含める"

悪い例：
"これ作って"

段階的に複雑にする
- まず基本実装
- 次にスタイリング
- 最後に機能追加

問題4：Permission deniedエラー

解決方法：

# npmのグローバルインストール時
# sudoを使わない（推奨）
npm config set prefix ~/.npm-global
export PATH=~/.npm-global/bin:$PATH

# それでもダメな場合はnpxを使用
npx @anthropic-ai/claude-code

有料版とは？

「有料＝RESTで書き込み可」ではありません。
REST API は基本“読み取り専用”（コメント等の一部だけ書けます）。デザイン内容の追加・移動・編集は REST では不可で、やるなら Figma Plugin API（エディタ内で実行）＋編集権限（Editor席）が必要、という整理です。

最小の雛形（例）

// app/toc/page.tsx
import Image from "next/image";

export default function Toc() {
  return (
    <main className="min-h-screen bg-stone-100 flex items-center justify-center p-8">
      <section className="max-w-5xl w-full grid grid-cols-12 gap-8 items-start">
        <h1 className="col-span-12 text-5xl font-semibold tracking-tight">
          Table of Contents
        </h1>

        <div className="col-span-5">
          <div className="rounded-xl overflow-hidden shadow">
            <Image
              src="/images/mamu-avatar.png" // ← Images API から書き出したアセット
              alt="Mamu Minokamo"
              width={640}
              height={640}
            />
          </div>
          <p className="mt-3 text-xl">Mamu Minokamo</p>
        </div>

        <ol className="col-span-7 space-y-6 text-4xl leading-snug">
          <li>Exposition</li>
          <li>Rising action</li>
          <li>Climax</li>
          <li>Falling action</li>
          <li>Resolution</li>
        </ol>
      </section>
    </main>
  );
}

注意ポイント

フォント置き換え（FigmaにしかないフォントはWebフォントへ）。
絶対配置の乱用は崩れの原因。Auto Layout→Flexに寄せるのが吉。
画像は直リンクか /public。FigmaのビューURLは使えません。
トークンは環境変数で管理（.env など）。公開リポジトリに直書きしない。

貼り付けたオリジナル画像は、最終的に自分のサーバーや /public に置いた安定URLへ置き換えるのが基本です。
（開発中だけはFigma APIの“一時URL”で仮置きできますが、期限切れになります）

現実的な3通り

1) 本番（推奨）：書き出して安定ホスティング

Figmaで画像を書き出し（PNG/JPG/SVG）→
a) Next.js の /public/images/... に保存して src="/images/..."
b) もしくは WordPress メディアや自前CDNにアップして直リンクを使う
ファイル名は ASCII・スペースなし（例: mamu-avatar.png）

import Image from "next/image";
export default function Hero() {
  return <Image src="/images/mamu-avatar.png" alt="Mamu" width={640} height={640} />;
}

WPやCDN直リンクを使う場合は、next.config.js に許可ドメインを追加

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'minokamo.tokyo' },
      { protocol: 'https', hostname: 'vibelsd.com' },
    ]
  }
}

2) 代替：GitHub Raw等に置く

画像をリポジトリに入れて Raw URL を使う
大きすぎる画像は避ける（数MB以内推奨）

images: {
  remotePatterns: [{ protocol: 'https', hostname: 'raw.githubusercontent.com' }]
}

3) 開発中のみ：Figma Images APIの“一時URL”で仮置き

すぐ失効する前提。デバッグや初期実装の仮リンクに便利

curl -H "X-Figma-Token: $FIGMA_API_KEY" \
  "https://api.figma.com/v1/images/<file_key>?ids=<node_id>&format=png"
# 返ってくる JSON の url を <Image src="..."> に一時的に入れる

使うなら next.config.js に S3/figma画像のドメインを許可（※失効するので本番不可）

images: {
  remotePatterns: [
    { protocol: 'https', hostname: 's3-us-west-2.amazonaws.com' },
    { protocol: 'https', hostname: 'images.figma.com' }, // 実際の出力ドメインに合わせて
  ]
}

エージェントに伝えるなら（そのまま貼れる指示）

Figmaの <file_key> の <node_id> を Images API で PNG 2x に書き出し、
リポジトリの public/images/mamu-avatar.png に保存。
コンポーネントでは <Image src="/images/mamu-avatar.png" width={640} height={640} /> を使い、
リモート参照は使わない。マスクがある場合は use_absolute_bounds=true を付けてエクスポート。
もしリモートURLを使うなら、next.config.js に該当ドメインを追加すること。

小さな運用Tips

SVGは可能ならSVGのまま（アイコン等）→ そのままインライン//public 配置で超安定
日本語ファイル名は避ける（URLエンコードの手間・ツール相性問題を回避）
直リンクチェック：シークレットウィンドウで開いて画像だけが表示＆HTTP 200/Content-Type: image/* を確認

🚀 応用編：さらに高度な使い方

デザインシステムの自動生成

# Claude Codeで実行
claude

# プロンプト
"Figmaのこのデザインシステムから、
完全なReactコンポーネントライブラリを生成してください。
Storybookのストーリーも含めてください。"

CI/CDパイプラインとの統合

# .github/workflows/design-sync.yml
name: Sync Figma Design
on:
  schedule:
    - cron: '0 0 * * *'  # 毎日実行
jobs:
  sync:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node
        uses: actions/setup-node@v2
      - name: Generate Components
        env:
          FIGMA_API_KEY: ${{ secrets.FIGMA_API_KEY }}
        run: |
          npx figma-developer-mcp --sync

複数フレームワークの対応

// config.js
module.exports = {
  frameworks: ['react', 'vue', 'svelte'],
  styling: ['tailwind', 'styled-components', 'css-modules'],
  typescript: true,
  generateTests: true
};

📊 比較：有料 vs 無料ソリューション

機能	Figma公式（有料）	コミュニティ版（無料）
料金	$15/月〜	完全無料
MCP対応	✅	✅
Personal Access Token	✅	✅
コード生成	✅	✅
デザイントークン抽出	✅	✅
更新頻度	定期的	コミュニティ依存
サポート	公式サポート	コミュニティサポート
セットアップ難易度	簡単	少し手間（本記事で解決）

🎉 まとめと次のステップ

達成したこと

✅ Figmaの無料プランでMCPを使える環境を構築
✅ Personal Access Tokenでの認証設定
✅ Claude CodeとCodex CLIの両方でMCP連携
✅ デザインから実際のコード生成まで実現

次のステップ

実プロジェクトへの適用
- 既存プロジェクトのUIコンポーネント移行
- 新規プロジェクトでのデザインシステム構築
チーム導入
- チームメンバーへの展開
- 共有設定ファイルの作成
カスタマイズ
- 独自のMCPサーバー開発
- 社内デザインシステムとの統合

コミュニティとリソース

GitHub Issues: 問題報告と解決策の共有
Discord: リアルタイムサポート
ドキュメント:
- MCP公式
- Figma API

🙏 最後に

オープンソースの力で、企業の囲い込み戦略に対抗できることを証明しました。この方法を使えば、誰でも無料で最先端のAI支援開発を実現できます。

記事が役立った場合：

⭐ GitHubでスターをお願いします
🔄 SNSでシェアして広めてください
💬 改善提案やフィードバックを歓迎します

謝辞

このプロジェクトは、オープンソースコミュニティの貢献により実現しました：

Anthropic（MCPのオープンソース化）
figma-developer-mcpの開発者
世界中のコントリビューター

バージョン: 1.0.0
最終更新: 2025年9月
ライセンス: MIT

本記事は定期的に更新されます。最新情報はGitHubリポジトリをご確認ください。

superdoccimo/figma-mcp-free

📢 はじめに：なぜこの記事が必要なのか

この記事で実現できること

🎓 前提知識：MCPとは

Model Context Protocol (MCP) について

なぜFigmaは有料化したのか？

🛠 必要なツールの準備

必須環境（すべて無料）

1. Node.js（18以上）

2. npm または pnpm

3. テキストエディタ（いずれか1つ）

4. Claude CodeまたはCodex CLI（後で詳しく説明）

👤 Figmaアカウントの作成とセットアップ

ステップ1：Figmaアカウント作成

ステップ2：Figmaデスクトップアプリのインストール（推奨）

🔑 Personal Access Tokenの取得

重要：これが無料でMCPを使う鍵です！

ステップ1：設定画面へアクセス

ステップ2：Personal Access Tokenの生成

📊 Figma APIの権限制限構造

Personal Access Token（無料）

有料プラン（Dev/Full seat）

🔥 これこそオープンソースラッピング商法の典型例

⚡ でも大丈夫！読み取り専用でも十分すぎる価値

🚀 書き込みが必要な場合の奇策

💻 Claude Codeでの設定と使用方法

ステップ1：Claude Codeのインストール

ステップ2：認証

🚀 無料MCPサーバーのセットアップ

最短で正しくつながるコマンド（Claude Code）

プロジェクト共有したい場合

よくある見落としチェック

事前設定

実装依頼時の推奨情報

効率化のコツ

Claude Code用実装依頼テンプレート例

Claude Code特有の利点

代替サーバーを使うなら（HAPINS版）

🤖 Codex CLIでの設定と使用方法

ステップ1：Codex CLIのインストール

ステップ2：初回セットアップ

ステップ3：MCPサーバーの設定

設定ファイルの編集

それぞれの意味

全体の流れ（ざっくり図）

ステップ4：動作確認

🎨 実践：デザインからコード生成

準備：サンプルデザインの用意

オプション1：自分のデザインを使用

オプション2：公開デザインシステムを使用

実際のコード生成

Claude Codeでの使用例

Codex CLIでの使用例

生成されるコードの例

🔧 トラブルシューティング

よくある問題と解決方法

問題1：トークンが無効と表示される

問題2：MCPサーバーが接続できない

問題3：コード生成がうまくいかない

問題4：Permission deniedエラー

有料版とは？

おすすめの実装フロー（無料トークンでOK）

最小の雛形（例）

注意ポイント

現実的な3通り

1) 本番（推奨）：書き出して安定ホスティング

2) 代替：GitHub Raw等に置く

3) 開発中のみ：Figma Images APIの“一時URL”で仮置き

エージェントに伝えるなら（そのまま貼れる指示）

小さな運用Tips

🚀 応用編：さらに高度な使い方

デザインシステムの自動生成

CI/CDパイプラインとの統合

複数フレームワークの対応

📊 比較：有料 vs 無料ソリューション

🎉 まとめと次のステップ

達成したこと

次のステップ

コミュニティとリソース

🙏 最後に

謝辞