Figmaのデザインを、Claudeにどう読ませるか｜精度とコストのトレードオフ
Figmaのデザインを、Claudeにどう読ませるか｜精度とコストのトレードオフ
この記事でわかること
- Figmaのファイルを直接渡す方法と、MCPで繋ぐ方法の違い
- 「正確な情報」と「絵」は別物という話
- MCPは無料でも使えるが、月6回という制限がある
- 画像を渡すだけでは精度は上がらない理由
- 実際にMCP接続をやってみた手順
生徒さんが就活用のポートフォリオサイトをFigmaでデザインして、それをClaude Codeにコーディングさせたい。そんな相談を受けたとき、最初に迷うのが「Figmaのデータをどうやって渡すか」です。
今回は、実際にFigmaファイルを渡してコーディングさせてみた話と、途中で気づいた「精度を上げるには何が必要か」という話を紹介します。
Figmaのファイルは、そのままでは読めない
Figmaで作ったデザインは .fig という拡張子のファイルで保存できます。これを渡せば読んでもらえるだろう、と思うかもしれませんが、実はそう単純ではありません。
.fig は中身がZip圧縮されたバイナリファイルで、しかもFigma社が仕様を公開していない独自の圧縮形式が使われています。ふつうにファイルを開いても、意味の分からない文字の羅列にしかなりません。
つまり、ファイルを渡されたその場で「はい読めました」とはならず、中身を解析するプログラムを別途書く必要があります。
それでも読めた理由
今回は、以前に別のFigmaファイルを同じ方法で解析した経験があったため、その手順を再利用してデコードできました。具体的には、Zipを展開し、中の圧縮データを解凍し、Figma独自のデータ構造に従って座標・色・フォント・テキストの情報を取り出す、という工程です。
ここで一つ発見がありました。デザインの中に「装飾用の複雑なイラスト」が含まれている部分だけは、どうしても座標データを復元できませんでした。数百本の線で描かれたイラストのデータが、また別の独自形式でエンコードされていたためです。
このイラスト部分だけは、Figma側で画像として書き出してもらう、という個別対応でカバーしました。
「正確な情報」と「絵」は別物
ここで一つ、大事な気づきがありました。
「イラストは画像で補ったなら、いっそ全部画像で渡した方が精度が上がるのでは」という疑問です。もっともな疑問だと思います。
しかし、実際はそうなりません。画像は「見た目」しか伝えられないからです。
Figmaのファイルから直接取り出せる情報には、こういうものがあります。
- 座標やサイズの正確な数値（ピクセル単位）
- フォントサイズ・行間・文字間隔の正確な数値
- 色の正確なコード（RGB値）
- テキストの文字列そのもの（コピー&ペーストと同じ）
これらを画像だけから読み取ろうとすると、AIが見た目から推測することになります。「だいたいこのくらいの余白だろう」「たぶんこの色だろう」という近似になり、実際のデザインとの誤差が生まれます。
つまり、精度を上げたいなら、画像を増やすことではなく、数値として取れる情報はなるべく数値のまま渡すことが大事だということです。今回のように「基本はデータで渡し、データ化できない部分だけ画像で補う」という組み合わせが、一番精度が高くなります。
MCPという、もう一つの入り口
.fig ファイルを直接解析する方法とは別に、Figma社が公式に用意している入り口があります。「MCP」という仕組みです。
MCPは、AIが外部のサービスと直接やり取りするための共通の窓口のようなものです。Figmaも専用のMCPサーバーを公開していて、これに繋ぐと、ファイルを解析するプログラムを自作しなくても、Figma側が正確なデータを直接渡してくれます。
複雑なイラストの座標データも、MCP経由なら正しく取得できます。ファイル直接解析の弱点を、MCPは持っていません。
ただし、無料には制限がある
ここで一つ注意点があります。
FigmaのMCPには「無料でも繋げる方式」がありますが、月に6回程度しかツールを呼び出せない制限がついています。1ページ分のコーディングでも複数回の呼び出しが必要になることが多いので、実質的には試しに1回使ってみる程度の枠です。
継続的に使うには、Figmaの有料プラン（月1500円程度から）への加入が現実的な選択肢になります。ClaudeのデスクトップアプリからFigmaに繋ぐ場合も同様で、Claude側の有料プランとFigma側の有料プランの両方が必要になるケースがあり、生徒さんに案内するには少しハードルの高い金額になります。
実際に接続してみた
仕組みを説明するだけでなく、実際にMCPの接続を試してみました。
繋ぐのに必要なのは、たった1行のコマンドです。
claude mcp add --transport http figma https://mcp.figma.com/mcp
これを実行すると、接続先の登録は一瞬で終わります。ただし、これだけではまだ使えません。登録の直後は「認証が必要」という状態で止まります。
ここでFigmaアカウントにログインし、「Claude Codeにアクセスを許可しますか」という画面で許可を出す、という一手間が必要です。この認証さえ済めば、あとは自動で繋がった状態が保たれます。
接続をいったん解除するのも簡単です。
claude mcp remove figma -s local
このコマンド一つで、今操作しているフォルダだけの接続を消せます。他のプロジェクトやパソコン全体には影響しません。
まとめ
.figファイルは独自形式なので、直接読むには解析プログラムが必要。無料・無制限だが、複雑な装飾イラストは再現できない- MCPはFigma公式の入り口で、複雑なイラストも含めて正確に取得できるが、無料は月6回程度の制限つき
- 精度を上げたいなら「画像を増やす」のではなく「数値で取れる情報はなるべく数値で渡す」が正解
- 接続はコマンド一行、解除も一行でできる
Figmaのデザインをコーディングさせる、というだけでも、裏側にはこれだけの選択肢とトレードオフがあります。まずは無料の範囲でできることを知った上で、必要に応じて有料の仕組みに手を伸ばす、という順番で考えると判断しやすくなります。
