How to add external URL links to your prototype

Part #3 of a 5 part series: prototyping with Anima in Sketch

With Anima, you can build prototypes that feel real Directly inside Sketch, Adobe XD, or Figma, and start free!

External Links in Prototypes

Want to add a link to your company’s Instagram page? No problem.

Anima allows you to add links not only between your prototype screens but also to external websites (hyperlinks). That way, your prototype feels more real and gives a better experience.

How to Add Links

• Select the layer you’d like to link (i.e Instagram button)

• Click Prototype tab > Flow > Links > External Link

• Paste your hyperlink URL

• Click Save

Live Preview Here

**Tricks **

• Email links Add a link that directly opens the email client with a specific address: Just insert ‘_mailto:[e-mail]’ in the URL field.

• Phone links Add a link that suggests the user make a call (on mobile browser): Just insert ‘tel:[phone]’ in the URL field.

Preview in Browser

To see it working, just hit Preview in Browser. Live Preview Here

Everything is looking good? Then, click Sync upload the changes to the Anima Project, and click Share to invite others.

Discover more tips for prototyping with Anima in Sketch:

• Part #1 out of 5, prototyping with Sketch: How to create interactions in Sketch prototypes

• Part #2 out of 5, prototyping with Sketch: How to add breakpoints to your Sketch prototype

• Part #4 out of 5, prototyping with Sketch: How to create overlays in your Sketch prototypes

• Part #5 out of 5, prototyping with Sketch: How to add background video to your Sketch prototype

Docs:

Add links to text

Who can use this feature

Users on Any Plan

Users with Edit access to a file can create and edit links.

Users with View access to a file can only follow links.

Want to add links to Prototypes? Learn about Getting Started with Prototyping.

Add links to any text layer within your design file to:

• Direct collaborators to external sites like documentation and project management tools.

• Create navigation within a large Figma file to specific frames and pages.

• Link to other Figma files and prototypes.

• Represent actual links that will exist in production.

Note: It's not currently possible to add links to images or vector objects in the Editor, only when creating prototype hotspots. Linking to default email clients using HTML like mailto: is not supported at this time.

Create a link

You can add a link to an entire text layer, or to a selection of text within the layer. Select the text layer, then press the Enter key to edit the text layer and make your selection.

Create link icon

1. Make your selection.

2. Click the create link icon in the toolbar:

Click_Create_link_icon.png

Create link shortcut

1. 1. Make your selection.

   2. Use the keyboard shortcut to open the link modal above the selected text:

      • MacOS: Command K

      • Windows: Control K

   3. Enter a URL or paste a URL from your clipboard:

Paste_URL.png

Paste in place

1. Make your selection.

2. Paste a URL from your clipboard using the keyboard shortcut:

   • MacOS: Command V

   • Windows: Control V

URL_pasted.png

Note: If you want to display the full URL in the page, use the paste keyboard shortcut twice—once to paste it as text, and once more to turn it into a link. Keep in mind, you will need to edit both the text layer and the URL to make any changes.

Tip! Learn more about how Links work in our Links playground file.

Copy links to Files, Pages, and Frames

Create navigation links to pages and frames within a large file, or link out to other Figma files and prototypes.

To find the link for your destination:

File

1. Open the file in the Editor.

2. Click the Share button and set Link Sharing permissions.

3. Click Copy Link to copy the URL to your clipboard:

Prototype

1. Open the file in the Editor.

2. Click the Present button to open the prototype in presentation view.

3. Click the Share Prototype button and set Link Sharing permissions.

4. Click Copy Link to copy the URL to your clipboard.

Page

1. Open the Layers panel and expand the page list.

2. Right-click on the page name and select Copy Link:

Frame

1. Right-click on the Frame in the canvas or Layers Panel.

2. Go to Copy/Paste > Copy Link.

Once copied, you can create a text layer and use it as a link to a page, file, frame, or prototype.

Tip! If you're using Figma in the browser, you can copy a link to the selected object from the browser's address bar.

Interact with links

Preview or follow a link

1. Hover over the linked text to preview the link.

2. Click Open Link to follow the link:

3. What happens when you follow the linked text will depend on the type of link:

   • Figma file or prototype: Figma will open links to other Figma files and prototypes—or frames and pages within them—in a new tab.

   • Page or frame: Figma will take you to the page or frame in the current file.

   • External website: Figma will open all external links in a new tab. The first time you open a link, you'll need to confirm that you're leaving Figma.

Edit or delete a link

1. Hover over the linked text.

2. Click Edit to make changes.

3. Update the URL or click the detach icon to remove the link:

Style links

You can style linked text as you would any other text layer. Whether this is applying text styles or adjusting text properties, like underline, font, or color.

Links are styled with an underline by default. Use the keyboard shortcut to remove the underline:

• MacOS: Command U

• Windows: Control U

Learn more about editing and styling text in Figma.