Figmaのデザインエージェントにカスタムツールとより拡充されたコンテキストを導入
プロンプトから始まります。カスタムツール、実際のコンテキスト、スキルがデザインエージェントをさらに発展させ、キャンバスに描かれるものがもっとあなたらしくなります。
Figmaのデザインエージェントにカスタムツールとより拡充されたコンテキストを導入を共有
効率性を上げるエージェントと、あなたの仕事ぶりを理解するエージェントの違いは、コンテキストにあります。エージェントがチームの働き方を知っていれば、生成以上のこと、すなわち共同作業ができます。
そのコラボレーションが興味深くなるのは、Figmaキャンバス自体でツールやエフェクト、体験を作り出し、それまで不可能だったことを実現するところです。Figmaのデザインエージェント 今日から、Figma専用に設計されたエージェントと一緒にキャンバス上で直接作業を始めましょう。Figmaデザインエージェントが登場
自分用のツールを作成
カスタマースナップショット: Edward Chechique
プロダクトデザイナーであるEdward Chechique氏の生成プラグインは、HTMLをキャンバスにインポートし、ダッシュボードレイアウトを作成し、データを視覚化します。従来は、それらを作成するのは煩雑なプロセスでした。Edward氏は言います。「忙しい開発者に手伝ってもらう必要がありました。やがてAIツールがそれを可能にしましたが、それでもさまざまなツールやワークフロー間を切り替える必要がありました。今では、Figmaのエージェントで必要なものを直接求めることができるので、作業が格段に速く簡単になりました。可能性のなかったところから、大きな可能性へと飛躍しました。」
働き方は人それぞれですが、デザインツールはしばしば画一的です。レイアウト、テクスチャ、エフェクトは、いずれもデザインツールでネイティブにサポートされているもので決まります。今日から、デザインを作るようにツールを作ることができます。視覚的に実験できる幅が広がり、作品をチームと共有できるようになります。
生成プラグイン
プラグインはFigmaキャンバスでの可能性を拡張しますが、従来はプラグインを作成するには技術的なスキルと開発環境が必要で、それを持つデザイナーは多くありませんでした。今では、デザインエージェントにプロンプトを与えて再利用可能なプラグインを作成できるようになりました。
PropsKitを使用しているため、これらの生成プラグインのルック＆フィールは、Figmaネイティブさながらになります。キャンバス上で動作するため、反復作業の中でより直接的な制御が可能になります。AIサービスやサードパーティAPIなど、Figma Designの外でも使用されるものについては、引き続きクラシックプラグインを使用してください。
エージェントは問題を解決する方法を提案してくれました。私を助けてくれる開発者のように話しかけてきたため、私にとって魔法のようでした。
シェーダーエフェクトと塗り
カスタマースナップショット: Anna Zhang
クリエイティブテクノロジストのAnna Zhang氏は、自身の写真をコラージュ、マーブリング、光漏れ、金属エンボス、プリズム効果でリミックスするための独自のシェーダーを作成しました。彼女は言います。「過去にやってきたことを組み合わせたり、再利用可能なワークフローを構築したりする方法です。一つの出発点から多くの表現の可能性が広がります。」
Anna氏はエージェントにUIの処理を任せながら、機能性に集中しました。「私とエージェントの対話のようなもので、その出力をもとに私が追加するパラメーターが形作られました。まるで交渉のようでした。」
エージェントはシェーダーを構築することもできます。WebGPU We’ve updated our renderer to use WebGPU, unlocking new performance optimization opportunities. Here’s how we did it.Figma rendering: Powered by WebGPU
- シェーダーエフェクトは、Figmaのネイティブエフェクトのように見えますが、パーティクルストレッチやレンズの歪み、カラーアウトラインなど、完全に自分で作成されるものです。スタックし、プロパティを調整し、ネイティブエフェクトと組み合わせて、望む結果を得ることができます。
プラグインやシェーダーは、自身で作ったものでもチームメイトが共有したものでもコミュニティで見つけたものでも、全てのプランで無料で利用可能です。プラグインやシェーダーを作成するようにエージェントにプロンプトを出すには、Figma Designエージェントへのアクセスが必要で、一般公開されるとAIクレジットがかかるようになります。
- シェーダーの塗りは動的かつ生成的であり、単色やグラデーションを超え、水彩やモアレ、パターングリッドなどが追加されます。
シェーダーと生成プラグインは、クラシックプラグインやWeaveツール 本日、WeaveのクリエイティブワークフローをFigmaフレームと並行して活用できる新しい方法を発表します。
FigmaとWeaveの接続
デザインエージェントで作成するには、作成したいシェーダーの種類と操作したいプロパティを決定し、エージェントに構築させます。エージェントがキャンバス上でできることの質は、ユーザーが提供するもの次第です。
自分のツールを作成できれば、コントロールできるようになります。全てのツールには、何が可能であるべきかという世界観があります。
あらゆる会話に、もっと多くのコンテキストを
良いコンテキストは、エージェントに情報を提供するだけでなく、作成されるものを形作ります。エージェントがあなたのプロジェクトやブランド、働き方に近ければ近いほど出力の精度が向上します。
- ファイルを直接添付: ユーザーインタビューやUXコピー文書、データレポートなどのファイルをエージェントチャットにドロップします。エージェントは会話の中でそれを参照し、プロジェクトのコンテキストと指示を出力に反映させます。
- 他のFigmaファイルを参照する: Figmaファイルリンクを貼り付けると、エージェントはコンポーネントやトークン、レイアウト、スタイルなどの完全な構造を取得し、単なる平面画像からの推測ではなく、デザインパターンを理解し再現できます。
- ウェブを検索: エージェントは、Figmaを離れずに、リストする実際のレストラン名や写真、競合他社からの最新のUXパターン、リアルなモックアップ用の最新のコンテンツのようなライブデータを取り込むことができます。
- ツールを接続: MCPコネクターはGitHubやAtlassian、Slackなどのツールからコンテキストを直接エージェントに持ち込み、更新を投稿することもできます。Linearからプロダクトチケットを取得しデザインに反映させたり、Hexからのデータをコピーすることなく参照したりできます。
あなたの視点を拡大
良いプロンプトには、視点があります。スキルを使えば、その考えを保存し、チームと共有し、自分のファイルを超えて創造的な方向性を活用できます。
- カスタムスキルを作成:スキルは、特定のデザインを適用したり、デザインをレビューしたり、既に考え出したものを自動化したりするために、繰り返し使用するプロンプトを再利用可能なスラッシュコマンドに変えます。
- スキルをチームに公開: スキルを共有すると、あなたの考え方がチーム全体の働き方の一部になります。デザイン哲学やシグネチャーデザイン、フィードバックレンズなどが、どのチームメンバーでも取り入れ、学び、発展させられるものに変わります。
- コラボレーターのプロンプトを見る: 反復履歴は単なるログではなく、人の考え方を垣間見る窓です。エージェントの会話は、デフォルトでファイルのコラボレーターに表示され、プロセスを共有リソースに変えます。必要に応じて、プライベートに設定できます。
デザインの醍醐味は、頭にあるものが画面に現れる瞬間です。今日、そのアイデアを形にする方法が増えています。あなたのコードやプラグイン、シェーダー、コンテキストなど、全てがFigmaのキャンバス上にあります。Figmaのデザインエージェントはそれを可能にします。
Figmaのデザインエージェントは、プロフェッショナル、組織、エンタープライズプランのフルシートユーザー向けにオープンベータ版としてご利用可能です。コラボ、Dev、閲覧シートはドラフトでエージェントを使用できます。エージェントはベータ版の間、無料で利用できます。エージェントのプレイグラウンドファイルで実験し、デザインワークフローでのAIの効果的な使い方をご覧ください。Figmaエージェントや生成プラグインおよびシェーダーについて詳しくは、ヘルプセンターをご覧ください。
FigmaのCEO兼共同創設者であるDylan FieldによるConfigのまとめをお読みください。
