🔍Data Binding

Overview

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

Setup

1. Open your Figma project

2. Open Uncodie IDE

3. After your data Data Source is set in your component's parent element

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

1. Navigate to the Component section

2. Select your component text or image layer and bind the data in the Value section

1. 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

🧩Components

No Code Queries

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

🔤Variables

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:

Queries