The Inspect variables feature is not available to InVision V6 Private Cloud users.
When inspecting a prototype in InVision, you can name data values—such as colors and measurements—in your prototype, creating reusable variables that align with the naming conventions used in your own codebase.
The Inspect variables feature set functions the same for all prototypes; however, the Inspect for Studio interface is light, whereas the Inspect for Craft Sync interface is dark. All screenshots below showcase Inspect variables for Studio prototypes.
You can create single-style-attribute and multiple-style-attribute variables in Inspect.
A single-style-attribute variable is used to rename style values and can only contain one attribute. This variable replaces the style attribute's measurement/code description—and that of any other elements that have the same attribute—with the name you've chosen, so the variable name will appear instead of the style value. You can't have more than one single-style-attribute variable with the same attribute.
A multiple-style-attribute variable can hold one or more style values. You can have multiple variables of this type that have the same attributes, and you can have more than one variable of this type that have the same name.
To define a custom variable:
- Sign in to your InVision account and open a prototype.
- Select a layer and navigate to the right-hand information panel.
- In the Styles tab, hover over the measurement or style you want to create a variable for. Click the Create variable icon ().
If working with a prototype published via Craft Sync, you'll see this Create variable icon () instead.
- Name the variable and press Enter.
The newly created variable will appear in the left-hand Variables section of Inspect.
Viewing saved variables
The Variables section will appear below the left-hand layers list while inspecting any prototype. That section will display all variables that you have previously saved.
If you want to hide the variables, click the drop-down in the Variables section and choose No Library. This will remove the list of variables in the left-hand column as well as the variable names in the right-hand information panel.
Developers can also define custom styles in Inspect for things like text styles or containers.