最近、Claude CodeとFigma MCPを組み合わせてFigmaのデザインを実装に落とし込む、というのを試してみたので、その過程で得た気づきを備忘録として残しておきます。きれいにまとまった成功談というよりは、つまずいたポイントとその対処法が中心です。
やったこと
まず、Figma MCPを使ってデザインを持ってくるためのスキルをClaude Code上に作りました。Claude Codeにスキルとして登録しておくことで、毎回同じ説明をしなくても「このページを実装して」と頼むだけでFigmaからデザイン情報を引っ張ってきてくれるようにする、というのが狙いです。
ハマったポイント1: get_design_contextがデータ量でエラーになる
最初はシンプルに、Figma上の対象の画面（フレーム）に対してそのままget_design_contextを呼び出していました。しかし、画面によってはコンポーネントの数が多かったり階層が深かったりして、取得しようとしたデータ量が大きすぎてエラーになってしまうケースがありました。
1画面まるごと一発で取ってくる、というやり方は便利な反面、規模が大きい画面では現実的ではないということがわかりました。
対処法: get_metadataで子ノードを先に取得する
そこで、データ量が大きくなりそうな場合は一度get_metadataを使って対象ノードの子ノードのID一覧を取得し、その子ノードそれぞれに対してget_design_contextを呼び出す、という二段階の方式に変更しました。
イメージとしては以下のような流れです。
- 対象のフレームに対して
get_metadataを実行し、配下の子ノードIDを洗い出す - 子ノードごとに
get_design_contextを呼び出し、デザイン情報を個別に取得する - 取得した情報を組み合わせて実装に反映する
一度に全部を取りに行くのではなく、粒度を細かく分割してから取得する形にしたことで、エラーを回避しつつ必要な情報はきちんと取得できるようになりました。地味な工夫ですが、効果は大きかったです。
ハマったポイント2: 共通コンポーネントの探索をAI任せにすると精度が低い
もう一つ苦労したのが、共通で使われているコンポーネント（ボタンやカードなど）をFigma上から探してきてもらう部分です。Claude Codeに「このページで使われている共通コンポーネントを探してきて」と丸投げすると、見当違いのコンポーネントを拾ってきたり、そもそも見つけられなかったりと、あまり精度が良くありませんでした。
対処法: 自分である程度指示を出す
これについては、AIに探索を完全に任せるのではなく、自分で「このコンポーネントはここにあるはず」「このNode IDを見て」といった形で具体的に指示を出すようにしました。完全自動化を諦めて人間が補助線を引いてあげることで、結果的に実装の正確性がかなり上がりました。
Figmaのファイル構成やコンポーネントの命名規則がプロジェクトごとにバラバラなことも多いので、現状ではAIに完全に委ねるよりも、ある程度人間が地図を渡してあげる方が安定して動く、という印象です。
まとめ
今回試してみて感じたのは、Figma MCPと組み合わせた実装はとても便利な反面、データ量や探索範囲をうまくコントロールしてあげないと途端に扱いづらくなる、ということでした。具体的には次の2点がポイントだったと思います。
- 画面全体を一度に取りに行かず、
get_metadataで子ノードを洗い出してからget_design_contextを呼ぶことでエラーを回避する - 共通コンポーネントの探索は完全に自動化せず、ある程度自分で当たりをつけて指示を出す
まだ手探りな部分も多いですが、同じようにFigma MCPを使った実装を試している方の参考になれば幸いです。今後も改善点が見つかったら追記していこうと思います。