# Figmaの画面のLink設定方法

**URL:** <https://www.nocode-faq.com/t/topic/1297>\
**Category:** Figma\
**Tags:** ツールの操作方法\
**Created:** [2021 年 4 月 8 日午後 12:37 UTC](https://www.nocode-faq.com/t/topic/1297 "2021-04-08T12:37:33Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Question\_user](https://avatars.discourse-cdn.com/v4/letter/q/53a042/32.png) [@Question\_user](https://www.nocode-faq.com/u/Question_user)\
**Post date:** [2021 年 4 月 8 日午後 12:37 UTC](https://www.nocode-faq.com/t/topic/1297/1 "2021-04-08T12:37:33Z")

</div>

【解決済】Figmaの画面遷移方法について教えて下さい。  
例えば、プレビュー時にColor からtypografyへ遷移するようなリンクを作りたいです。

> **[Gyazo](https://gyazo.com/8243224aa6783b15c226d771111e1416)**

---

<div class="post-metadata">

**Author:** ![Answer\_user](https://avatars.discourse-cdn.com/v4/letter/a/eb8c5e/32.png) [@Answer\_user](https://www.nocode-faq.com/u/Answer_user)\
**Post date:** [2021 年 4 月 8 日午後 12:37 UTC](https://www.nocode-faq.com/t/topic/1297/2 "2021-04-08T12:37:33Z")

</div>

FigmaのLink先の設定は、2パターンあります。  
①prototypeからの設定  
画像のコンポーネントをクリック、右側のデザインのProtypeを選択して、Link先を設定  
【参考】  
Figma Tutorial: Prototyping

[![](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/c/c879c70304dfb409bcf0b9d87d2567ccd7207139.jpeg "Figma Tutorial: Prototyping (older version)") ](https://www.youtube.com/watch?v=-sAAa-CCOcg)

②該当のリンク先を直接貼り付ける方法  
指定のコンポーネントをクリック時に リンクアイコンが表示されます  
ここで、指定のリンク先を選択することができます。  
create link icon in the toolbar:

> **[Gyazo](https://gyazo.com/e2160fe7d103ab623b738ab7dec1cb63)**
>
> スクリーンショットや動画、ウェブサイトを簡単に共有できます。あらゆる情報を素早く簡単に、そして分かりやすく共有することで皆が幸せに。

【参考】Add links to text

> **[Add links to text](https://help.figma.com/hc/en-us/articles/360045942953-Add-links-to-text)**
>
> Who can use this feature
>  
> 
> 
> Available on all plans
> 
> 
> 
> 
> Users with edit access to a file can create and edit links
> 
> 
> 
> Users with view access to a file can only follow links
> 
> 
> 
> 
> Links in text also w...

日本語だとここの記事がわかりやすかったです。  
【入門】Figmaのプロトタイプを一から極める

> **[【入門】Figmaのプロトタイプを一から極める｜seya](https://note.com/seyanote/n/n904513c25c85)**
>
> 【2025年2月追記】 もはや5年前に書いた記事なので内容がやや古くなっております。最新のプロトタイプの情報を含めた「ノンデザイナーのためのFigma入門」という本を出版しているので、よろしければご覧ください！  
> 
> 
> ノンデザイナーのためのFigma入門
> 
> 
> 
> 
> 
> www.amazon.co.jp
> 
>  
> 2,860円
> 
> (2025年01月10日 17:22時点
> 詳しくはこちら)
> 
>  
>  
>  
>  
> 
> Amazon.co.jpで購入する
> 
>  
>  
>  
> 
> 
> 
> 
>  
> ...

## 参考URL

[![](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/c/c879c70304dfb409bcf0b9d87d2567ccd7207139.jpeg "Figma Tutorial: Prototyping (older version)") ](https://www.youtube.com/watch?v=-sAAa-CCOcg)

> **[Gyazo](https://gyazo.com/e2160fe7d103ab623b738ab7dec1cb63)**
>
> スクリーンショットや動画、ウェブサイトを簡単に共有できます。あらゆる情報を素早く簡単に、そして分かりやすく共有することで皆が幸せに。

> **[【入門】Figmaのプロトタイプを一から極める｜seya](https://note.com/seyanote/n/n904513c25c85)**
>
> 【2025年2月追記】 もはや5年前に書いた記事なので内容がやや古くなっております。最新のプロトタイプの情報を含めた「ノンデザイナーのためのFigma入門」という本を出版しているので、よろしければご覧ください！  
> 
> 
> ノンデザイナーのためのFigma入門
> 
> 
> 
> 
> 
> www.amazon.co.jp
> 
>  
> 2,860円
> 
> (2025年01月10日 17:22時点
> 詳しくはこちら)
> 
>  
>  
>  
>  
> 
> Amazon.co.jpで購入する
> 
>  
>  
>  
> 
> 
> 
> 
>  
> ...