How to Add a Hyperlink in Figma

Lee Stanton August 18, 2023

One of the most helpful features of the collaborative design tool Figma is the possibility of adding hyperlinks. With this feature, connecting online pages becomes easy. Hyperlinks make a site easy to navigate through. Links give site visitors direct access to essential resources and landing pages, among other information.

Regardless of whether you are trying to learn how to add links to icons and text or insert hyperlinks in general, this article will guide you. Read on to become familiar with the various methods you can use to achieve this.

Hyperlink Creation Using Icon

This is one of the most common types of links you can use on Figma. Here, the Link icon is used to add a text link. These steps won’t work on images.

Utilizing the text on a page, highlight the text that you want to link to another page by clicking at the beginning of the section and then dragging over it.
After highlighting the text, hit the “Link” icon in the toolbar at the top of the workspace. Doing so creates a box above the word or words highlighted.
In a different tab, open the web page you want to link to and copy its URL by first highlighting it and pressing “Command” + “C” on Mac or “Control” + “C” on Windows.”
Go to the URL box above your highlighted box and click inside it.
Press “Command” + “V” on Mac or “Control” + “V” on Windows. This allows you to paste your URL in the box.
Click an empty space on the page or hit “Enter” to add the link to the text. A line will appear beneath the word. When users click that word, they’ll be directed to the link address.

Use a Keyboard Shortcut to Create Links

This is the second method you can use to create a Figma link. You can use the keyboard shortcut method to add links on text but not images.

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

Utilize the Prototype Panel to Create Your Hyperlink

This method can be used on both images and text. It’s an ideal option to link an image like on social media icons.

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. This doesn’t change the image. However, when the design is viewed within the “Present” tab, your cursor changes as you hover over the image. If the picture is clicked, the link you added opens.

Edit or Delete Figma Hyperlinks

If you feel a link doesn’t work or want to scrap it off, you can edit or delete it. To edit your link:

Hover over the linked text using your mouse to open the link modal.
Select the “Edit” option next to the modal to edit the address.
Make the changes as needed and exit.
To delete, clear the link box. This deletes your URL entirely, and the text is no longer linked.

Boost Accessibility by Adding Hyperlinks on Figma

Hyperlinking in Figma makes it easier for users to navigate through content. Your links can send users to other Figma files, pages, frames, or prototypes. The links could also be connected to external websites and send you to new browser tabs. There are various ways of adding hyperlinks, and it should be straightforward with the steps outlined above.

Have you ever attempted to add hyperlinks on Figma? What was the experience like? Let us know in the comments section below.