‍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.

‍

Conclusion:

‍

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.

‍