Variables are named, reusable values you define once and apply throughout your project. Instead of manually typing the same color code or number in dozens of places, you set up a variable with a meaningful name and reference it wherever you need it. When you update the variable, every place that references it updates automatically.
Why Use Variables?
Presets handle consistent styling within a single hotspot type, but variables go a level above that. If your brand color appears across multiple different presets (a callout preset, a menu preset, a tooltip preset), updating one variable updates all of them at once without touching each preset individually. And at the craftspace level, a single variable change can ripple across every project in your craftspace simultaneously.
Variable Types
360Crafter supports three types of variables:
Color
Stores a hex color value (e.g. #3B82F6). Color variables are the most commonly used type. Apply them to backgrounds, text, borders, icon tints, and any other color property in the editor.
Number
Stores a measurement or rotation value, such as 20px or 50%, or a number of degrees. Use number variables for consistent spacing, border radius, font sizes, rotation, or any other measurement that repeats across your project.
Icon
Stores a reference to an icon. This can be a URL, an uploaded image, or a built-in Lucide icon using the format lucide:icon-name. Icon variables let you swap out a symbol globally across all hotspots that reference it.
Scopes: Craftspace vs. Project
Variables exist at two levels:
Craftspace variables are shared across all projects in your craftspace. They are ideal for brand-wide values like your main brand colors, your company icon, and your standard sizing. Everyone working in the craftspace can use them.
Project variables are local to a single project. They are perfect for values specific to one experience, such as a scene-specific color palette, a unique icon set for that tour, or sizing that differs from the craftspace defaults.
When a project variable and a craftspace variable share the same name, the project variable takes priority. This lets you override a craftspace default for a specific project without affecting anything else.
Managing Variables
Craftspace Variables
Open the Craftspace settings to manage variables shared across all your projects. Here you can create, edit, and delete colors, numbers, and icons at the craftspace level.
Project Variables
Open the Variables page within a project to manage that project’s local variables. You will also see a read-only view of craftspace variables here, so you can see everything available to your project in one place.
Using Variables in Properties
When editing a hotspot or other element in the Properties Panel, you will see variable options in color pickers and numeric fields.
-
Color fields show a list of your color variables. Click one to apply it. The field stores a reference to the variable rather than the raw color value, so if you update the variable later the element updates too.
-
Numeric fields show a variable picker when variables of the matching type are available. Select a variable to link the field to that value.
A Built-in Variable: circle
360Crafter includes one built-in variable available to all projects: circle. It stores the value 999px, which produces a fully circular border radius when applied to an element. You will see it appear in border radius fields alongside your own variables.
Tips
-
Name variables for intent, not appearance.
brand-primaryis better thanblue-500. If you rebrand to a different color, the name still makes sense. -
Use craftspace variables for anything brand-wide. Reserve project variables for one-off overrides or project-specific values.
-
Project variables override craftspace variables by name. To customise a craftspace default for one project, create a project variable with the exact same name.
-
Variables are live. Editing a variable value immediately updates every place it is referenced in your project. You do not need to re-apply it manually.