# Data Binding

## Overview

Uncodie allows you to insert dynamic values and content into your app by using GraphQL queries and data sources.

<div align="left"><figure><img src="https://616870859-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZ1eJ3100gppGz1pXp1J7%2Fuploads%2FK79gNlxWG3jrT6natQGG%2FCaptura%20de%20pantalla%202024-02-01%20a%20la(s)%2010.49.22%E2%80%AFa.m..png?alt=media&#x26;token=6ab8d6c0-587c-40bb-ab25-fb22500f9975" alt="" width="338"><figcaption></figcaption></figure></div>

## Setup

1. Open your Figma project
2. Open Uncodie IDE
3. After your data **Data Source** is set in your component's parent element&#x20;

example: here we added a h1 local variable to the home Frame so it's available for any children to data bind.

<figure><img src="https://616870859-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZ1eJ3100gppGz1pXp1J7%2Fuploads%2Fq3Rbd0G4lO9jzKuQLoN9%2FParent%20Data%20Source.png?alt=media&#x26;token=e835ea22-bc24-4286-8088-c97c30e2c8b4" alt=""><figcaption></figcaption></figure>

1. Navigate to the **Component** section
2. Select your component text or image layer and bind the data in the **Value section**

<div align="left"><figure><img src="https://616870859-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZ1eJ3100gppGz1pXp1J7%2Fuploads%2FK79gNlxWG3jrT6natQGG%2FCaptura%20de%20pantalla%202024-02-01%20a%20la(s)%2010.49.22%E2%80%AFa.m..png?alt=media&#x26;token=6ab8d6c0-587c-40bb-ab25-fb22500f9975" alt="" width="338"><figcaption></figcaption></figure></div>

3. Select a variable from your collection to make the data binding:

* Data Bind CSS Variables
* Data Bind Text Values
* Data Bind Images in Figma
* Data Bind Querie Params
* Data Bind Context Variables
* Data Bind Script Params

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

## No Code Queries

Use this query to link properties in your components through variable usage. See:

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

## Custom GraphQL Queries

You can create any custom graph ql queries directly in the **IDE** by typing your search or mutation and passing params, see:

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