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


Working with Specs in InVision V7

This article provides answers for an InVision V7 open beta feature. If you're on InVision V6, this information does not apply. Not sure which version you're using? Find out now.

The latest document type in InVision V7, Specs are tailored for one job only—design to development collaboration.

By syncing artboards as a spec, rather than a prototype, designers can streamline collaboration efforts and send only the screen designs that are ready for development. Each design spec delivers exactly what’s relevant to developers and provides the context they require from designers, all in a document focused solely on the details the developer needs to take the spec from design to reality.

invision-v7-spec-document-hero.png

Getting Familiar with Specs

Once the designer has published a spec via Craft Sync and completed prepping it in InVision V7, the developer and other collaborators can use the spec to do the following:

  • Review the project overview
  • Collaborate:
  • See collaborative comments on each screen—without leaving the canvas
  • Work alongside colleagues in the spec at the same time—without overwriting one another's work
  • Give and receive feedback via comment threads
  • Inspect screens
  • Connect the spec document to a specific Jira ticket

Check your Inbox! Commenting on a spec works much like commenting on a prototype in InVision V7, so you can ramp up collaboration with features like comment threads, notes, @ mentioning document collaborators, emoji, ability to set comments as private, and, of course, Inbox.

Creating a Spec

There are three ways to create a new spec:

  • Publish a spec via Craft Sync in Sketch
  • Create a spec from the InVision Documents screen or a space
  • Create a spec from a set of prototype screens in InVision

Publish a Spec via Craft Sync

To sync artboards from Sketch to InVision V7 as a new or existing spec:

  1. Select the artboards you want to sync, and then click the Craft Sync icon (craft-sync-icon.png).
  2. In the Craft Manager modal, below Publish To, click Spec Beta.
  3. Click either Create new and enter a name for the spec, or click Select existing and select the spec you want to sync to.
  4. Choose either All artboards on page or Selected artboards, and then click the Advanced dropdown and update the settings as wanted.
  5. Click Publish.
    craft-sync-create-new-spec.gif

Create a Spec from the Documents Screen or a Space

To create a spec from either the Documents landing screen or from a space:

  1. Sign in to InVision V7.
  2. Open a space or start from the Documents landing screen.
  3. In the upper-right corner, click + Create and click Spec.
  4. In the Name your spec field, enter a name and click Create.
    invision-v7-create-spec-in-space.gif

After creating a spec in InVision, you'll need to add screens via Craft Sync or by publishing a set or screens from an existing InVision prototype to the spec.

Create a Spec from a Set of Screens

To create a spec from a set of screens in your prototype:

  1. Sign in to InVision V7 and open your prototype.
    If you've already created the set of screens you want to publish as a spec, skip to step 4.
  2. In the left panel, click Add set.
  3. In the text field, type a name for the set and press Enter.
  4. Hover over a screen and, at the top left, check the circle. Repeat this step for each screen you want to move. To select multiple screens in order, select the first one, hold Shift, and select the last screen in the series.
  5. Drag and drop the screens over the set you added.
  6. In the left panel, hover over the screens set to reveal and click the More menu icon (invision-v7-prototype-screen-set-more-menu.png), and then click Create spec.
  7. To the right of the search field, click Create a new spec.
  8. In the Name your spec field, enter a name and click Create.
    invision-v7-create-spec-from-screens-set.gif

You can also publish sets of screens to an existing spec: After step 4 above, enter the name of the previously created spec and select it from the results list.

Accessing a Spec

Once a spec has been published to InVision V7 via Craft Sync, you can access it with the rest of your InVision V7 documents. You'll see the spec in either the Documents tab or in a space—if it's been moved to a space. You can also access a spec on InVision V7 from within the Craft interface.

Open a Spec While Working in Craft

There are two ways to open a spec via Craft:

  • In Sketch, click the Craft Sync icon (craft-sync-icon.png), click the Select existing dropdown, select the spec you want to open, and then click Open on web.
  • In the Mac menu bar, click the Craft Manager icon (craft-manager-icon.png), click the Specs tab, and then click the name of the spec you want to open.

Open a Spec While Working in InVision V7

There are three places to access a spec while working in InVision V7:

  • On the Homepage, under Recently viewed documents (if you have already viewed the spec)
  • On the Documents page (if the spec hasn't been moved to a space)
    To see only specs on your Documents page, click the Specs filter option just above the document thumbnails on the right.
  • In a specific space (if the spec has been moved to a space)
    To move a spec to a space, open it in InVision V7 and, in the upper-left corner, click Add to a space.

Adding a Spec Overview

The overview gives developers and other viewers the quick, high-level context needed to understand the purpose of the given spec document.

To add an overview to your spec:

  1. At the top of InVision V7, click Documents.
  2. Click the spec document you want to open.
  3. Below the Overview tab, click the text field.
  4. Add your overview, and then click Done.
    invision-v7-spec-add-overview.gif

Any time you need to edit the spec overview, repeat the steps above. 

Get Familiar with Spec Tools

Above the canvas, you'll see the More menu icon (•••), collaborators' avatars, and the Share button.

More Menu

Click the More icon (•••) to archive or delete a spec.

Collaborators

If there are four or fewer people collaborating on the spec, all four of their avatars will be visible above the canvas, and you can hover over each one to display the person's name.

If there are more than four people collaborating on the spec, hover over the +5 icon [numeral will vary based on the number of collaborators] to display the names of all other collaborators on the spec.

Share

Click the Share button to invite collaborators to join the spec or to share the spec via a document link (recipient must belong to your InVision V7 team) or via a public link (anyone can receive the link and view the spec, whether they're on your InVision V7 team or not).

Learn the details about sharing V7 documents.

Tools

In addition to editing the spec document name and overview, you'll use the tools below to collaborate and work on your spec. Use this table for a quick overview of each tool.

Icon

Tool Name

Shortcut

Description

invision-v7-specs-selector-icon.png

Selector

V

Select objects—screens, comments, or images—to edit or move.

invision-v7-spec-comment-icon.png

Comment

C

Add comments or notes to screens without leaving the Specs canvas.

invision-v7-specs-upload-image-icon.png

Image

I

Add images to the canvas.

invision-v7-specs-text-icon.png

Text

T

Add notes directly to the canvas to detail how the design should function.

invision-specs-toggle-connections-icon.png

Connections

X

Show or hide connections (hotspots) among screens.

invision-v7-specs-keyboard-shortcuts.png

Shortcuts

 

View keyboard shortcuts for Specs.

invision-v7-specs-canvas-zoom-icon.png Zoom ⌘- or ⌘+

Click the - (minus) button to zoom out.

Click the + (plus) button to zoom in.

Inspecting a Spec

Developers and other viewers can quickly switch to Inspect mode in a spec to view development details for each screen. Immediate access to Inspect is especially useful when reviewing contextual comments from designers.

To inspect a screen within a spec:

  1. Click the selector icon (invision-v7-specs-selector-icon.png).
  2. Double-click any screen and inspect the details.
    Inspect mode in a spec document is nearly identical to Inspect mode in a prototype, so you can access the same critical info while inspecting either document type (as seen in this quick peek at Inspect mode).
    invision-cloud-v7-specs-inspect.gif
  3. When you're ready to return to the main spec view, click the back arrow (invision-cloud-v7-inspect-return-to-spec.png) at the top-left of Inspect.

Connecting a Spec to Jira

Developers can connect each InVision spec to a specific Jira ticket, making it all the more convenient to reference the spec while they're building.

To connect a spec to Jira:

  1. Open the spec in InVision V7.
  2. Just above the Overview heading on the left, click Link to Jira.
  3. In the Link spec to Jira modal, choose your Jira project, Epic, or issue; add a comment; and click Link to Issue.
    invision-v7-spec-link-to-jira.gif

To open the spec in Jira, click the link you created: 

invision-cloud-v7-spec-linked-to-jira.png

Learn something new

Getting Started Guides