AI向けデザインシステムはコードを正にし、FigmaはMCPで作る「鏡」にする
Figma→コードだと見た目は整うが、フォーカス順やエラー状態はAIが「それっぽく」埋めるだけになりやすい。コードを唯一の正として部品を育て、FigmaライブラリはMCPで生成・同期する。
どんな問題を解決するか / いつ使うか
エージェントにFigmaから実装させているが、キーボード操作・空／エラー状態・フォーカスリングなどが毎回違うとき。デザインシステムの「正」がFigmaとコードで二重になっているとき。
やり方
- 正本をコード側に置く。トークン、部品の状態（default / hover / focus / disabled / error など）、アクセシビリティの振る舞いをコードとドキュメントで定義する。
- Figmaは手作業のマスターにしない。コードから MCP などで Figma のデザインシステムライブラリを生成し、見た目確認・ステッカーシート・レビュー用の「鏡」として使う。
- Figma→コードの一方向変換を主経路にしない。見た目の再現は得意でも、操作順や状態の網羅は推測で埋まりやすい、というのがこの記事の論点。
- ライブラリのメンテは「コードを直す → 鏡を再生成する」の順にする。Figmaだけ直してコードに戻さない。
コードからFigmaへ書き出して赤入れする往復自体は AIで作ったLP・実装をFigmaのデザインデータに戻し、Figma上で赤入れ・編集する も使えるが、正本をどちらに置くかがポイント。
注意点
- 既存の大きなFigmaライブラリがあるチームでは、いきなり逆転できない。新規部品やエージェント向けキットからコード正本にするのが現実的。
- MCPやプラグインの手順は記事・ツールごとに違う。方針（コード正・Figma鏡）を先に決め、ツールは後から選ぶ。
出典
- @seikei_kin · 2026-11-05
- 紹介記事: Building an AI-ready design system library: Code → Figma with MCP（UX Collective） uxdesign.cc