Adding an external link in Figma prototype allows viewers to navigate outside of your Figma project when interacting with specific elements. One common way to achieve this is by adding a hyperlink directly to text within your design, which becomes clickable when the prototype is viewed.
Hyperlinking Text for Prototype Interaction
You can make text in your Figma design function as an external link within the prototype using the built-in link tool. These links are active and will open the specified URL when clicked during prototype playback.
Here are the steps to add an external link to text in Figma, based on the reference provided:
- Select the Text: Identify the text layer or a specific portion of text within a layer that you want to turn into a link. Make your selection.
- Access the Link Tool: Look for the link icon (🔗) in the toolbar at the top of the Figma interface. Click Create link.
- Enter the URL: An input box will appear above the selected text. Type or paste the full external URL (including
https://orhttp://) into the provided input box. - Apply the Link: Press the
Enterkey on your keyboard to apply the link to the selected text.
Once applied, the linked text will typically appear underlined in the design view, indicating it has a hyperlink.
Using Hyperlinks in Prototypes
When you run the prototype (by clicking the Present button ▶️), any text that you have hyperlinked using the steps above will be clickable. Clicking on the linked text will open the specified external URL in a new browser tab or window, depending on the user's browser settings.
This method is straightforward for adding clickable external references within your prototype, such as links to documentation, external resources, or live websites related to your design.
| Step | Action | Detail |
|---|---|---|
| 1. Select Text | Choose your text layer or range | Highlight the text you want to link |
| 2. Create Link | Click the 🔗 icon | Found in the top toolbar |
| 3. Enter URL | Type or paste the web address | Use the full URL (e.g., https://figma.com) |
| 4. Apply | Press Enter | Confirms and applies the link |
While hyperlinking text is one way to add external links visible and clickable within a Figma prototype, remember that adding a full prototype interaction (using the Prototype tab to set an 'On click' trigger with an 'Open URL' action) on any object (like a button or frame) provides more flexibility in controlling the interactive elements that lead to external sites. However, the method described using the link tool on text is directly supported by the provided steps.
