Figma has become one of the most popular UI/UX design tools available today. Its vector-based editor makes it easy to design beautiful interfaces for websites, mobile apps, and more. One useful feature in Figma is the ability to add clickable hyperlinks to your design prototypes.
Table of Contents
Why Add Links in Figma?
Adding links serves multiple purposes:
- Simulate interactions – Links allow you to connect screens together, simulating in-app navigation flows.
- Share specifications – Link out to other Figma files, Google Docs, or any other web page to provide extra context.
- Present high-fidelity prototypes – Clickable prototypes feel more realistic and are great for stakeholder presentations.
Types of Links in Figma
Figma supports two main types of links:
Component links – These link between Figma files and frames to create navigation flows.
External links – Link out to other web pages and tools like Google Docs or Invision.
Both types help connect your designs. Component links are best for linking internal files while external links allow you to reference other tools.
How to Insert Component Links
To insert a component link:
- Select the layer, shape, or frame you want to make clickable.
- In the properties panel, click the “+” icon next to the Links section.
- Choose “Component link” as the link type.
- Select the destination file and frame you want to link to.
Now your object has a link that navigates between files! Component links work between pages and artboards as well.
Adding External Links
To create an external link:
- Select the layer, group, or frame to make clickable.
- In the properties panel, click the “+” icon next to Links.
- Choose “External link” as the type.
- Enter the full URL you wish to link to.
- (Optional) Enter link text that will display on hover.
Your object now links out to another web page. This keeps your designs self-contained while allowing references to other tools.
Best Practices
When working with links in Figma, keep these best practices in mind:
- Use links sparingly – Too many can clutter designs.
- Set link visibility – Disable link nodes on master components.
- Name links – Name your links for easy identification.
- Validate links – Double check links go to proper destinations.
- Annotate – Add descriptions so people understand links’ purposes.
Following these tips will ensure linking goes smoothly across your files.
Linking Tips and Tricks
Beyond basic linking, Figma enables some powerful functionality through links:
- Link widgets – Buttons, tabs, and menus can utilize links to create interactive prototypes.
- Link variants – Create multiple versions of components and connect them into flows.
- Link overlays – Stack linked frames on top of designs for annotations.
- Smart Animate – Auto-transition between artboards with smooth animations.
Familiarize yourself with these features to get the most out of Figma’s linking capabilities.
Demo of Adding Links
Here is a quick demo of adding a component link between two artboards:
Demo GIF showing linking process
And a demo of adding an external link to a shape:
External link demo
As you can see, it only takes a few clicks!
Start Prototyping
Adding links in Figma connects screens together into clickable prototypes. This allows you to simulate real app flows before any coding takes place.
So start linking up your designs today! Use component links to navigate between internal files and frames. And drop some external links to connect out to other web tools.
Following the best practices will ensure clean and organized linking across files. Take advantage of the advanced features to create interactive prototypes that tell a story.
