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


Using screen labels for InVision V7 prototypes

Follow

This article provides answers for InVision Cloud V7. If you’re on Cloud V6 of InVision, read this article instead. Not sure which version you're using? Find out now.

Prototype screen labels in InVision V7 let you create customizable filtered views and easily share links to each view. Editors of an individual prototype can manage the labels available for that prototype as well as create new labels, like Jira milestones, and edit the names and colors of the labels in our starter set: In Progress, Needs Review, or Approved

invision-v7-apply-screen-labels.gif


In short, screen labels let you accomplish three major goals to streamline your project workflow:

  • Organize larger projects.
  • Manage the status of screens and provide design approvals.
  • Reduce noise for all collaborators—most notably designers, developers, and other key stakeholders.

If you're new to InVision V7 and used Workflow in InVision V6, you can use screen labels for the same purpose!

Key uses

The three major goals listed above provide a nice high-level view of what you can accomplish with screen labels, but what about individual tasks? Screen labels are designed for a handful of key uses.

Organize screens with labels

Quickly tag your screens with preset or custom labels to indicate status, Jira epic, or other relevant information to your team.

To apply an existing label (preset or custom) to a screen on the Screens overview page:

  1. Hover over the screen thumbnail to reveal and click the More menu icon (•••).
  2. Click Manage labels.
  3. In the Manage labels dialog, select In ProgressNeeds ReviewApproved, or one of your team's custom labels.
    invision-v7-add-screen-label.gif

To toggle screen labels on or off for a specific screen, follow steps 1 and 2 above, click the label/s you want to toggle, and then verify that the checkmark has been added or removed:

  • If you see a checkmark, the label is toggled oninvision-v7-screen-label-on.png
  • If you don't see a checkmark, the label is toggled offinvision-v7-screen-label-off.png

Manage labels

Access labels management from the Filters dropdown or selected screens to edit or create additional labels for you and your team to use.

Editing labels via the Filters dropdown

To edit an existing screen label via the Filters dropdown on the Screens overview page:

  1. Just below the collaborators' avatars, click Filters.
  2. Click Manage.
  3. In the Manage labels dialog, click the pencil icon on the label you want to edit.
  4. In the Edit label dialog, change the name and/or color:
    • Click the round color icon, and then select the color you want.
    • Delete the current name and enter a new name.
  5. Click Save.
    invision-v7-screen-labels-manage-via-filter-dropdown.gif

Creating new labels via the Filters dropdown

To create a new screen label via the Filters dropdown on the Screens overview page:

  1. Just below the collaborators' avatars, click Filters.
  2. Click Manage.
  3. In the Enter label field of the Manage labels dialog, enter a name for the label.
  4. To the left of the name, click the round color icon, and then select the color you want.
  5. Click Create.
    invision-v7-create-custom-screen-label.gif

Managing labels while screens are selected

To select one or more screens and then manage labels:

  1. On the Screens overview page, hover over a screen thumbnail to reveal and click the selection icon in the top-left corner.
    Once you've selected the screen, the other screens in the prototype will also become selectable.
  2. In the toolbar that appears at the bottom of the browser window, click Manage Labels.
  3. In the Manage labels dialog, edit or create a label:
    • Edit: Click the pencil icon on the label you want to edit, update the color and/or name, and click Save.
    • Create: In the Enter label field, enter a name for the label, click the round color icon and select a color, and then click Create.
      invision-v7-manage-labels-screens-selected.gif

Deleting labels via the Filters dropdown

To delete an existing screen label via the Filters dropdown on the Screens overview page:

  1. Just below the collaborators' avatars, click Filters.
  2. Click Manage.
  3. In the Manage labels dialog, click the pencil icon on the label you want to delete.
  4. In the Edit label dialog, click the Delete button.
  5. Click the second Delete button to confirm your choice.
    invision-v7-screen-label-delete.gif

Filter screens by labels

Filter screens by available labels to quickly find specific screens—including screens that have any combination of labels and the Has comments or Has unread comments filters.

invision-v7-screen-labels-filter.gif

 

Share labeled screens for specific feedback

When viewing screens filtered by label, copy the URL to share a focused view with collaborators.

invision-v7-share-screens-by-label-view.gif

Primary users

Screen labels are perfect for managing design visibility and status within design teams, and they can be used between designers and developers to conveniently tie screens to specific engineering milestones or Epics.

While all collaborators on a prototype benefit from screen labels, these user types are most likely to use screen labels often:

  • Managers: Product managers, project managers, design leads, and similar roles
  • Key prototype collaborators: Designers, developers, and decision-making stakeholders

Managers

With screen labels, managers and design leads can conveniently approve changes and track the status of individual screens or UI elements. This makes it a cinch to tie individual screens or design initiatives to development milestones.

Key prototype collaborators

Screen labels are also extremely useful for designers and other collaborators. Along with indicating the current status of designs, screen labels also let designers, developers, and other collaborators quickly tag numerous screens with the Needs Review label (or whatever name you choose for the label) rather than suffer through the hassle of selecting and sharing each screen.

Access and limitations

Access and limitations to what you can do with screen labels depends on whether or not you have editing permissions for the specific prototype.

Prototype editors

If you're an editor on the prototype, in addition to everything that authenticated users can do (see below), you can completely manage screen labels:

  • Add or remove individual screen labels on the Screens overview page.
  • Manage labels on individual screens in the InVision Console (e.g., Play, Build, or Comment mode).
  • Tag screens using our starter set of labels: In Progress, Needs Review, Approved
  • Create new labels for the prototype.
  • Delete labels from the prototype.
  • Edit label names.
  • Select or change the label color, using one of 10 color options.
    invision-v7-screen-labels-colors.png

Authenticated users

If you're an authenticated user with access to a given prototype, you can do the following with screen labels for that specific prototype:

  • See what labels are applied to individual screens on the Screens overview page.
  • Filter screens, using labels on the Screens overview page:
    • Click any label in the grid.
    • Click the Filters dropdown.
       
  • Share filtered views by selecting the filters you want to apply and then copying the browser URL, which will change based on the filters you select.
  • View labels applied to an individual screen in the InVision Console (e.g., Play, Build, or Comment mode).
  • See screen labels that correspond to any Workflow statuses that had been assigned to the same prototype screens in InVision V6, before moving the prototype to InVision V7. 

Conversion of Workflow statuses to V7 screen labels

If an InVision V6 prototype contains either of the following, its Workflow statuses will be converted to corresponding screen labels—with identical names—when updating to InVision V7:

  • One or more screens with a status other than In Progress
  • One or more screens with a custom status applied

InVision V6 prototypes that have neither a custom status nor an In Progress status applied will be updated to InVision V7 without any pre-defined screen labels. This behavior is designed to avoid auto-tagging screens with the In Progress label, which would cause potential inaccuracies since the In Progress status is automatically applied to all screens in InVision V6 if Workflow has been used on the prototype.


Was this article helpful?

Still have a question?

Contact Us