Go Back
How do you Hyperlink in Figma?

How do you Hyperlink in Figma?

In this article we'll show you how you can create a hyperlink in Figma in three easy steps.

Pierluigi Giglio
September 22, 2023

Hyperlinks in Figma? You got it!

Whether you're crafting interactive user interfaces and user experiences, or even designing web and mobile app prototypes, hyperlinks are necessary for interactive navigation.

They are extremely important not only for acting as shortcuts to help the user go from one site to another with ease but also as a means of reference to a certain source of content.

Aside from that, in the design world hyperlinks are needed to connect the consumer of the content with the author themselves.

Their social media, websites, other similar works, etc. Hyperlinks make that connection seamless and easy to achieve.

In this article, we will discuss how Hyperlinks can be added to a Figma project.

Which components of Figma can I hyperlink?

As of now, we can add hyperlinks in Figma to these components:

  • Text Layers
  • Shapes and Icons
  • Frames
  • Hotspots
  • Buttons and UI Elements
  • Images
  • Vector Paths
  • Prototype Interactions
  • Text Links within Text Layers
  • Navigation Bars and Menus
  • External URLs
  • Interactive Widgets (plugins or third-party widgets)

How to add a Hyperlink to Figma?

Firstly, you will want to have the design completed. You can also add hyperlinks as you build the design, but that leaves room for potential changes made throughout. So it is better to be all set, and add the links in the end.

In the project below we will be adding a hyperlink to the Get Started button, and also to the social media buttons.

You will double-click on the text, and that is pretty much half of the work done! In the top panel, you can see the common icon of Hyperlinks. Otherwise, you can access it by the shortcut CTRL + K.

Click on the icon, and a small textbox will appear over the element you want to add a hyperlink to.

As the textbox states, you will type or paste the desired URL, and then the element will directly link you to it.

How do I hyperlink elements I can’t select in Figma?

That is also quite simple. You will have to create an element that can be hyperlinked, such as a text layer. In this case, we created three text layers for each social media icon.

T for X, I for Instagram, and D for Discord.

Then you will hyperlink each text layer (as shown previously in the article) to the corresponding link. In this case, the social media accounts.

To make the text layers disappear, just click the hide (eye) symbol on the right side of the menu that appears when you click on the selected layer. This will hide the text layer we just created, and leave only the hyperlink option.

Now the icons will be linked to the correct social media account. You can proceed and do this with any element in your design.


All in all, adding Hyperlinks to any elements in Figma is easily done. In the cases where the element doesn’t have the hyperlink option, you can simply add an invisible element on top of it and hyperlink that.

We hope that this guide aided and answered any questions you had. If you want to learn more about how to use Figma efficiently, you can visit our other resources.

Pierluigi Giglio

Sr. UI/UX Designer and Consultant with over 10+ years of experience working with Fortune 500, large enterprises and funded startups. Having worked on hundreds upon hundreds of design projects, collaborated with 40+ clients from all around the world and taught design to thousands of students I am very grateful that I have the opportunity to give back to the design community and help other become better designers.

Enjoyed this read?

Stay up to date with the latest design news and cutting-edge softwares, sent straight to your inbox!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.