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

やり取りを減らしてデザインを引き渡す

Figmaエージェントが、デザインがすでにあるキャンバス上で直接、仕様の準備、アセットの抽出、開発者からの質問への回答を手伝います。コンテキストの切り替えが減り、より明確なハンドオフが実現します。

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

実際に機能するハンドオフ

デザイナーと開発者を1つの共有スペースに保ちながら、面倒な準備作業はAIに任せて構築に集中しましょう。

AIが生成したデザインレイアウトを検討しているFigmaのキャンバスAIが生成したデザインレイアウトを検討しているFigmaのキャンバス

準備を自動化しつつ精度を維持

レッドラインの生成、間隔のドキュメント化、コンポーネント仕様の一覧化といった繰り返しのハンドオフ作業をエージェントに任せて、本当に注意が必要なデザインの意思決定に集中できます。

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

質問が出る前に答えを用意

エージェントは、コンポーネント名、スタイルトークン、インタラクションのメモなど、開発者が必要とするコンテキストを提示します。チャットでのやり取りが減り、誤解が減り、ビルドも速くなります。

チームのフィードバックをデザインに統合しているFigma AIエージェントパネルチームのフィードバックをデザインに統合しているFigma AIエージェントパネル

チームを1つの共有ファイルで連携させる

仕様、アセット、デザインのコンテキストは作業そのものと一緒に存在します。開発者は最新バージョンを確認でき、デザイナーは何が構築されているかを把握できます。書き出しや情報の翻訳による損失もありません。

より良いハンドオフを支える機能

デザインチームの実際の働き方に合わせて作られた、Figmaエージェントならではの特長を詳しく見ていきましょう。

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

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

    エージェントは仕様を生成する際に実際のコンポーネント、トークン、バリアブルを参照するため、開発者はプレースホルダーの値ではなく正確なドキュメントを得られます。

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

    並行プロンプト

    複数のフレームを同時にハンドオフ準備できます。あるセクションをドキュメント化しながら、別のセクションからアセットを抽出することも、待ち時間なく可能です。

  • デザインへのコメントが付いた、共有されたFigma AI会話スレッドのスクリーンショットデザインへのコメントが付いた、共有されたFigma AI会話スレッドのスクリーンショット

    共有可能なスレッド

    ハンドオフのスレッドを共有すると、開発者はプロンプト全体、コンテキスト、反復の履歴を確認できます。質問と回答は作業に紐づいたまま残ります。

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

    追加プロンプトで調整

    特定のコンポーネントについて詳細が必要な場合は、同じスレッドで質問しましょう。エージェントはコンテキストを記憶しているため、最初からやり直すことなく反復できます。

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

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

Notionのロゴ

Figmaエージェントを使ってみる

  • ハンドオフするフレームを選択

    Figma Designでファイルを開き、開発向けに準備が必要なフレームやコンポーネントを選択します。

  • 開発者に必要な情報を説明する

    間隔の仕様、コンポーネント名、インタラクションのメモ、書き出し可能なアセットなど、ドキュメント化したい内容をエージェントに伝えます。どのコンテキストが最も重要かを具体的に伝えましょう。

  • ドキュメントを確認

    キャンバス上で生成された仕様を確認します。不足がある場合は同じスレッドで調整するか、別のフレームについて並行プロンプトを実行しましょう。

  • チームと共有

    開発者は同じファイルに完全なコンテキストとともにアクセスできます。スレッドのリンクを共有すれば、何がどのように変わったのかを正確に確認できます。

エージェントを使いこなす

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

    Figma AIエージェントの実際の動作を見て、自分のワークフローにどう活かせるかを確認しましょう。

    詳細はこちら
  • 「開始」ボタンとサンプルのチャットプロンプト「Figma、読書アプリ用に異なるレイアウトを作成できますか?」が表示されたFigmaエージェントプレイグラウンドの導入画面「開始」ボタンとサンプルのチャットプロンプト「Figma、読書アプリ用に異なるレイアウトを作成できますか?」が表示されたFigmaエージェントプレイグラウンドの導入画面

    Figmaエージェントを使ってみる

    一括編集からフィードバックの反映まで、Figmaエージェントの機能をステップバイステップのガイド付きで実際に試せるプレイグラウンドです。

    始める
  • デザインワークフローでのFigmaエージェントの使い方

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

    今すぐ見る

FAQ

AIデザインハンドオフアシスタントは、仕様の生成、間隔やスタイルのドキュメント化、アセットの抽出といった、デザインを開発向けに準備する際の面倒な作業を自動化するツールです。Figmaエージェントはこれをキャンバス上で直接行うため、開発者が必要とするすべての情報がデザインが存在するのと同じファイルにとどまります。別のハンドオフツールや書き出しは不要です。

AIは、デザインをドキュメント化し、開発者からの繰り返しの質問に答える手作業を減らします。Figmaエージェントは、レッドラインの生成、コンポーネント仕様の一覧化、デザイントークンの自動表示ができます。これにより誤解が減り、対応が速くなり、デザイナーがドキュメント作成の単純作業に費やす時間も減ります。

実際のデザインと一緒に仕様を保持し、実際のデザインシステムを参照し、チームが1か所で協働できるツールを探しましょう。Figmaエージェントはこの3つすべてを満たします。実際のコンポーネントとトークンを使ってドキュメントを生成し、すべてがデザイナーと開発者の両方が作業する共有ファイル内に残ります。

ハンドオフしたいフレームを選択し、左サイドバーからFigmaエージェントを開くか、CMD + Enterを押して、必要なドキュメントを説明します。エージェントが仕様を生成し、アセットを抽出し、キャンバス上で直接コンテキストをドキュメント化します。開発者はその後、同じファイルですべてにアクセスできます。

Figmaエージェントは、すべての有料Figmaプランでご利用いただけます。Figma Designの左サイドバーからアクセスできます。現在のオープンベータ期間中はAIクレジットを消費しないため、今のうちにぜひ試してフィードバックをお寄せください。