メインコンテンツまでスキップ

キャンバスにネイティブに組み込まれた、AIデザインエージェント

Figmaのエージェントは、Figma Designに組み込まれたAIデザインエージェントです。プレースホルダーではなく、実際のコンポーネント、トークン、およびバリアブルを使用して、キャンバス上で論理的に思考し、行動し、マルチステップのデザインタスクを実行します。

  • AirBnb
  • Atlassian
  • Dropbox
  • Duolingo
  • GitHub
  • Microsoft
  • Netflix
  • The New York Times
  • Pentagram
  • Slack
  • Stripe
  • Zoom

実際の作業スタイルに合わせた設計

AIデザインエージェントは、単に質問に答えるだけにとどまるべきではありません。Figmaのエージェントは、キャンバス上で動作し、オプションを探索し、手間を省き、プロジェクトの全過程でチーム全体の足並みが揃うようサポートします。

Figmaキャンバスにフード/レシピのレイアウトのAI生成デザインが描かれ、「私のデザインでランディングページを作成する」と書かれたチャットのプロンプト吹き出しが表示されているFigmaキャンバスにフード/レシピのレイアウトのAI生成デザインが描かれ、「私のデザインでランディングページを作成する」と書かれたチャットのプロンプト吹き出しが表示されている

高い忠実度で、さらに探求する

AIデザインエージェントに、デザインシステムを使用して、共有スペースで実際のオプションを生成させると、一から始めなくても、比較と収束ができます。

Figma AIエージェンのトチャットインターフェースに、デザインシステムにダークモードの切り替え機能が適用されたカラースキームスイッチャーが表示されているFigma AIエージェンのトチャットインターフェースに、デザインシステムにダークモードの切り替え機能が適用されたカラースキームスイッチャーが表示されている

無駄な作業を減らして、集中する

直接的なビジュアル編集の精度を維持しながら、一括編集、レイアウトのスキャフォールディング、デザインシステムの監査をエージェントに委ねます。キャンバスの制御は自分で行います。

Figma AIエージェントパネルに、Doprandの読書アプリに関する会話が表示され、デザインに関するフィードバックやタスクの提案が示されているFigma AIエージェントパネルに、Doprandの読書アプリに関する会話が表示され、デザインに関するフィードバックやタスクの提案が示されている

チームの足並みを揃え、サイクルを完了させる

散在するフィードバックを統合し、あらゆるステークホルダーの視点からアイデアを検証し、ファイルで直接変更を反映させます。情報が適切に伝わらないことはありません。

エージェントを支える機能

デザインチームの実際の作業方法に合わせて構築された、Figmaのエージェントの特長を詳しく紹介します。

  • Figma AIエージェントがコンポーネントライブラリに接続され、デザインにブランドトークンを自動適用されているスクリーンショットFigma AIエージェントがコンポーネントライブラリに接続され、デザインにブランドトークンを自動適用されているスクリーンショット

    デザインライブラリに接続する

    後で置き換えなければならないプレースホルダーUIを使用せずに、実際のコンポーネント、トークン、バリアブルを使用して生成し、微調整します。

  • Figmaで同時に実行されている複数のAIデザインプロンプトのスクリーンショットFigmaで同時に実行されている複数のAIデザインプロンプトのスクリーンショット

    平行プロンプティング

    1つずつ順番に時間をかけて行わずに、複数のプロンプトを同時に実行し、指示を並行して評価します。

  • デザインに関するコメントが記載された、Figma AIの共有会話スレッドのスクリーンショットデザインに関するコメントが記載された、Figma AIの共有会話スレッドのスクリーンショット

    共有可能なスレッド

    スレッドを共有すると、チームはデザインの背後にあるすべてのプロンプト、コンテキスト、反復履歴を確認できます。引き渡しは別途必要ありません。

  • デザインワークフローを自動化するためのFigma AIエージェントのスキルオプションを示すスクリーンショットデザインワークフローを自動化するためのFigma AIエージェントのスキルオプションを示すスクリーンショット

    スキル

    チームのワークフローと規約を、誰でもいつでも実行できる再利用可能な/コマンドにパッケージ化します。

Figmaがまるで自分の手の延長として動いている感覚です。私がキャンバス上でデザインのアイデア創出を行い、エージェントが最後の仕上げをします。デザインライブラリに接続すると、デザインからコードへの移行がこれまで以上に速くなります。

Andy Madrick
プロダクトデザイナー、Notion

Notionのロゴ

Figmaのエージェントを使い始める

  • ステップ1: フレームから始める

    Figma Designを開き、作業に使用するフレームを追加します。左側のナビゲーションバーからエージェントを開いて、開始します。

  • ステップ2. インターフェースを説明する

    エージェントに何を作りたいのかを伝え、デザインライブラリを指示すると、エージェントは実際のコンポーネントとスタイルを使用します。

  • ステップ3. 出力を確認する

    キャンバス上で結果を確認します。満足な仕上がりではない場合は、同じスレッドで微調整するか、別の方向を探求するために並行スレッドを開くことができます。

  • ステップ4. 微調整するか、自動化を進める

    結果に満足できたら、ワークフローを再利用可能なスキルに変換すれば、次回も同じ方法でエージェントがそれを実行できるようになります。一からプロンプトを入力し直す必要はありません。

エージェントのエキスパートになる

  • Figmaのデザインエージェントが登場

    FigmaのAIエージェントがどのように機能するかをご覧いただき、自分のワークフローにどのように活用できるかを確認してください。

    続きを読む
  • [開始]ボタンと、サンプルチャットプロンプト「Figma、私の読書アプリのレイアウトをいくつか作成できますか?」が表示された、Figmaエージェントのプレイグラウンドの紹介画面[開始]ボタンと、サンプルチャットプロンプト「Figma、私の読書アプリのレイアウトをいくつか作成できますか?」が表示された、Figmaエージェントのプレイグラウンドの紹介画面

    Figmaエージェントと一緒に作業を進める

    ハンズオンプレイグラウンドで、一括編集からフィードバックの実施まで、Figmaエージェントの機能をステップバイステップのガイダンスで紹介します。

    始める
  • デザインワークフローでFigmaエージェントを使用する方法

    Figmaチームによるステップバイステップのチュートリアルで、デザインワークフローでFigmaエージェントを使用する方法を説明します。

    今すぐ見る

よくある質問

Figmaのエージェントは、Figma Designに組み込まれたAIデザインエージェントです。単なるチャットボットとは異なり、質問に答えるだけでなく、キャンバス上でレイヤーを作成および編集し、新しい方向性を探求し、リアルタイムでフィードバックを提供します。Figma Designにネイティブに組み込まれているので、サードパーティのツールは必要ありません。

はい。エージェントに参照させたいライブラリを選択すると、エージェントはスタイル、コンポーネント、バリアブルを使ってアウトプットを生成します。エージェントが共有ライブラリに新しいアセットを独自に公開することはできないため、その作業はユーザー自身が行う必要があります。ただし、エージェントがビルドしたアセットはすべて、ユーザー設定したデザインシステムから引き出すことができます。

制御の権限はすべてユーザーにあります。エージェントはユーザーの代わりになるものではありません。エージェントはユーザーと協力してアイデアを探り、反復作業を処理し、フィードバックを提供しますが、ユーザーはすべての出力を確認し、基準から外れているものはすべて上書きする必要があります。エージェントを利用する目的は、創作活動を完全に引き渡すことではなく、ユーザーがその作業に専念できるようにすることです。

Figmaによるお客様のデータの利用は、当社のお客様契約に基づいて行われます。契約には、当社のサービスの維持、セキュリティ確保、デバッグ、および改善に関する規定が含まれています。AIコンテンツトレーニングの切り替えがオンになっている場合、Figma固有のモデルの改善に役立てるために、コンテンツおよび使用データが利用される場合があります。機密データは非表示に設定されていますが、その設定は常にお客様が管理できます。

Figmaのエージェントは、すべての有料Figmaプランで利用可能です。Figma Designの左ナビゲーションバーで見つけることができます。現在のオープンベータ版の利用期間中は、AIクレジットを消費しませんので、ぜひ探求や実験を行い、フィードバックを共有してください。