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:
| Property | Type | Use for |
|---|---|---|
| Content | String | Text content in text layers |
| Display | Boolean | Show/hide layers |
| Opacity | Number | Transparency (0–100) |
| Fill | Color | Solid fill color (with opacity) |
| Stroke | Color | Solid stroke color (with opacity) |
Look for the input reference button next to these properties — that's where you connect them to your inputs.
You can bind properties of layers inside the component and of the component's own root — bind the root's Fill to a color input and every instance's background follows its assigned color.
Setting it up
On the component
- Select your component
- In the Properties panel, find the Inputs section
- Click Add input
- Give it a name and optional default value
- Find the property you want to bind (Content, Display, Opacity, Fill, or Stroke)
- Click the reference button and select your input
On each instance
- Select an instance of your component
- In the Properties panel, find the Inputs section
- Set values for each input defined on the component
The instance will display with those specific values.
Color adjustments
One color input often needs to produce several coordinated colors — a brightened hover variant, a muted border, a readable label. When a layer's Fill or Stroke is bound to a color input, an adjustments section appears right below it. Add adjustments to derive that layer's color from the input:
| Adjustment | What it does |
|---|---|
| Mix | Blend toward a fixed color by a ratio (tint with white, shade with black) |
| Lightness | Lighten or darken, uniformly for any input color |
| Saturation | Mute or intensify; −100% turns any color gray |
| Rotate Hue | Spin the hue for complementary or analogous accents |
| Opacity | Set or multiply transparency — e.g. a 10% wash for hover backgrounds |
| Contrast Color | Replace with whichever of two colors reads better against the input — keeps button labels legible for any assigned color |
Adjustments apply in list order (drag to reorder), can be toggled off individually, and only affect the color coming from the input — they never touch ordinary paints. Each layer has its own adjustment list, so one "Accent" input can drive many differently adjusted layers. Instances can't change adjustments; they assign the input color and every bound layer derives from it.
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, Opacity, Fill, and Stroke support input binding. Other properties (like size) can't be bound to inputs.
What happens when I bind the fill on a text or vector layer?
The input's color recolors the whole layer uniformly: text gets one color across all its ranges, a vector one color across all its shape areas. The uniform color stays after you detach the input, until you edit the fill again.
What happens to my paints when I bind a fill?
Binding replaces the property's entire paint list with the input's single solid color — gradients, images, and extra paints are removed. While bound, the paint list is read-only; detach the input to edit paints directly again.
My bound value isn't showing
Check that:
- The property is actually bound (reference button should show the input name)
- The instance has a value assigned for that input
- 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.