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

キャンバス内でのデザインAI

Figmaのエージェントは、Figma Design内で機能し、プレースホルダーではなくデザインコンテキストを基に構築されます。オプションの探索、雑務の自動化、チームが既に作業している場所でのフィードバックの収集が可能です。

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

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

Figmaのエージェントを利用すると、キャンバスの外に移動しなくても、粗いアイデアから洗練されたデザインを生成できます。現在では、さらに多くのオプションを利用できるため、雑務を削減し、チーム全体の足並みを揃えることができます。

雑務を自動化して、集中力を維持

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

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

デザインAIで実際のデザインシステムを使用して、共有スペースでアイデアを生成することにより、汎用的なプレースホルダーではなく実際のオプションを比較できます。

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

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

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

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

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

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

    実際のコンポーネント、トークン、バリアブルを使用して生成および改良を行います。後で差し替える必要のあるプレースホルダーUIは使用しません。

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

    並行プロンプト

    複数のプロンプトを同時に実行することで、並行して評価できます。時間をかけて指示を一つずつ評価する必要はありません。

  • スクリーンショット。共有された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のエージェントに既存のデザインライブラリを指示するだけで、スタイル、コンポーネント、バリアブルを参照して出力を生成します。キャンバスに画像や既存のデザインを参照データとして追加することもできます。文脈を多く提供するほど、ブランドに沿った結果が得られます。

すべてのAIモデルと同様に、状況によって異なります。出力はプロンプト、ファイルのコンテキスト、タスクの複雑さによって変わるので、最終的な作業に使用する前に必ず確認する必要があります。最良の結果は、明確なプロンプトと実際のコンテキストを組み合わせたときに得られます。プロンプトのベストプラクティスを参照して、リクエストから多くの成果を引き出してください。

Figmaによるお客様のデータの利用は、当社のお客様契約に基づいて行われます。契約には、当社のサービスの維持、セキュリティ確保、および改善に関する規定が含まれています。アカウント設定で[AIコンテンツトレーニング]のトグルがオフの場合、コンテンツは当社のモデルのトレーニングに使用されません。Figmaでは、プライバシーを保護するために機密データを削除する措置も取っています。

Figmaのエージェントは、すべての有料Figmaプランで利用可能です。アクセス権がある場合、Figma Designの左側のナビゲーションバーにエージェントが表示されます。現在のオープンベータ版の利用期間中は、AIクレジットを消費しませんので、ぜひ探求や実験を行い、フィードバックを共有してください。