Props
Expose text, colors, images, numbers, visibility and nested components, and set them per instance.
Props let each instance differ where it matters: a row's title, a card's color, an avatar image. You expose a field once in the component, and every instance gets a typed control for it. Props are also what the React and SwiftUI exports turn into parameters.
Expose a prop
- Edit the component.
- Select a layer inside it. The inspector shows an Expose as prop group (marked ◇).
- Click ◇ next to the field you want. It turns into ◆ and shows the prop's name.
- Instances now have a control for it. A notice says “title is a prop — set it per instance in the inspector”.
| Layer kind | Fields you can expose |
|---|---|
| Text | Text, Text color, Font size |
| Image | Image |
| Instance (nested) | Instance (a swap slot) |
| Symbol | Color |
| Rectangle, ellipse, line, path | Fill, Border (with a stroke), Corner radius (rectangles) |
| Every layer | Opacity, Scale, Visibility |
| Instance (nested), its own props | Each prop of the nested component, under Pass through from the nested instance |
A prop is named after the layer: a text layer called title gives title, its color title color, visibility show title. While a component is open, a Props list sits at the top of the inspector; right-click a prop there for Rename… or Remove Prop. The same list shows the variant sets, with Remove “large” and Remove Set. Click ◆ again, or right-click → Remove Prop “title”, to un-expose a field.
Set props on an instance
Select an instance: the inspector's Props section shows a typed control for each prop. Change it and only that instance changes. The reset button next to a control goes back to the component's value.
| Kind | Control on the instance |
|---|---|
| Text | A text field |
| Color | A color well |
| Image | Choose… an image |
| Number | A number field |
| Visibility | A switch to show or hide a child |
| Instance swap | A menu of components for the slot |
Troubleshooting
| If this happens | Try this |
|---|---|
| Expose as prop doesn't show | It appears only in edit mode, for layers inside the open component. |
| An instance ignores a variant's text | The instance sets that prop. Reset it to follow the variant. |