# Navigation

## Overview

Navigation is the result of several components and IDE features interaction, for this point, you should be familiarized with components, screens, and variables to achieve complex interactions.

<figure><img src="https://616870859-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZ1eJ3100gppGz1pXp1J7%2Fuploads%2FvQ6B6rjIRzB9030ueb2e%2FNavigation.png?alt=media&#x26;token=8932ebe5-fb6a-4959-9268-b045903bab26" alt=""><figcaption></figcaption></figure>

## Quickstart

To add new paths to your Uncodie projects simply add Main Frame components inside a Page and prototype navigation with buttons and links. This will compile screens and paths with the main frame name as a URL path.

## Navigate between pages

### Prototyping in Figma

Once you have declared some screens, see:

{% content-ref url="../components/screen-page" %}
[screen-page](https://docs.uncodie.com/1.0/basic-concepts/components/screen-page)
{% endcontent-ref %}

You can navigate and add links between apps or sections by using the prototype capabilities in figma

### Select and Navigate

You can act Select and Navigate to select a property from the current element and pass that variable in the URL Route Context to the next screen, see:

{% content-ref url="../actions" %}
[actions](https://docs.uncodie.com/1.0/basic-concepts/actions)
{% endcontent-ref %}

and for variable managing also see:

{% content-ref url="../variables" %}
[variables](https://docs.uncodie.com/1.0/basic-concepts/variables)
{% endcontent-ref %}