🔤Variables

Local and Context Variables for your application

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:

Variables | Documentation | 1.0

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.

For more information on data binding in Uncodie see:

🔍Data Binding

States

Change components variants, or components visibility using variable values.

For more information using variants see:

Variants

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:

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:

User Authentication