FigmaのCode ConnectをMCPで使う

何が問題だったのか

AIにデザインを渡してコードを書かせる時、AIはその会社にどんな部品があるかを知りません。結果として次のどれかが起きます。

• 一から新しい部品を作ってしまう
• デザインシステムの中から、違う部品を選んでしまう
• 探すこと自体に時間とトークンを使う

やっかいなのは、できあがったものが見た目には正しく見えることです。画面としては成立しているのに、社内のコードの決まりから外れている——レビューで初めて分かる、という形になります。

Code Connectを入れると何が変わるか

AIがFigmaのMCPサーバーの get_design_context を呼んだ時に、返ってくる内容が変わります。

Figmaが挙げている例では、divを並べただけのタブの構造が返る代わりに、<SegmentedControl value="design" options={["Design", "Code"]} /> のように、実在する部品を正しい書き方で使った形が返ります。

つまりAIに「うちにはこの部品がある」と教える作業を、デザイン側で一度やっておく、という仕組みです。

公表されている効果

Figmaが公表している数値は、いずれも中央値での比較です。

この数値は、デザインシステムのうちどれだけをCode Connectで結びつけているかによって変わります。Figma自身も、結びつけた割合によって結果に差が出たとしています。一部だけ設定した状態で同じ効果を期待しないでください。

また、これは提供元が自社で測った数値です。導入を判断する時は、自分の環境で小さく試して確かめてください。

導入前に確認すること

設定そのものより、前提が揃っているかのほうが効きます。

1. デザインの部品とコードの部品が対応しているか — 名前も構造もばらばらだと、結びつける先が決まりません
2. どこまで結びつけるか決める — よく使う部品から始める。全部を一度にやろうとすると止まります
3. 誰が保守するか — 部品が変わった時に結びつけも直す必要があります
4. AIに何を任せるか — 部品の組み合わせまでか、画面全体までか

3番目が抜けやすい部分です。結びつけは一度作れば終わりではありません。コード側の部品を変えたのに設定が古いままだと、AIは存在しない使い方を返します。設定していない状態より分かりにくい失敗になります。

そのまま使ってよいわけではない

Code Connectを入れても、返ってきたコードをそのまま反映してよいことにはなりません。次は人が見てください。

• 部品の選び方が意図と合っているか — 使える部品を使っただけで、適切とは限りません
• 状態の扱い — 押した時、読み込み中、エラー時の動きは、デザインからは読み取れません
• アクセシビリティ — 見た目が合っていても、読み上げの順序や操作の手段が抜けることがあります

Code Connectが減らすのは「部品を探す・作り直す手間」であって、設計の判断まで肩代わりするものではありません。