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

フッターをキャンバス上で生成

ナビゲーション、連絡先情報、SNSリンクを備えた完全なWebサイトフッターを、AIを使ってFigma Design上に直接作成できます。実際のコンポーネントとスタイルをそのまま使用でき、汎用テンプレートから作り直す必要はありません。

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

より多くのレイアウトを高い忠実度で検討

ブランドに合ったフッターのバリエーションを生成し、複数のレイアウトを並行して検討し、チームを同じファイル内で連携させましょう。

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

フッターを素早くチームで作成

Figmaエージェントは、実際のコンポーネント、タイポグラフィ、カラートークンを使ってフッターの選択肢を生成します。作り直しが必要なプレースホルダーのUIではありません。本番環境で使用できるバリエーションをキャンバス上ですぐに確認できます。

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

単純作業を削減し、集中力を維持

ナビゲーションリンク、著作権表示、SNSアイコンの面倒な組み立て作業は不要です。フッターに必要な内容を説明するだけでエージェントが土台を構築してくれるため、重要なデザインの意思決定に集中できます。

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

チームの足並みを揃え、認識のズレを解消

生成されたフッターはチームが作業している同じファイルに反映されます。全員が最新バージョンを確認し、直接コメントを付け、すぐに構築を続けられます。エクスポートやハンドオフで情報が失われることはありません。

フッターを支える機能

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

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

    デザインシステムを接続

    エージェントをデザインシステムに接続すると、生成されるすべてのフッターが実際のコンポーネント、間隔トークン、ブランドカラーを使用し、すぐに本番環境で使用できます。

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

    並行プロンプト

    異なるレイアウト、リンク構成、ビジュアル処理といった複数のフッターの方向性を一度に生成し、キャンバス上で並べて比較できます。

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

    共有可能なスレッド

    スレッドを共有すると、チームはプロンプト全体、コンテキスト、反復履歴を確認できます。別途ハンドオフや説明は不要です。

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

    追加プロンプトで調整

    最初の結果がしっくりこない場合は、同じスレッドで調整するか、進捗を失うことなく並行スレッドで別の方向性を試せます。

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

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

Notionのロゴ

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

  • エージェントを開く

    左サイドバーで「エージェント」を選択するか、CMD + Enterを押します。フッターを表示したい場所にフレームをキャンバスに追加します。

  • フッターを説明する

    ナビゲーションリンク、連絡先情報、SNSアイコン、法的表記など、含めたい内容をエージェントに伝えます。実際のコンポーネントを使用するにはデザインライブラリを指定してください。

  • キャンバス上で確認

    生成されたフッターを確認します。しっくりこない場合は、同じスレッドで調整するか、別のレイアウトの方向性を検討するために並行スレッドを開始しましょう。

  • 反復を続ける

    フッターが完成するまで再度プロンプトを入力し、必要に応じて手動で微調整します。キャンバス上ですべて完全に編集可能な状態が保たれます。

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

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

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

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

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

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

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

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

    今すぐ見る

FAQ

AIフッタージェネレーターは、テキストによる説明からWebサイトのフッターデザインを作成するツールです。ナビゲーションリンク、連絡先情報、SNSアイコンなど必要な要素を説明すると、AIが完全なフッターレイアウトを組み立てます。Figmaエージェントを使うと、これらのフッターは実際のコンポーネントとスタイルを使ってデザインキャンバス上に直接生成されるため、すぐに使用できます。

Figma Designでファイルを開き、左サイドバーからエージェントを選択します。含めたいリンク、セクション、情報など必要なフッターを説明します。実際のコンポーネントを使用するにはデザインライブラリを指定してください。フッターはキャンバス上に直接生成され、完全に編集可能ですぐに調整できます。

優れたフッターには通常、主要ページへのナビゲーションリンク、連絡先情報、SNSリンク、著作権やプライバシーポリシーへのリンクといった法的表記、場合によってはニュースレター登録や会社概要が含まれます。Figmaエージェントは、プロンプトに応じてこれらの要素を任意の組み合わせでフッターとして生成できます。

はい。Figmaエージェントは並行プロンプトに対応しているため、異なるレイアウト、リンク構成、ビジュアル処理など複数のフッターレイアウトを同時に生成できます。キャンバス上で並べて比較し、最も良い方向性を選ぶか、異なるバージョンの要素を組み合わせることができます。

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