{"schema":"https://www.layerpath.com/schemas/public-document/v1","version":1,"id":"/learn/how-to-hyperlink-in-figma","route":"/learn/how-to-hyperlink-in-figma","canonical":"https://www.layerpath.com/learn/how-to-hyperlink-in-figma","title":"How to Hyperlink in Figma","h1":"How to Hyperlink in Figma","description":"Discover the step-by-step guide on how to create hyperlinks in Figma. Enhance your designs with interactive elements and improve user experience today.","archetype":"tutorial","blocks":[{"type":"heading","depth":1,"children":[{"type":"text","value":"How to Hyperlink in Figma"}]},{"type":"paragraph","children":[{"type":"text","value":"Follow these steps to create a clickable hyperlink in your Figma design file. This guide will help you embed links within your text or components easily."}]},{"type":"layerpathTour","sourceUrl":"https://share.layerpath.com/e/cm9b94h310003l80cr90kn1c9/tour","canonicalUrl":"https://share.layerpath.com/e/cm9b94h310003l80cr90kn1c9/tour","id":"cm9b94h310003l80cr90kn1c9"},{"type":"list","ordered":true,"items":[{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Select the Text or Object"}]},{"type":"text","value":" – Click on the text or shape you want to add a hyperlink to."}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Open the Link Option"}]},{"type":"text","value":" – In the right-hand "},{"type":"strong","children":[{"type":"text","value":"Design panel"}]},{"type":"text","value":", scroll to find the "},{"type":"strong","children":[{"type":"text","value":"Link section"}]},{"type":"text","value":" under "},{"type":"strong","children":[{"type":"text","value":"Text"}]},{"type":"text","value":" (for text layers) or "},{"type":"strong","children":[{"type":"text","value":"Prototype"}]},{"type":"text","value":" (for shapes or buttons)."}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Enter the URL"}]},{"type":"text","value":" – Type or paste the link you want to add (e.g., "},{"type":"inlineCode","value":"https://example.com"},{"type":"text","value":")."}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Press Enter"}]},{"type":"text","value":" – This applies the hyperlink to the selected element."}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Preview the Link"}]},{"type":"text","value":" – Switch to "},{"type":"strong","children":[{"type":"text","value":"Prototype mode"}]},{"type":"text","value":" and click the element to test the link."}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Done"}]},{"type":"text","value":" – Your hyperlink is now active and can be opened in presentation or prototype view."}]}]}]}],"tours":[{"type":"layerpathTour","sourceUrl":"https://share.layerpath.com/e/cm9b94h310003l80cr90kn1c9/tour","canonicalUrl":"https://share.layerpath.com/e/cm9b94h310003l80cr90kn1c9/tour","id":"cm9b94h310003l80cr90kn1c9"}],"plainText":["How to Hyperlink in Figma","Follow these steps to create a clickable hyperlink in your Figma design file. This guide will help you embed links within your text or components easily.","https://share.layerpath.com/e/cm9b94h310003l80cr90kn1c9/tour","Select the Text or Object – Click on the text or shape you want to add a hyperlink to.\nOpen the Link Option – In the right-hand Design panel, scroll to find the Link section under Text (for text layers) or Prototype (for shapes or buttons).\nEnter the URL – Type or paste the link you want to add (e.g., https://example.com).\nPress Enter – This applies the hyperlink to the selected element.\nPreview the Link – Switch to Prototype mode and click the element to test the link.\nDone – Your hyperlink is now active and can be opened in presentation or prototype view."]}