Can I define custom variable names in Inspect?
  • 22 Feb 2023
  • 1 Minute to read
  • Dark
    Light

Can I define custom variable names in Inspect?

  • Dark
    Light

Article Summary

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.

Understanding variables

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.

Defining variables

To define a custom variable:

  1. Sign in to your InVision 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).
    Note: 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.

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.

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

Was this article helpful?