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.
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.