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:

Property Type Use for
Content String Text content in text layers
Display Boolean Show/hide layers
Opacity Number Transparency (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.