Figma、AIエージェントにキャンバスを開放　Claude Codeなどが直接デザインを編集可能に

これまでAIに画面デザインを任せると、どこか見覚えのある無個性なモックアップばかりが出力されていました。AIはあなたのチームが定めたブランドカラーも、ボタンの余白ルールも、デザインシステムも知らなかったからです。

Figmaは3月24日、この課題を根本から解決する「Figma MCP server」のベータ版を公開しました。これにより、Claude CodeやCodex、CursorといったMCP対応のエージェントが、Figmaのキャンバスに直接アクセスできるようになりました。既存のコンポーネントや変数を使ってデザインを新規作成したり編集したりできます。ベータ期間中は無料で利用でき、将来的には従量課金制へ移行する予定です。

コードとキャンバスをつなぐ双方向の仕組み

今回の主役は「use_figma」と呼ばれる新しいツールです。

Figmaはこれまでも、公開サイトのHTMLを取り込んで編集可能なレイヤーに変換する「generate_figma_design」を提供していました。これはコード側の最新状態をデザインに反映させるためのものです。

これに対して新登場のuse_figmaは、エージェントがチームのデザインシステムを活用してキャンバス上で直接アセットを生成・編集できるようにします。Codexのデザインリードを務めるEd Bayes氏は、OpenAIチームも製品の意思決定にFigmaを活用しており、Codexがその文脈を直接扱えるようになった恩恵は大きいと語っています。

MarkdownでAIに「チームの流儀」を教え込む

エージェントにキャンバスの編集権限をそのまま渡すと、ルールを無視した要素が散らかりかねません。そこで導入されたのが「Skills（スキル）」です。

SkillsはMarkdown形式で書かれた指示ファイルで、プラグイン開発やプログラミングをすることなく誰でも作成できます。土台となる「/figma-use」がFigmaの構造や基本原則をAIに教え、その上に個別のルールを積み重ねる設計です。

初期リリースとして、コードベースやJSONからのコンポーネント生成、トークンの自動同期、スクリーンリーダー向けアクセシビリティ仕様の作成など、コミュニティ製の9つのスキルが提供されています。Claude Codeのプロダクト責任者であるCat Wu氏が指摘するように、チームの意図や判断基準をそのままエージェントに守らせることが可能です。

さらに、生成結果をスクリーンショットで検証し、ズレを自ら修正するセルフヒーリング機構も備えています。画像単位の修正ではなく、Auto Layoutや変数といった構造そのものを調整する点も実用的です。

なぜ重要か

Figmaのこのアプローチは極めて巧妙であり、ツールの枠を超えた動きだと感じます。

現場のエンジニアやデザイナーにとって、デザインと実装の乖離という長年の悩みが解消に向かいます。Claude Codeのようなエージェントを動かすだけで、デザインシステムの規約に沿った画面がキャンバス上に直接整い、手作業での同期作業を劇的に減らせます。

業界全体で見ても、Figmaは単なるデザインツールから「AIエージェントが働くためのUI基盤」へと進化しつつあります。単独でUI画像を吐き出すだけの生成AIツールとは違い、企業が蓄積してきた生きたデザイン資産と直結している点が決定的な強みです。

一方で、共有キャンバス上でエージェントが勝手に手を加えた際のバージョン管理や、ベータ終了後の従量課金コストがどれほどになるかという懸念は残ります。それでも、デザインとコーディングの分断を埋める決定打になる可能性は十分にあります。