# Variables

## Overview

You can make use of variables available at different scopes in the app structure. This will impact the app reloading and caching and the general performance of your project.

For a more advanced usage of variables see:

{% embed url="<https://docs.uncodie.com/1.0/v/documentation/figma-plugin/variables>" %}

## Setup

1. Open your **IDE** in Figma
2. Navigate to the **Variables** section
3. Select the Scope of your variable
4. Create a variable that will be available in the selected context

## Use Cases

### Data Binding

Use a variable to expose the var value in any component or CSS property.&#x20;

For more information on data binding in Uncodie see:

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

### States

Change components variants, or components visibility using variable values.

For more information using variants see:

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

### UX

Navigate, and change screen behavior or user capabilities and permissions according to variables in your app.

## Local Variables

Local context variables are component variables inherited from all the component children elements

## Context Variables

Context variables are global variables available in all the applications.

## Router Context

Router variables are params set in the URL of the screen that can be used to perform queries or app UX optimizations, for more information see:

{% embed url="<https://docs.uncodie.com/1.0/v/documentation/variables/router-variables>" %}

## Session Context

These are variables related to the user session in the app, such as email, user name, etc.

For more information in User Authentication settings see:

{% embed url="<https://docs.uncodie.com/1.0/user-authentication>" %}