UI Designer — Variables¶
Variables are reusable values for a place: colour, number, and gradient. Link inspector fields to a variable so many layers stay in sync when you change the token.
The panel is marked (Alpha) in the UI — the workflow works, but it may still change. There will be bugs; if you hit one, please tell me on the DevForum plugin thread or Discord.
Open it from the Variables icon on the left rail (below the logo, in the editor).
Kinds¶
| Kind | Typical use |
|---|---|
| Colour | Fill, text, stroke, image colour |
| Number | Opacity, thickness, corner radius, and similar numeric fields |
| Gradient | Fill gradients (UIGradient) |
Variables live under ReplicatedStorage/XocoatlSaves/DesignerVariables (same saves root as animations). Moving the saves folder with Locate Xocoatl Saves Folder keeps them with the rest of Xocoatl data.
Create and organise¶
- Open Variables.
- Use + to add a Number, Colour, or Gradient.
- Name it, set the value.
- Optionally group into categories (rename the category header).
Search filters the list. Delete removes the variable (linked fields unlink).
Link a field¶
On a colour or number control in the inspector, use the variable affordance (link chip / suggest) and pick a variable of the matching kind. The field then follows the variable.
- Changing the variable updates every linked field on that screen.
- A manual edit on a linked field can break or override that link depending on the property (position/size/anchor/rotation/corner are treated as local layout edits).
Tips¶
- Name tokens after meaning (
Accent,CardRadius), not after one layer. - Gradients on fill can be variables too — useful for shared button sheens.
- Variables are not the Timeline Animator. They style the live UI in Studio; clips still keyframe concrete property values unless you animate those properties separately.