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


InVision Cloud V7: Working with Specs

Follow

This article provides answers for an InVision Cloud V7 beta feature that's currently restricted to a small number of Enterprise teams for testing. The feature is slated to roll out for all Cloud V7 Enterprise teams later this year.

The latest document type in InVision Cloud 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 annotated 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.

Get familiar with specs

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

  • Review the project overview.
  • See the designer's annotations on each screen.
  • Inspect screens, bouncing from annotations to any screen in Inspect mode.
  • Connect the spec document to a specific Jira ticket.

Publish a spec with Craft Sync

To sync artboards from Sketch to Cloud V7 as a new 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 Create new, and enter a name for the spec.
  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

Access your published specs

Once a spec has been published to Cloud V7 via Craft Sync, you can access it with the rest of your Cloud 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 Cloud V7 from within the Craft interface.

Opening 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.

Opening a spec while working in Cloud V7

There are three places to access a spec while working in Cloud 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 Cloud V7 and, in the upper-left corner, click Add to a space.

Add 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 Cloud 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-cloud-v7-add-spec-overview.gif

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

Annotate screens

Designers can add screen-by-screen annotations to provide compliance specifications, design context, and other insights developers need to build pixel-perfect products—complete with hover states, transition animations, and other design interactions built just the way the designer envisioned.

To add an annotation to an open spec:

  1. In the top-left corner of the canvas, click the Add annotations icon (invision-spec-annotation-icon.png), and then click anywhere on the screen or canvas to drop the annotation.
  2. Just below the Annotations tab, click the text field, add your note, and click Done.
    invision-cloud-v7-add-spec-annotation.gif

Inspect screens

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 the designer's annotations.

To inspect a screen within a spec:

  1. Ensure that the Add annotation icon is not active.
    If it is active, the icon is dark: invision-cloud-v7-spec-annotation-active.png
  2. 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.

Connect 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 Cloud V7.
  2. Just above the Overview and Annotations tabs, 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-cloud-v7-specs-link-to-jira.gif

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

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

Was this article helpful?

Still have a question?

Contact Us