Links

Links are the fabric of the web. Every navigation bar, every call-to-action button, every “read more” — underneath, they are all the same HTML element: <a>, the anchor element.

Think of a link as a prototype connection in Figma. You define a source (some text or an image), a destination (a URL or another frame), and the browser handles the transition when a user clicks.

The anchor element

<a href="https://example.com">Visit Example</a>

The href attribute — short for hypertext reference — holds the destination URL. The text between the opening and closing tag is what the user sees and clicks.

Internal vs external links

External links point to a different website. Use the full URL starting with https://:

<a href="https://figma.com">Open Figma</a>

Internal links point to another page on the same website. Use a path relative to the current file:

<a href="/about">About us</a>
<a href="../portfolio/index.html">My portfolio</a>

Fragment links jump to a specific section on the same page by targeting an id attribute:

<a href="#contact">Jump to Contact</a>
...
<section id="contact">...</section>

Opening in a new tab

Add target="_blank" to open the link in a new browser tab instead of navigating away from the current page. This is common for links to external sites, so users do not lose their place:

<a href="https://figma.com" target="_blank" rel="noopener noreferrer">
  Open Figma in a new tab
</a>

Always add rel="noopener noreferrer" alongside target="_blank" — it is a small security improvement that costs nothing.

<nav>
  <a href="#">Home</a>
  <a href="#">Portfolio</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>
<p>
  Follow my work on
  <a href="https://dribbble.com" target="_blank" rel="noopener noreferrer">Dribbble</a>.
</p>

Try changing one of the href="#" values to https://google.com and see the URL update in the preview. (Links inside the sandbox won’t navigate, but the HTML is correct.)

Common mistakes designers run into

Styling a link so it doesn’t look like a link (no underline, no distinct color), so users don’t realize it’s clickable
Forgetting hover/visited states
Using <div onclick> instead of a real <a>

The developer’s perspective

👨‍💻 What developers actually see

Designers see “purple text,” but developers see that a real <a> gives keyboard navigation, an “open in new tab” option via right-click, and free crawling by search engines — all at once.

💡 Real-world example

Wikipedia styles visited links in a distinct color from unvisited ones, so readers can tell at a glance which pages they’ve already read. (Wikipedia: Help:Link color)