Figma、指示文からカスタムプラグインを即座に生成するAIエージェントを発表

Figmaで作業している際、レイヤーの一括リネームや実データの流し込みといった細かな作業を自動化したい場合、これまではコミュニティで似たプラグインを探すか、社内のエンジニアにスクリプト作成を頼み込むしかありませんでした。

Figmaは年次カンファレンス「Config」にて、キャンバス上で直接動作する設計エージェントを発表しました。最大の見どころは、自然言語でやりたいことを説明するだけで、再利用可能なカスタムプラグインをその場で生成して動かせる点です。

プロンプトから動くツールを即座に生み出す

この生成型プラグインは、開発環境の構築やコードの知識を一切必要としません。UIにはFigmaの「PropsKit」が利用されるため、生成されたツールは既存の標準機能と見分けがつかないほど自然にキャンバスへ馴染みます。

プロダクトデザイナーのEdward Chechique氏は、HTMLをキャンバスへ直接取り込み、ダッシュボードのレイアウトを自動生成するプラグインをこれで構築しました。これまで外部のAIツールを行き来していた手間がなくなり、キャンバス内で指示を出すだけで完結するようになったと語っています。

機能は業務効率化スクリプトにとどまりません。WebGPUベースのレンダラーを活用し、ディザリング、ピクセル化、パーティクル変形、水彩風テクスチャといった独自のシェーダー効果もプロンプトから生成可能です。

クリエイティブテクノロジストのAnna Zhang氏は、写真に金属のエンボス加工や光漏れ効果を組み合わせるシェーダーを構築しました。UIの構築をエージェントに任せ、自分はパラメータの調整に集中できたと振り返っています。

デザインの文脈を理解するエージェント

指示文だけで的確なツールを作るため、Figmaはエージェントに深いコンテキスト理解を持たせました。

ユーザーインタビューのメモやUXコピーの資料を直接チャットにドラッグ＆ドロップして参照させることが可能です。別のFigmaファイルのリンクを渡せば、単なる見た目の画像ではなく、コンポーネント構成やデザイントークン、レイアウト構造を直接読み取ります。

さらにWeb検索機能や外部ツール連携規格であるMCPにも対応しており、実在する店舗名や画像を自動で集めてモックアップに反映できます。

作成したプラグインやシェーダーの利用は、自作・共有・コミュニティ経由を問わず全プランで無料です。エージェントを使って新規にツールを生成する機能のみ、正式提供時にAIクレジットを消費する形になります。

なぜ重要か

AIで一から画面を生成させるアプローチは、結局レイヤー整理や微調整に追われがちですが、Figmaが「デザイナー自身に道具を作らせる」方向に舵を切ったのは極めて現実的で賢い判断だと考えられます。

デザイン現場にはチーム独自の命名規則やワークフローが存在しますが、そうした小さな不便のためにエンジニアのリソースを割くのは困難でした。デザイナーが数分で専用スクリプトを仕立てて共有できるようになれば、組織全体の生産性は着実に底上げされます。

競合ツールに対しても強い差別化になります。単なる画像・UI生成機能ではなく、作業基盤そのものをユーザー自身が拡張できるプラットフォームへと進化しているためです。

懸念点としては、外部APIやサードパーティのAIサービスと通信する複雑なツールは依然として従来のプラグイン開発を必要とする点が挙げられます。また、コードが読めないデザイナーが予期せぬ不具合に直面した際、自力でデバッグできずエージェントの再生成頼みになるリスクは残ります。