FigmaがキャンバスをAIに開放 — AgentsとSkills

Design

この記事の注目ポイント:Figmaが2026年3月24日から、AIエージェントが直接キャンバスに書き込みできる新機能「Agents on Figma Canvas」をオープンベータで提供開始したよ。エージェントはMCPサーバー(use_figma)経由でClaude CodeやCursorなどと連携し、デザインシステム準拠のフレームやコンポーネントを自動生成・編集できるんだ。さらに、チームの意図を伝えるMarkdownベースのSkillsで出力をコントロールできる点が大きなポイント。

3分で読めるように、重要な変更点と現場での使いどころをかんたんに解説するよ。

深掘り解説

まず何が変わったか。今回のアップデートで、AIエージェントがFigmaのキャンバス上に直接書き込みできるようになった。フレームやコンポーネント、変数、Auto Layout、デザイントークンまで操作できるのが注目点だ。

仕組みは、エージェントがFigmaのAPIにアクセスするための中継役としてMCPサーバー(use_figmaツール)を利用する方式。対応するエージェントにはClaude CodeやCursor、GitHub Copilot系のツールなどがあるよ。

もう一つのキモはSkillsフレームワーク。これはMarkdownファイルで、チームのコンポーネントの使い方や適用順序、スペーシングなどの意図をエージェントに教えるためのもの。コミュニティ製のSkillsも公開されていて、/figma-generate-designや/apply-design-systemなどすぐ使えるテンプレがある。

現場でのメリットをざっくり分けるとこうなる。デザイナー側は画面バリエーションの自動生成やトークン適用による一貫性確保で手作業が大幅に減る。開発者側はコードとFigmaの双方向同期(VS CodeやGitHub Copilot経由のpush/pull)が強化され、UIの反映が早くなる。

ただし留意点もある。コミュニティの反応では「出力がまだジェネリック」「Skills作成の整備コスト」「アクセシビリティ注記の精度」などの懸念が出ている。MCPのAPI安定性やSkillsの中身をどう管理するかが鍵になりそうだね。

まとめ

このアップデートは、デザインと開発の連携をより自動化する流れを加速するもの。まずはオープンベータで触って、手元のデザインシステムをSkills化してみるのがおすすめだよ。

短期的にはプロトタイプ作成や画面バリエーション生成で時短効果が期待できるし、中長期ではデザインの一貫性と開発フローの高速化につながるはず。ベータは無料、今後は従量課金になる予定だから早めに効果を確かめておくといいよ。

参考リンク


※内容の正確性には万全を期していますが、最新の仕様や公式情報については、必ず上記の参考リンク先をご確認ください。

タイトルとURLをコピーしました