Figma×MCPでデザインをコード化！無料枠の制限に挑んだ私の試行錯誤記

こんにちは、うどんです。

「Figmaのデザインを、AI（MCP）を使ってそのままコードにしたい！」
そう思い立ったのが運の尽き（？）。
いつの間にかリモートMCPであればフリープランでも利用することができるんじゃ！と思っていたのですが、無料プランの制限やツールの未対応に阻まれ、数々の失敗を乗り越えてようやく一つの正解にたどり着きました。

今回は、私が意地になって試行錯誤した「Figma×MCP」の奮闘記をお届けします。

そもそもFigmaとは

Figmaは、ブラウザ上で動作するデザインプラットフォームです。UI/UXデザインの世界ではもはや標準ツールとなっており、リアルタイムで共同編集ができるのが最大の特徴です。最近では「Dev Mode」など、エンジニアへの受け渡しをスムーズにする機能も充実しています。

MCPとは

MCP（Model Context Protocol）は、Anthropicが公開したオープンな規格です。簡単に言うと、「AI（Claudeなど）が外部データやツールに直接アクセスするための共通の口」作る仕組みのこと。
これがあるおかげで、AIはFigmaのデータを見に行ったり、Google Searchをしたり、ローカルファイルを操作したりできるようになります。

つまりリモートMCPとは

通常、MCPは自分のPC（ローカル）でサーバーを動かしますが、リモートMCPはサーバーをクラウド上に置き、URL経由でAIとツールを接続します。
「環境構築の手間が省ける」「どこからでも繋がる」というメリットがありますが、FigmaのリモートMCP（特に公式提供のものなど）には「1ヶ月に6回まで」といった厳しい無料枠の制限があることも。

実際に成功したリモートMCPの手順

「まずは無料でリモートMCPを！」と息巻いて挑戦した私の屍（失敗談）を並べます。

1. Cline / Roo Codeで挑戦
   • どちらも強力なAIエージェントですが、現時点ではFigmaのリモートMCP設定に完全対応しておらず、接続に苦戦。
2. Claude Codeで挑戦
   • ターミナルで動く爆速ツールですが、そもそも利用に課金（プロプラン等）が必須で、今回の「無料で」という趣旨から外れるため断念。
3. FigmaMakeファイルで生成
   • こちらはせっかくなんで、Cusorでする際にお試し実験をしてみました。Cusorは一応無料プランであればリモートMCPで接続ができそうです。
     Figma上のデータを直接読み込もうとするも、デザインデータが重すぎてAIが処理しきれずエラーを連発。枠を使い切りました。※誰かまた試してみてください。

一ヶ月の回数制限をあっという間に使い切り、翌月まで待って再挑戦するという、まさに「意地」の戦いでした。

結局成功したものはリモートMCPではなく

ここまで読まれて気が付かれた方もおられるかもしれません。
数々のツールで失敗し、「もう課金するしかないのか…」と諦めかけたその時、最後に試したローカルMCPで成功しました。
リモートMCPのリの字すらありません。

"figma-remote": {
"command": "npx",
"args": [ "-y", "figma-mcp" ],
"env": {
"FIGMA_API_KEY": "YOUR_PERSONAL_TOKEN"
}
}

Figma内の自身のプロフィール画面から、必要事項を入力し設定すると、APIトークンを発行することができ、ローカルで動かせることができるのです。（当たり前）

でもFigmaで作成したデザインがそのままコードになるのは、面白かったです。

まとめ

Figmaで作成したデザインが、IDE上でスルスルとコードに変換されていく様子は、まさに魔法のようでした。

今回はプライベートでの検証でしたが、この「リモートMCP　もしくは　ローカルMCP」の手法は、いつか業務内でも標準構成として提案してみたいところです。