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

AIエージェントを使ってダッシュボードをより早く構築

Figma Designで実際のコンポーネントやデザイントークンを使用して、データ豊富なダッシュボードレイアウトを直接生成します。複数の方向性を同時に探り、スキャフォールディングを省いて構築を続けましょう。

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

AIエージェントでダッシュボードをデザインする理由

Figmaのエージェントは、お使いキャンバスのコンテキストを理解し、デザインライブラリに接続し、継続的に反復できる、本番準備が整ったダッシュボードレイアウトを生成します。

AIで生成されたデザインレイアウトが探索されているFigmaキャンバスAIで生成されたデザインレイアウトが探索されているFigmaキャンバス

高い忠実度で、さらに多くのレイアウトを探求する

Figmaのエージェントは、プレースホルダーのワイヤーフレームではなく、実際にお使いのコンポーネント、トークン、バリアブルを使用して、ダッシュボードのバリエーションを生成します。複数のデータの可視化アプローチを並べて確認し、効果的な方向を選んでください。

デザイン全体に適用される一括編集を表示しているFigma AIエージェントパネルデザイン全体に適用される一括編集を表示しているFigma AIエージェントパネル

スキャフォールディングを縮小し、フローを保つ

ダッシュボードのグリッド、カード構造、チャートコンテナーをはじめから作成するという繰り返しの作業をスキップします。必要なことを説明して、設定をエージェントに任せ、重要なデザインの決定に集中しましょう。

チームのフィードバックがデザインに統合されている様子を示すFigma AI エージェントパネルチームのフィードバックがデザインに統合されている様子を示すFigma AI エージェントパネル

チームを各イテレーションごとに調整

すべてのダッシュボードが、チームが作業するファイル内にあります。ステークホルダーは完全なプロンプト履歴、コンテキスト、修正を確認でき、エクスポートで何かが失われたり、別のハンドオフドキュメントに埋もれたりすることはありません。

ダッシュボードの裏にある機能

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

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

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

    エージェントをお使いのデザインシステムに向ける、実際のコンポーネントやカラートークン、スペーシング変数を使用して、本番準備が整ったダッシュボードを生成します。

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

    パラレルプロンプティング

    複数のダッシュボードの方向性を一度に探索。待つことなくプロンプトを並行して実行し、レイアウトやデータの可視化、情報階層を比較できます。

  • デザインコメントを含む共有されたFigma AI会話スレッドのスクリーンショットデザインコメントを含む共有されたFigma AI会話スレッドのスクリーンショット

    共有可能なスレッド

    スレッドを共有すると、チームはダッシュボードの背後にあるすべてのプロンプト、コンテキスト、反復履歴を見ることができます。別途引き継ぎを行う必要はありません。

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

    ワークフローをスキルとしてパッケージ化

    最高のダッシュボードプロンプトを再現性のあるスキルに変えましょう。同様のレイアウトが必要なときに、1コマンドで再実行できます。

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

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

Notionのロゴ

Figmaのエージェントを使い始めましょう

  • エージェントを開く

    左のレールでエージェントを選択するか、CMD+Enterキーを押します。キャンバスに作業用のフレームを追加します。

  • ダッシュボードの説明を記入

    必要なダッシュボードの種類、メトリクス、データタイプ、レイアウトの好みをエージェントに伝えてください。デザインライブラリを指定し、実際のコンポーネントを使用させます。

  • キャンバスで確認

    生成されたダッシュボードをキャンバス上で確認してください。同じスレッドで微調整するか、別の方向を探求するために並行してスレッドを開始します。

  • 反復を続ける

    もう一度プロンプトを行い、チャートを調整したり、カードを入れ替えたり、コンポーネントを交換したりします。すべての項目が編集可能なので、目的の結果が得られるまで、手作業で微調整することも、プロンプトを続けることもできます。

エージェントの専門家になる

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

    FigmaのAIエージェントがどのように機能するかをアクションで見て、独自のワークフローで活用する方法を確認してください。

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

    Figmaエージェントと作業する

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

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

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

    今すぐ見る

よくある質問

AIダッシュボードエージェントは、テキストプロンプトからデータの可視化レイアウトを生成できるよう支援します。Figmaのエージェントでは、必要なダッシュボード (メトリクス、チャート、データタイプ) を説明すると、デザインシステムコンポーネントを使用してキャンバス上で直接レイアウトを構築します。これはFigma Designに組み込まれており、ツールの切り替えが不要です。

Figmaのエージェントは入力されたプロンプトとキャンバスのコンテキストを読み取り、接続されたデザインライブラリを使用してダッシュボードレイアウトを生成します。コンポーネント、トークン、バリアブルを理解しているので、出力はプレースホルダーUIではなく、本番準備の整ったものとなります。複数のプロンプトを並行して実行して、異なる方向性を一度に探求できます。

ダッシュボードのレイアウトを完全に生成し、さまざまなデータの可視化アプローチを探求し、カードグリッドやチャートコンテナーをスキャフォールドし、フォローアップのプロンプトでレイアウトを反復できます。Figmaのエージェントは、繰り返しの設定作業を処理するため、デザインの洗練やチームとの調整に集中できます。

有用なダッシュボードエージェントは、デザインシステムに接続し、プレースホルダーの代わりに実際のコンポーネントを生成し、並行探索をサポートし、すべてを編集可能に保つことが望まれます。Figmaのエージェントは、あなたのキャンバス上でこれらすべてをネイティブに行い、共有可能なスレッドにより、チームが各イテレーションの背後にある完全なコンテキストを確認できるようにします。

Figmaのエージェントはすべての有料Figmaプランで利用可能です。それは Figma Design の左側のレールにあります。現在のオープンベータ期間中はAIクレジットを消費しませんので、探求、実験、フィードバックの共有を試してみてください。

Powered by Fruition