Can I define custom styles in Inspect?
  • 17 Feb 2023
  • 1 Minute to read
  • Dark
    Light

Can I define custom styles in Inspect?

  • Dark
    Light

Article summary

When inspecting a prototype in InVision Cloud, you can create custom styles for groups of relevant key values—e.g., for text styles—that are shown in the Styles section of the Inspect panel when a layer or layer group is selected.

Creating custom styles in Inspect is particularly useful for developers, because they can use the same style name in Inspect that they use in their actual codebase. If the designer has already created a style in the source file using Sketch libraries, that original name will also remain visible in Inspect after the corresponding custom style is created, letting developers easily reference the style by its original Sketch library name when collaborating with the designer.

TipDevelopers can also define custom variable names in Inspect for things like measurements and colors.

Defining styles

Warning: The custom styles feature in Inspect is not part of the native Sketch libraries feature; therefore, a designer must define a style in Sketch libraries and then sync the prototype to InVision Cloud before the name is visible in Inspect.

To define a custom style:

  1. Sign in to your InVision Cloud account, open a prototype, and select a layer or layer group. 
  2. Next to Styles in the information panel to the right, click the Create style icon (invision-cloud-inspect-create-style-icon.png).
  3. Name the style, select the values you want to include, and click Save.
    invision-inspect-create-custom-style.gif

Viewing and editing saved styles

invision-inspect-custom-styles-ui.png

As seen in the annotated screenshot above, there are three relevant areas of the Inspect UI to notice when working with custom styles:

  1. Style name from the Sketch library: If the designer created a style in a Sketch library before syncing the prototype to InVision Cloud, you'll see that original style name here when the corresponding layer or layer group is selected.
  2. Custom style defined in Inspect: If the developer (or any authorized person) creates a custom style in Inspect, you'll see the custom style icon (invision-inspect-custom-style-sun-icon.png), name, and key values here when the corresponding layer or layer group is selected.
    Note: You can also edit the Inspect style here: Hover over the style name and click Edit (invision-inspect-custom-style-edit-icon.png).
  3. All saved styles and variables for the prototype: Whether created in a Sketch library or in Inspect, all styles and variables for the prototype are always visible here when working in Inspect mode.

To hide the custom styles and variables completely, click the Library drop-down (below the Variables heading) and select No Library. To show them again, click the same drop-down and select Team Library.


Was this article helpful?