# how to link pages in figma

Viewport: 1910x922 @1.25x

Playback: autoplay=false durationMs=3000 navBar=false arrows=true callouts=true browserBar=false browserTheme=light

1. [Intro] How to Link Pages in Figma
   - body: This guide will walk you through the steps to link pages within your Figma project. Linking pages can help you navigate quickly between different sections of your design, making your workflow more efficient.
   - voiceover: This guide will walk you through the step-by-step process of linking pages in Figma. By following these steps, you'll be able to create interactive links between different pages within your Figma project.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9cl81l000cujs0d4sqv4hf4/cm9cllhhm00000dl4bbtugolg.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
1. step_01 [image] - Open Figma.
   - source type: IMAGE
   - description: Open the Pages Panel
   - target: (1129, 375), rect: top=0 left=241 width=1046 height=738
   - hotspots: 1
     - hotspot_01 (1129, 375), rect: top=0 left=241 width=1046 height=738
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - voiceover: Launch the Figma application or open Figma in your web browser.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9cl81l000cujs0d4sqv4hf4/cm9cllnh700020dl4avo396k2.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9cl81l000cujs0d4sqv4hf4/cm9cl87hd000003hu8xhnc73c.png
2. step_02 [image] - In the Pages panel, find and select the page that you want to create a link from. Right Click on it and then select Copy link to page.
   - source type: IMAGE
   - description: Select the Page to Link From
   - target: (245.72590884257352, 258.45925615371266), rect: top=100 left=100 width=100 height=100
   - hotspots: 1
     - hotspot_01 (245.72590884257352, 258.45925615371266), rect: top=100 left=100 width=100 height=100
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - voiceover: In the Pages panel, find and select the page that you want to create a link from. Right-click on it and then select 'Copy link to page'.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9cl81l000cujs0d4sqv4hf4/cm9cllniq00030dl4bqk31d4o.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9cl81l000cujs0d4sqv4hf4/cm9cla2p700003j76iorigdhe.png
3. step_03 [image] - On the selected page, click on the element (e.g., a button or a text link) that you want to use to create the link. Ensure the element is highlighted.
   - source type: IMAGE
   - description: Enter Prototype Mode
   - target: (632, 442), rect: top=0 left=241 width=1046 height=738
   - hotspots: 1
     - hotspot_01 (632, 442), rect: top=0 left=241 width=1046 height=738
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - voiceover: On the selected page, click on the element (e.g., a button or a text link) that you want to use to create the link. Ensure the element is highlighted.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9cl81l000cujs0d4sqv4hf4/cm9cllnjk00040dl4gthsaycl.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9cl81l000cujs0d4sqv4hf4/cm9cl8eaf000203hu0rpfj34p.png
4. step_04 [video] - Click here
   - source type: VIDEO
   - target: (623, 577), rect: top=0 left=241 width=1046 height=738
   - hotspots: 1
     - hotspot_01 (623, 577), rect: top=0 left=241 width=1046 height=738
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - clip: start=15.485 end=21.085 duration=5.600000000000001
   - video: url=https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9cl81l000cujs0d4sqv4hf4/cm9cl81mj006b0djs5lt3glik.webm speed=2 muted=true
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9cl81l000cujs0d4sqv4hf4/cm9cl81mj006b0djs5lt3glik.webm
5. step_05 [image] - Go to Right hand side panel and click on link (icon) and then paste the link that you have copied.
   - source type: IMAGE
   - description: Select the Element
   - target: (652.7111163096648, 486.45187516838297), rect: top=0 left=241 width=1046 height=738
   - hotspots: 1
     - hotspot_01 (652.7111163096648, 486.45187516838297), rect: top=0 left=241 width=1046 height=738
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - voiceover: Go to the right-hand side panel, click on the link icon, and then paste the link that you have copied.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9cl81l000cujs0d4sqv4hf4/cm9cllnkc00050dl4ehf15ewz.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9cl81l000cujs0d4sqv4hf4/cm9cl8kol000503huyr6of1ic.png
6. step_06 [image] - Click on it to test the navigation.
   - source type: IMAGE
   - description: Create the Link
   - target: (638, 437), rect: top=0 left=241 width=1046 height=738
   - hotspots: 1
     - hotspot_01 (638, 437), rect: top=0 left=241 width=1046 height=738
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - voiceover: Click on the linked element to test the navigation.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9cl81l000cujs0d4sqv4hf4/cm9cllnl600060dl4781qcelt.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9cl81l000cujs0d4sqv4hf4/cm9cl8lts000603hunerusdlh.png
7. step_07 [image] - We are Redirected to new/linked page.
   - source type: IMAGE
   - description: Adjust the Interaction Settings
   - target: (870, 506), rect: top=0 left=241 width=1046 height=738
   - hotspots: 1
     - hotspot_01 (870, 506), rect: top=0 left=241 width=1046 height=738
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - voiceover: Ensure you are redirected to the new or linked page.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9cl81l000cujs0d4sqv4hf4/cm9cllnm100070dl42muzelzw.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9cl81l000cujs0d4sqv4hf4/cm9cl8nvu000703humouqc1mq.png
9. [Outro] Congratulations 🎉
   - body: Once you've linked your pages and tested the interactions, you can continue to refine your prototype by adding more links and customizing the user flow. Remember to save your project frequently to avoid losing any changes.
   - voiceover: You have successfully linked pages in Figma. You can now create additional links or proceed with further design tasks.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9cl81l000cujs0d4sqv4hf4/cm9clll9200010dl49hdt5148.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM

Source: https://share.layerpath.com/share/cm9cl81l000cujs0d4sqv4hf4/tour