Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


Can I define custom variable names in Inspect?

Follow

When inspecting a prototype in InVision Cloud, 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.

Defining variables

To define a custom variable:

  1. Sign in to your InVision Cloud account and open a prototype. 
  2. Select a layer and navigate to the right-hand information panel.
  3. In the Styles tab, hover over the measurement or style you want to create a variable for. Click the Create variable icon (studio-create-variable-icon.png).
    If working with a prototype published via Craft Sync, you'll see this Create variable icon (invision-cloud-inspect-create-variable-icon.png) instead.
  4. Name the variable and press Enter.

The newly created variable will appear in the left-hand Variables section of Inspect.

v7-studio-define-variable.gif

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.

v7-studio-variables-section.png

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.

v7-studio-hide-variables.gif

Developers can also define custom styles in Inspect for things like text styles or containers.


Was this article helpful?

Still have a question?

Contact Us