Add links to a site
Figma Sites was released in open beta at Config 2025. It is currently available on all paid plans, with a limited Starter plan experience coming soon. Learn more about what’s included in the beta.
Adding links to your site lets users quickly navigate to the most relevant information. You can link people to:
- Somewhere on the same webpage
- A different webpage within your website
- An external website
Add a link to an element
You can add links to any element in a webpage.
- Select a layer or object to link. If your webpage has multiple breakpoints, select the object in the primary breakpoint to automatically select the matching object in the other breakpoints.
- Navigate to the Interaction tab in the right sidebar.
- Create the link by doing one of the following:
- Hover over the object and drag the plus icon to the destination webpage or element on the same page.
- In the the right sidebar, click the plus icon in the Link section.
Tip: You can create multiple links at once by selecting several objects and dragging a connection to a destination webpage or an element on the same page. In this example, selecting an object in the primary breakpoint also selected the corresponding objects in the other breakpoints.
Tip: Linking to an element on the same page uses the Scroll to interaction. With this interaction, you can choose whether users jump straight to the linked element or automatically scroll through the page content to reach it.
Link to an external site
- Select the object where you want to add a link.
- In the right sidebar, click the plus icon in the Link section.
- Enter a URL to an external site. External sites will open in a new tab by default, but you can uncheck Open in a new tab to keep users in the same tab.
Tip: You can add URL parameters like UTMs on URLs to external sites. Figma Sites also supports both tel: and mailto: link protocols.
Remove a link from an element
- Navigate to the Interaction tab if the right sidebar.
- Click anywhere on the canvas to reveal the link connection arrows.
- Click and drag to select one or more link connection arrows, then press the Delete key.
- Navigate to the Interaction tab of the right sidebar.
- Select one or more layers with a link you’d like to remove. For webpages with multiple breakpoints, select the object in the primary breakpoint to automatically select the corresponding objects in the other breakpoints.
- In the the right sidebar, click the minus icon in the Link section.
Note: If the link destination is on the same webpage, it can be removed by deleting the Scroll to interaction.