How do you add a web link to text within a component in Figma?

Adding a web link in Figma is typically done on text layers, which means you can add links to text within a component's structure.

Adding a Web Link to Text Inside a Component

Components in Figma are reusable elements, and they often contain text layers (like labels, buttons, or descriptions). You can add interactive web links to specific parts of this text.

Here’s how to add a new web link to text inside a component:

1. Select the Text Layer: First, select the text layer that resides within your component (either the main component definition or an instance). You can do this by double-clicking into the component structure until you select the desired text layer.
2. Select the Text: Highlight the specific words or phrases within the text layer that you want to turn into a link.
3. Add the Link:
   • Right-click: Right-click on the selected text.
   • Choose "Add link": From the context menu that appears, select the "Add link" option.
   • Use a Shortcut: Alternatively, you can use the keyboard shortcut Cmd + K (Mac) or Ctrl + K (Windows) with the text selected.
4. Enter the URL: A small input field will pop up. Type or paste the full web address (URL) you want the link to go to (e.g., https://www.example.com).
5. Confirm: Press the Enter key to apply the link.

The linked text will typically appear underlined, and you can see the link destination by hovering over it.

Editing or Adjusting an Existing Link

Once a link is added to text within a component, you can easily change the destination URL or remove the link. As noted in the reference, if you want to adjust the link, you simply click on it and then go to edit.

Here are the steps to edit an existing link:

1. Click the Linked Text: Click directly on the text that already has a link applied.
2. Access Edit Option: A preview of the link URL will appear next to the text. Click the "Edit" button or icon associated with the link preview.
3. Change the Link: You can now modify the URL in the input field. For example, as mentioned, you can change link let's say that we want this code to go to youtube.com.
4. Confirm Changes: Press the Enter key to save the updated link.

You can also use the edit interface to remove the link entirely.

By following these steps, you can effectively add and manage web links within the text elements of your Figma components, enhancing their utility for documentation, prototypes, or interactive designs.