Figmaでプロトタイプを作成していると、オブジェクトによってコネクション（接続）の「＋」マークが表示されるものと表示されないものがあり、画面遷移の設定ができず困ることがあります。特に、テキストをクリック対象にしたい場合や、フォルダやグループ内の要素を操作している場合は原因が分かりにくいケースがあります。
Figmaのコネクションが表示されない場合は、レイヤーの種類や選択方法、プロトタイプ設定の状態などが影響しています。この記事では、Figma初心者でも確認できる原因と、確実に接続するための手順を詳しく解説します。
Figmaのコネクションが表示されない主な原因
Figmaのプロトタイプ機能では、すべての状態でコネクション用の「＋」ボタンが表示されるわけではありません。まず確認したいのは、現在選択している対象がプロトタイプの開始地点として利用できるオブジェクトかどうかです。
例えば、テキストだけを選択しているつもりでも、実際にはテキストを含むフレームやグループ全体を選択している場合があります。この場合、表示される設定項目が変わり、目的の場所にコネクションを追加できないことがあります。
また、Figmaでは編集モードとプロトタイプ設定モードを切り替えて利用します。右側パネルで「Prototype」が選択されているか確認してください。
テキストにコネクションを設定する正しい方法
テキストをクリックして別ページへ遷移させたい場合は、まず対象のテキストレイヤーを正しく選択する必要があります。
具体的な手順は以下の通りです。
- Figma上でプロトタイプ化したいテキストをクリックする
- 右側パネルの「Prototype」タブを選択する
- 選択した要素の右側に表示される青い「＋」をクリックする
- 遷移先のフレームへドラッグして接続する
もしテキスト単体で「＋」が表示されない場合は、テキストが配置されているフレームやグループを一度確認してください。不要なグループ化が原因で、直接テキストに接続できない場合があります。
グループやフレームの中に入れすぎている場合の対処方法
Figmaでは、レイヤー構造が複雑になるほど選択対象が分かりづらくなります。特に、複数のグループやフレームの中にテキストを配置している場合、親要素にコネクションが付いてしまうことがあります。
例えば、ボタン用のテキストを「グループA」→「カードフレーム」→「ページフレーム」のように何重にも入れている場合、テキストではなく上位レイヤーが選択されている可能性があります。
このような場合は、左側のレイヤーパネルから目的のテキストレイヤーを直接クリックして選択すると解決することがあります。また、必要に応じてグループ解除やフレーム構成の整理を行うと管理しやすくなります。
遷移先には設定できるのに接続後に動かない場合
「遷移先としては設定できそうなのに、実際のプロトタイプでは動作しない」という場合は、開始地点やインタラクション設定が原因である可能性があります。
Figmaのプロトタイプでは、接続先だけではなく、接続元となる要素にトリガー設定が必要です。例えば「On click」「While hovering」などの操作条件が正しく設定されているか確認してください。
また、プレビュー画面では開始フレームが正しく設定されている必要があります。フレームに開始地点を示す青い再生アイコンが付いているか確認しましょう。
Figmaでコネクションを確実に作成するチェック項目
コネクションが作成できない場合は、以下の項目を順番に確認すると原因を特定しやすくなります。
- Prototypeタブを開いているか
- 正しいレイヤーを選択しているか
- テキスト単体ではなく親フレームを選択していないか
- グループ化によって選択対象が変わっていないか
- 接続先がフレームとして作成されているか
- プロトタイプの開始地点が設定されているか
例えば、ボタンデザインの場合はテキストだけに接続するよりも、ボタン全体をFrame化して、そのFrameにコネクションを設定する方法が一般的です。クリック範囲が広くなり、実際のアプリやWebサイトに近い動作確認ができます。
Figma初心者がプロトタイプ作成で失敗しないコツ
Figmaのプロトタイプでは、デザイン用のレイヤー構造と、操作対象となるレイヤー構造を分けて考えることが重要です。
例えば、見た目としてはテキストだけを押すように見える場合でも、実際の操作ではボタン全体をFrame化して接続することで、安定したプロトタイプになります。
また、レイヤー名を分かりやすく変更したり、不要なグループを減らしたりすることで、後から修正するときにもコネクション設定が管理しやすくなります。
まとめ｜Figmaでコネクションが出ない場合は選択対象を確認する
Figmaでコネクションの「＋」が表示されない場合、多くは選択しているレイヤーが違う、グループやフレーム構造が複雑になっている、Prototype設定を開いていないといった原因によるものです。
テキストに直接接続することも可能ですが、実際のWebサイトやアプリの操作を再現する場合は、ボタンやカードなどをFrame化して接続する方法がおすすめです。
レイヤー構造を整理し、正しい対象を選択してからPrototype設定を行えば、Figmaのコネクション機能を安定して利用できるようになります。
コメント