Figma AIを使用すると、数回クリックするだけで、デザインに複数のプロトタイプインタラクションとコネクションを追加できます。これにより、手動でインタラクションを追加する時間が短縮され、インタラクティブなプロトタイプを構築するためのワークフローがより迅速で簡単になります。
仕組み
Figma AIでインタラクションを追加すると、選択したフレーム間のインタラクションやコネクションを作成できます。例：
- 一部の最上位フレーム間にシンプルなフローを作成する
- [戻る]ボタンまたは[次へ]ボタンにインタラクションを追加する
- ナビゲーションメニューから個々のフレームにリンクする
これは、デザインから基本的なプロトタイプフローをすばやく構築する場合に役立ちます。また、いつでも各インタラクションをさらにカスタマイズしたり、プロトタイプにインタラクションを追加したりできます。
一貫したレイヤー名を使用すると、Figma AI出力の改善に役立ちます。Figma AIでレイヤー名を変更する方法をご覧ください。
AIとのインタラクションを追加
- インタラクションを作成したいキャンバス上のフレームを選択します。
- 右サイドバーの[プロトタイプ]タブを開きます。
- [インタラクション]セクションで、[インタラクションを追加]をクリックします。
Figma AIがデザインにインタラクションを追加し終わると、ページの下にインタラクションをプレビューできるバナーが表示されます。これにより、現在のフローがインラインプレビューでプロトタイプとして開きます。
すべてのインタラクションを受け入れるには、[変更を採用]をクリックします。
プロトタイプへの変更
Figma AIが追加したインタラクションの編集や削除に加え、手動で編集してさらにインタラクションを追加することもできます。
特定のインタラクションを選択するには、コネクションをクリックします。
- [インタラクションの詳細]モーダルがキャンバス上で開き、必要に応じて変更を加えることができます。
- そのインタラクションを削除するには、右サイドバーで対応のインタラクションを見つけて、をクリックして削除するか、キーボードのDeleteキーを押します。
- 現在のページのすべてのコネクションを削除するには、キャンバスを右クリックして[コネクションをすべて削除]を選択します。