Figma にハイパーリンクを追加する方法

共同設計ツール Figma の最も便利な機能の 1 つは、ハイパーリンクを追加できることです。この機能を使用すると、オンライン ページへの接続が簡単になります。ハイパーリンクを使用すると、サイト内を簡単に移動できます。リンクにより、サイト訪問者は重要なリソースやランディング ページなどの情報に直接アクセスできます。

How To Add A Hyperlink In Figma

アイコンやテキストにリンクを追加する方法を学ぼうとしているのか、一般的にハイパーリンクを挿入する方法を学ぼうとしているのかに関係なく、この記事はあなたをガイドします。これを達成するために使用できるさまざまな方法を理解するには、読み続けてください。

アイコンを使用したハイパーリンクの作成

これは、Figma で使用できる最も一般的なタイプのリンクの 1 つです。ここでは、リンク アイコンを使用してテキスト リンクを追加します。これらの手順は画像では機能しません。

  1. ページ上のテキストを使用して、セクションの先頭をクリックしてドラッグすることにより、別のページにリンクするテキストを強調表示します。
    How To Add A Hyperlink In Figma
  2. テキストを強調表示した後、ワークスペースの上部にあるツールバーの「リンク」アイコンをクリックします。これにより、強調表示された単語の上にボックスが作成されます。
    How To Add A Hyperlink In Figma
  3. 別のタブで、リンク先の Web ページを開き、その Web ページを強調表示して、Mac の場合は「Command」+「C」、Windows の場合は「Control」+「C」を押してその URL をコピーします。
    How To Add A Hyperlink In Figma
  4. 強調表示されたボックスの上にある URL ボックスに移動し、その中をクリックします。
    How To Add A Hyperlink In Figma
  5. Mac の場合は「Command」+「V」、Windows の場合は「Control」+「V」を押します。これにより、ボックスに URL を貼り付けることができます。
    How To Add A Hyperlink In Figma
  6. ページ上の空のスペースをクリックするか、「Enter」を押してテキストにリンクを追加します。単語の下に線が表示されます。ユーザーがその単語をクリックすると、リンク アドレスに移動します。
    How To Add A Hyperlink In Figma

キーボード ショートカットを使用してリンクを作成する

これは、Figma リンクの作成に使用できる 2 番目の方法です。キーボード ショートカットを使用すると、画像ではなくテキストにリンクを追加できます。

  1. リンクとして使用するテキストまたは単語を選択します。
    How To Add A Hyperlink In Figma
  2. これらのショートカットを使用して、強調表示された単語またはテキストの上にボックスを作成します。
    How To Add A Hyperlink In Figma
    • Windows デバイスで「Control」+「K」を押します。
    • Mac デバイスで「Command」+「K」を押します。
  3. ボックス内に必要な URL を貼り付けます。
    How To Add A Hyperlink In Figma
  4. 「Enter」ボタンを押してハイパーリンクを作成します。
    How To Add A Hyperlink In Figma

プロトタイプ パネルを使用してハイパーリンクを作成する

この方法は画像とテキストの両方に使用できます。ソーシャル メディアのアイコンのように画像をリンクするのに最適なオプションです。

  1. まずテキストまたは画像をクリックして選択します。
    How To Add A Hyperlink In Figma
  2. 「プロパティ」パネルに移動し、「プロトタイプ」を開きます。
    How To Add A Hyperlink In Figma
  3. 「インタラクション」の下の「プロトタイプ」メニューで、現在のインタラクションが利用可能な場合はそれを選択します。存在しない場合は、「+」アイコンをクリックして追加します。
    How To Add A Hyperlink In Figma
  4. リンクを正常に追加するには、インタラクション設定を調整します。
    How To Add A Hyperlink In Figma
    • インタラクションを「クリック時」に設定します。
    • 次に、アクションを「リンクを開く」に設定する必要があります。
    • リンクを URL ボックスに貼り付けます。
    • ユーザーがリンクをタップしたときに新しいタブを開くには、「新しいタブで開く」オプションをチェックします。
  5. プロトタイプ パネルを終了して、画像またはテキスト リンクを追加します。これではイメージは変わりません。ただし、「現在」タブ内でデザインを表示する場合、画像の上にマウスを置くとカーソルが変わります。画像をクリックすると、追加したリンクが開きます。
    How To Add A Hyperlink In Figma

Figma ハイパーリンクの編集または削除

リンクが機能しないと感じた場合、またはリンクを削除したい場合は、編集または削除できます。リンクを編集するには:

  1. マウスを使用してリンクされたテキストの上にカーソルを置くと、リンク モーダルが開きます。
    How To Add A Hyperlink In Figma
  2. モーダルの横にある「編集」オプションを選択してアドレスを編集します。
    How To Add A Hyperlink In Figma
  3. 必要に応じて変更を加えて終了します。
  4. 削除するには、リンク ボックスをクリアします。これにより URL が完全に削除され、テキストはリンクされなくなります。
    How To Add A Hyperlink In Figma

Figma にハイパーリンクを追加してアクセシビリティを向上

Figma のハイパーリンクにより、ユーザーはコンテンツ内を簡単に移動できるようになります。リンクにより、ユーザーを他の Figma ファイル、ページ、フレーム、またはプロトタイプに誘導できます。リンクは外部 Web サイトに接続され、ブラウザーの新しいタブに移動することもあります。ハイパーリンクを追加するにはさまざまな方法がありますが、上記の手順で簡単に追加できます。

Figma にハイパーリンクを追加しようとしたことがありますか?どのような経験でしたか?以下のコメントセクションでお知らせください。

Sign up and earn $1000 a day ⋙

FireStick に Cinema HD をダウンロードする方法

FireStick に Cinema HD をダウンロードする方法

FireStick を使用すると、さまざまなストリーミング オプション用のサードパーティ アプリをダウンロードできます。その一例がCinema HDです。このアプリを使用すると、多くの項目を選択して表示できます

Canvaでコラージュを作成する方法

Canvaでコラージュを作成する方法

コラージュは、より記憶に残るキャンペーンを作成するのに役立つため、広告でトレンドになっています。個人的な写真共有用にコラージュを作成したい場合でも、

Spotify でファミリープランに誰かを追加する方法

Spotify でファミリープランに誰かを追加する方法

Spotify でお気に入りの曲をさまざまな方法で聴きたい場合は、Spotify ファミリー プランを選択してください。このサービスに登録すると、

Instagram リール カバー テンプレート

Instagram リール カバー テンプレート

Instagram リール カバーは、アカウントに統一された美学を与え、クリエイターからブランドに昇格します。どこにアクセスすればよいかわからない場合は、

ムデジョジョのキャラクター

ムデジョジョのキャラクター

人気の Discord ゲーム ボット Mudae を使用すると、プレイヤーはお気に入りのアニメ、マンガ、ビデオ ゲーム シリーズのキャラクターを収集できます。数十の大作アニメ

Instagram ストーリーをオンラインでダウンロードする方法

Instagram ストーリーをオンラインでダウンロードする方法

Instagram ストーリーの有効期間は 24 時間で、その後はプロフィールから消えます。あなたのストーリーにもう一度訪れたい思い出がある場合

Googleフォームの回答に基づいて次の質問を変更する方法

Googleフォームの回答に基づいて次の質問を変更する方法

Google フォームを使用すると、さまざまなアンケート、アンケート、アンケート、クイズなどを作成できます。長い調査を行うのは、人によっては退屈になる場合があります

現在発売されている最新の Kindle は何ですか?

現在発売されている最新の Kindle は何ですか?

現在の Kindle リリースを反映するために、Steve Larner によって 2022 年 11 月 23 日に更新されました。 Amazon の Kindle は、米国の電子書籍リーダー市場における決定的なリーダーです。

24 時間で最も視聴された YouTube 動画は何ですか

24 時間で最も視聴された YouTube 動画は何ですか

統計と分析は YouTube の重要なコンポーネントです。このプラットフォームは、最も多くの動画を含む、いくつかの成果を追跡しています。

Minecraft で古代都市を見つける方法

Minecraft で古代都市を見つける方法

古代都市を見つけるのは複雑な場合がありますが、得られる戦利品を考慮すると、ナビゲートする価値があります。エンシェントシティはワイルドアップデートで追加されました

Steamでアバターフレームを入手する方法

Steamでアバターフレームを入手する方法

Steam は主にゲームをダウンロードしてプレイするために使用されるアプリですが、Steam プロフィールはゲームとつながる方法として自己表現の手段となりえます。

Amazon Prime Videoから履歴とウォッチリストを削除する方法

Amazon Prime Videoから履歴とウォッチリストを削除する方法

https://www.youtube.com/watch?v=x1-ENWpA5Jc Amazon Prime Video はサービスを継続的に改善し、サービスを改善するための新機能や製品を提供しています。

Smartsheet とAirtable: どちらが良いですか?

Smartsheet とAirtable: どちらが良いですか?

プロジェクトを効率的かつタイムリーに完了するには、適切なプロジェクト管理が不可欠です。 Smartsheet と Airtable はプロジェクトに検討できる 2 つのツールです

Minecraft でバナー パターンを作成する方法

Minecraft でバナー パターンを作成する方法

Minecraft は、生き続けるために創造性を活用することがすべてです。ゲーム内で創造力を発揮するためのあまり評価されていない方法の 1 つは、バナーを使用することです。彼らはそうではありません

Microsoft が Surface Pro 6 を発表、知っておくべきことは次のとおりです

Microsoft が Surface Pro 6 を発表、知っておくべきことは次のとおりです

Microsoft Surface Pro 6 は、ニューヨーク市で開催された年次イベントで Microsoft によって発表され、同社の Surface Pro シリーズの後継製品となります。可も知れません

CS50: 世界で最もエリートなコンピューティング コースの内部

CS50: 世界で最もエリートなコンピューティング コースの内部

マーク・ザッカーバーグとスティーブ・バルマーを講師に数えられる大学のコースは多くありません。これ以上の大学のコースはあまりありません。

IPad のクリップボードをクリアする方法

IPad のクリップボードをクリアする方法

iPad のクリップボード上のコンテンツをコピーすると、ユーザーはテキスト、写真、ビデオなどに簡単にアクセスできるため便利です。ただし、情報をコピーすることもできます。

KineMaster を使って YouTube にアップロードする方法

KineMaster を使って YouTube にアップロードする方法

KineMaster のビデオ編集アプリを使用している場合、YouTube にビデオをアップロードする方法が疑問に思うかもしれません。結局のところ、オンラインビデオ共有アプリは他の追随を許しません

フォートナイトでフォースを使用する方法

フォートナイトでフォースを使用する方法

「フォートナイト」と「スター・ウォーズ」のコラボレーションは、プレイヤーに特別なフォースパワーと「スター・ウォーズ」クエストをもたらしました。フォースの力は第4章で登場しました。

Robloxに友達を追加する方法

Robloxに友達を追加する方法

Roblox は、世界を作成する創造的でユニークな方法を提供します。 Roblox とそのゲームでのゲーム体験を共有したい場合は、友達を追加してください。