How to add external URL links to your prototype
Last updated
Last updated
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!
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.
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
**Tricks **
Email links Add a link that directly opens the email client with a specific address: Just insert ‘_mailto:_name@email.com’ in the URL field.
Phone links Add a link that suggests the user make a call (on mobile browser): Just insert ‘tel:+1(415)555555’ 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.
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
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.
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.
Make your selection.
Click the create link icon in the toolbar:
Make your selection.
Use the keyboard shortcut to open the link modal above the selected text:
MacOS: Command K
Windows: Control K
Enter a URL or paste a URL from your clipboard:
Make your selection.
Paste a URL from your clipboard using the keyboard shortcut:
MacOS: Command V
Windows: Control V
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.
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:
Open the file in the Editor.
Click the Share button and set Link Sharing permissions.
Click Copy Link to copy the URL to your clipboard:
Open the file in the Editor.
Click the Present button to open the prototype in presentation view.
Click the Share Prototype button and set Link Sharing permissions.
Click Copy Link to copy the URL to your clipboard.
Open the Layers panel and expand the page list.
Right-click on the page name and select Copy Link:
Right-click on the Frame in the canvas or Layers Panel.
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.
Hover over the linked text to preview the link.
Click Open Link to follow the link:
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.
Hover over the linked text.
Click Edit to make changes.
Update the URL or click the detach icon to remove the link:
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.
