How to Add a Hyperlink in Figma

Figma, a popular collaborative design tool, offers a variety of features to enhance the user experience. One such feature is the ability to add hyperlinks, which can significantly improve the navigability of a site by providing direct access to essential resources, landing pages, and other information.

This article will guide you through the process of adding hyperlinks to Figma, whether you’re trying to link icons, or text, or insert hyperlinks in general.

Highlights show

Hyperlink Creation Using Icon

One of the most common ways to add links on Figma is by using the Link icon to add a text link. However, it’s important to note that this method does not work for images. To create a hyperlink using an icon, follow these steps:

Highlight the text you want to link to another page by clicking at the beginning of the section and dragging over it.
After highlighting the text, click the “Link” icon in the toolbar at the top of the workspace. This action creates a box above the highlighted words.

Editing and Deleting Hyperlinks

Once you’ve created a hyperlink, you may need to edit or delete it. To do so:

Select the “Edit” option next to the modal to edit the address.
Make the necessary changes and exit. To delete the hyperlink, clear the link box. This action deletes your URL entirely, and the text is no longer linked.

Boost Accessibility by Adding Hyperlinks on Figma

Adding hyperlinks on Figma enhances user navigation. Your links can direct users to other Figma files, pages, frames, prototypes, or even external websites, opening in new browser tabs.

Creating Links Using Keyboard Shortcuts

Another method to create a Figma link is by using keyboard shortcuts. This method also works only for text, not images. Here’s how:

Select the text or word you want to serve as the link.
Use the keyboard shortcuts “Control” + “K” on Windows devices or “Command” + “K” on Mac devices to create a box over the highlighted word or text.
Paste the URL you want within the box.
Press the “Enter” button to create the hyperlink.

Using Prototype Panel to Create Your Hyperlink

This method allows you to add hyperlinks to both images and text, making it ideal for linking images like social media icons. Follow these steps:

Select your text or image by first clicking on it.
Go to the “Properties” panel and open “Prototype.”
In the Prototype menu under “Interactions,” select the current interaction if one is available. If there isn’t one, click the “+” icon to add one.
Adjust interaction settings to successfully add a link: Set interaction to “On click.” The action should then be set to “Open Link.” Paste your link to the URL box.
Check the “Open in new tab” option to open a new tab when a user taps on the link. Exit the prototype panel to add the image or text link.

Frequently Asked Questions (FAQs)

Can I add hyperlinks to images in Figma?

Yes, you can add hyperlinks to images in Figma using the Prototype Panel method.

Can I delete a hyperlink in Figma?

To delete a hyperlink, hover over the linked text with your mouse to open the link modal, then clear the link box.

Can I use keyboard shortcuts to create links in Figma?

Yes, you can use keyboard shortcuts to create links in Figma. For Windows, use “Control” + “K”, and for Mac, use “Command” + “K”.

By following these steps, you can effectively add, edit, and delete hyperlinks in Figma, enhancing the user experience and navigability of your designs.