Skip to main content

Data binding

You've built a card component. Now you want to use it ten times, each with different content. Data binding lets you define inputs on your component and set different values for each instance — one component, many variations.

How it works​

Data binding connects inputs (variables you define) to properties (things like text content or visibility). Define an input once on your component, bind it to a property, then set different values on each instance.

Component: Card
├── Input: "title"
├── Input: "showBadge"
└── Text layer bound to "title"
    Image layer display bound to "showBadge"

Instance 1: title = "Welcome"    showBadge = true
Instance 2: title = "Settings"   showBadge = false
Instance 3: title = "Profile"    showBadge = true

What you can bind​

Not every property supports binding. Currently, you can bind inputs to:

PropertyTypeUse for
ContentStringText content in text layers
DisplayBooleanShow/hide layers
OpacityNumberTransparency (0–100)

Look for the input reference button next to these properties — that's where you connect them to your inputs.

Setting it up​

On the component​

  1. Select your component
  2. In the Properties panel, find the Inputs section
  3. Click Add input
  4. Give it a name and optional default value
  5. Find the property you want to bind (Content, Display, or Opacity)
  6. Click the reference button and select your input

On each instance​

  1. Select an instance of your component
  2. In the Properties panel, find the Inputs section
  3. Set values for each input defined on the component

The instance will display with those specific values.

Troubleshooting​

Why don't I see the Inputs section on my instance?​

The source component has no inputs defined. Add inputs to the component first, then check the instance again.

Why can't I bind this property?​

Only Content, Display, and Opacity support input binding. Other properties (like color or size) can't be bound to inputs.

My bound value isn't showing​

Check that:

  1. The property is actually bound (reference button should show the input name)
  2. The instance has a value assigned for that input
  3. You're viewing the instance, not the source component

Coming soon​

These features are planned but not yet available:

  • Variable binding — Bind to file-level or project-level variables instead of component inputs.
  • Variable expressions — Use expressions that reference and transform variables.
  • Computed variables — Define variables that derive their value from other variables.