デザインライブラリを接続
エージェントをデザインライブラリに接続すると、生成されるすべてのナビゲーションバーが実際のコンポーネント、アイコン、間隔トークンを使用します。汎用的なプレースホルダーではありません。
ナビゲーションバーをキャンバス上で生成
ナビゲーションバー、メニュー、ナビゲーションコンポーネントを、実際のデザインシステムを使ってFigma Design上でAIにより構築できます。必要なものを説明するだけで数秒で生成され、すぐに調整を加えられます。
ナビゲーションのオプションを高い忠実度で検討
エージェントはデザインライブラリを使用して、実際のナビゲーションバーコンポーネントをキャンバス上に生成するため、どのオプションも最初から本番環境で使用できる状態です。
デザインシステムでナビゲーションバーを生成
Figmaエージェントは、実際のコンポーネント、トークン、バリアブルを使ってナビゲーションバーを構築します。作り直しが必要なプレースホルダーのUIではありません。生成されたすべてのナビゲーションバーは、最初のプロンプトからデザインシステムに一致します。
単純作業を削減し、集中力を維持
アイコンの位置合わせ、リンクの間隔調整、ドロップダウンの手動設定といった面倒なセットアップ作業は不要です。必要なナビゲーション構造を説明するだけで、エージェントが土台を構築してくれるため、より重要な意思決定に集中できます。
チームの足並みを揃え、認識のズレを解消
生成されたナビゲーションバーは共有ファイル内に保存されるため、開発者や関係者もあなたと同じものを確認できます。エクスポートで情報が失われることはなく、全員が同じ唯一の情報源をもとに作業を進められます。
生成を支える機能
デザインチームの実際の働き方に合わせて作られた、Figmaエージェントならではの特長を詳しく見ていきましょう。
並行プロンプト
スティッキーヘッダー、ハンバーガーメニュー、メガナビをまとめて検討できます。複数のプロンプトを同時に実行して、待たずに複数の方向性を比較できます。
共有可能なスレッド
スレッドを共有すると、チームはプロンプト全体とコンテキスト、反復履歴を確認できます。別途ハンドオフは不要で、ナビゲーションバーの構築方法を全員が理解できます。
スキル化
ナビゲーションバーのワークフローを再利用可能なスキルに変換できます。ヘッダー、フッター、モバイルメニュー用のプロンプトをまとめて、チーム全員が実行できるコマンドにパッケージ化しましょう。
Figmaは、まるで自分の手の延長のように感じられます。キャンバス上でデザインのアイデアを練り、あとはエージェントが最後まで仕上げてくれます。デザインライブラリを接続すれば、これまでにない速さでデザインからコードへ進めます。
Andy Madrick
プロダクトデザイナー、Notion
Figmaエージェントを使ってみる
エージェントを開く
左サイドバーで「エージェント」を選択するか、CMD + Enterを押します。作業するフレームを追加するか、ナビゲーションが必要な既存のレイアウトを選択します。
ナビゲーションバーを説明する
ロゴとリンクを備えたスティッキーヘッダー、モバイル用のハンバーガーメニュー、ドロップダウン付きのメガナビなど、必要なものをエージェントに伝えます。正確なコンポーネントを使用するにはデザインライブラリを指定してください。
キャンバス上で確認
生成されたナビゲーションバーをキャンバス上で確認します。同じスレッドで調整するか、別のナビゲーションパターンを検討するために並行スレッドを開始しましょう。
反復を続ける
再度プロンプトを入力して、間隔の調整、アイコンの追加、レスポンシブバリエーションの検討ができます。すべて編集可能な状態が保たれるため、いつでも手動で微調整できます。
FAQ
AIナビゲーションバージェネレーターは、ゼロから構築する代わりに必要なものを説明するだけでナビゲーションバー、メニュー、ヘッダーコンポーネントを作成できるツールです。Figmaエージェントを使うと、ナビゲーションバーの生成は実際のコンポーネントとスタイルを使ってデザインキャンバス上で直接行われます。出力結果は完全に編集可能で、すぐに反復作業に取りかかれます。
Figma Designで左サイドバーからエージェントを開くか、CMD + Enterを押します。たとえば、ロゴ、横並びのリンク、CTAボタンを備えたヘッダーなど、必要なナビゲーションバーを説明します。エージェントがデザインライブラリを使用してキャンバス上に生成します。追加のプロンプトで正しい形になるまで調整しましょう。
Figmaエージェントは、デスクトップ、タブレット、モバイルの各ブレークポイント向けに異なるナビゲーションバーのバリエーションを生成できます。たとえばモバイルではハンバーガーメニューに折りたたむなど、必要なレスポンシブの挙動を説明すると、エージェントが各バリエーションを構築します。複数のレスポンシブアプローチを一度に検討するために並行プロンプトを実行することもできます。
エージェントが生成したナビゲーションバーはすべて、キャンバス上で完全に編集可能なレイヤーおよびコンポーネントとして生成されます。同じスレッドで再度プロンプトを入力して調整したり、プロパティを手動で調整したり、ライブラリからコンポーネントを差し替えたりできます。何も平坦化されたりロックされたりすることはありません。
Figmaエージェントは、すべての有料Figmaプランでご利用いただけます。Figma Designの左サイドバーからアクセスできます。現在のオープンベータ期間中はAIクレジットを消費しないため、今のうちにぜひ試してフィードバックをお寄せください。
Figmaエージェントでもっと速く作る