また、ショートカットキーを使用してリンクを追加することも可能。Macの場合はCommand + K、Windowsの場合はControl + Kを押すとリンク入力ボックスが表示されます。URLを入力してEnterキーを押せばリンクが設定されます。このショートカットを覚えておくと作業効率が大幅に向上するのでおすすめです。

リンクを設定したテキストはデフォルトで下線が付きます。下線を削除したい場合、MacではCommand + U、WindowsではControl + Uのショートカットを使用します。テキストのスタイルや色を変更してリンクの視認性を高めることも可能です。

リンク機能の活用例と注意点

Figmaのリンク機能はさまざまな用途で活用できます。たとえば大規模なFigmaファイル内の特定のフレームやページへのナビゲーションリンクを作成したり、外部のWebサイトやドキュメントにリンクしたりできます。

リンクの編集や削除も簡単に行えます。リンク付きのテキストをダブルクリックしてテキスト編集モードに入り、リンクモーダルの「編集」ボタンをクリックすることで編集可能。URLを更新したり完全に削除してリンクを解除したりできます。ただし、レイヤーがロックされている場合は編集できないので注意が必要です。

なお、現時点では画像やベクトルオブジェクトへのリンク追加は、プロトタイプのホットスポット作成時のみ可能です。また、HTMLを使用したデフォルトメールクライアントへのリンク（mailto:など）は、現在サポートされていないことにも留意してください。

おすすめのPython研修一覧

Python研修を提供しているおすすめの企業・法人を一覧で掲載しております。

Python研修の一覧を見る

おすすめのDX研修一覧

DX研修を提供しているおすすめの企業・法人を一覧で掲載しております。

DX研修の一覧を見る

おすすめのJava研修一覧

Java研修を提供しているおすすめの企業・法人を一覧で掲載しております。

Java研修の一覧を見る

おすすめのJavaScript研修一覧

JavaScript研修を提供しているおすすめの企業・法人を一覧で掲載しております。

JavaScript研修の一覧を見る

Figmaプロトタイプでリンクを活用する方法

Figmaプロトタイプでリンクを活用する方法について、以下2つを簡単に解説します。

プロトタイプでのハイパーリンク設定方法
画面遷移とホバー効果の実装手順

プロトタイプでのハイパーリンク設定方法

まずはリンクを設定したいオブジェクトを選択し、右側の「プロトタイプ」タブを開きます。クリック時のアクションとして「リンクを開く」を選択し、表示される入力欄に目的のURLを入力して完了です。

この機能はサイトの部分的なリニューアル時に、更新しないページへのリンクとして活用できます。また、Google Formsで作成した入力フォームへのリンクや、「mailto:」を使用してメールソフトを起動するリンクなども設定可能です。プロトタイプ内で外部リソースへのスムーズな遷移を再現できるため、ユーザー体験の向上に貢献します。

さらに、自身が作成したプロトタイプデザインを纏めたポートフォリオページを、このハイパーリンク機能を利用してFigmaプロトタイプ内に作成することも可能。URLを発行できるほかのプロトタイプツールで作成したデザインも統合できるなため、複数のプロジェクトを一元管理するのに役立ちます。

画面遷移とホバー効果の実装手順

Figmaでプロトタイプの画面遷移を設定するには、まず「プロトタイプ」タブを選択します。遷移元のオブジェクト（ボタンなど）を選択すると表示される「＋」マークをクリックし、遷移先のフレームまで矢印をドラッグすることで基本的な画面遷移の設定完了です。

ホバー効果を実装するにはボタンをコンポーネント化し、バリアントを作成します。バリアントとは類似のデザイン要素のバリエーションをグループ化して管理する機能です。通常状態とホバー状態の2つのバリアントを作成し、それぞれのデザインを設定します。

プロトタイプタブでインタラクションを追加し、マウスオーバー時の動作としてホバー状態のバリアントに切り替わるよう設定します。これによりボタンにカーソルを合わせると色が変わるなどの動的な効果が実現できます。画面遷移とホバー効果を組み合わせることで、より洗練されたインタラクティブなプロトタイプが作成できるのです。

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。