×

Publishing and Sharing

Once you create your prototype in Studio, it’s time for deeper collaboration with your team. There are a few ways to collaborate on a Studio prototype:

  • Preview your prototype in Studio.
  • Publish your prototype to InVision for sharing, viewing, inspecting, and commenting.
  • Publish your prototype to Freehand for collaboration in real time.
  • Mirror your prototype on an iPhone or iPad to preview and test your design on a real device.

Important: It is not possible to publish or preview a Studio document that does not include artboards.

Previewing a prototype in Studio

The Viewport, Scaling, and Appearance settings accessed in the preview modal make it easier than ever to preview and present your prototype in an environment that's as realistic and immersive as possible.

To open your preview settings:

  1. In the upper-right corner of the canvas, click the preview icon (studio-preview-prototype-icon.png).
  2. In the upper-right corner of the preview modal, click the settings gear icon (studio-preview-settings-gear-icon.png).
  3. With the preview modal open, click the corresponding drop-down arrow to adjust the following settings: Viewport, Scaling, and Appearance (all further described in the table below)

Settings

Available Options

Viewport

Set the viewing area or device skin for your prototype preview:

  • Auto: Studio will automatically detect the optimal viewing area for the prototype.
  • Full Window: The prototype will resize to fill the width and height of the preview window as you resize it.
  • Phone: Choose one of six popular device models.
  • Tablet: Choose one of three popular device models.
  • Desktop: Choose one of three popular device models.
  • Watch: Choose one of three popular device models.
  • Web: Choose one of four popular device models.
Scaling

With your viewport set to Auto, you can set scaling preferences for the prototype preview:

  • NoneView prototype pixel-for-pixel as you've designed it.
  • Fit: View the prototype scaled to fit the size of the preview window, so you will always see the whole artboard.
Appearance

Choose an option for the area between the preview viewport and the edges of the preview window:

  • Shadow: Add a subtle shadow effect to the edges of the viewport.
  • Border: Fill the area with a color.
    To change the color, click the color box to the right of the Appearance drop-down list.  
  • None: The area will be completely white.

Note: The appearance settings are not available if you set your viewport to Full Window.

 

Publishing a Studio prototype to InVision

To publish a Studio prototype to InVision:

  1. At the right end of the Studio toolbar, click the InVision publishing icon (studio-publish-icon.png).
    Note: The publishing dialog will open on the Publish Prototype tab by default.
  2. In the Name field, enter the prototype name. Or click the Choose... button, click the Prototype drop-down arrow, and enter a prototype name in the Search field.
  3. In the lower-left corner, click the account drop-down arrow and choose either your personal account or a team account.
  4. Click the Publish button (or the Update button if working with an existing prototype).

publish-new-studio-prototype.gif  studio-update-existing-prototype.gif
Left: Publish a new Studio prototype. Right: Update an existing Studio prototype.

Creating and sharing a freehand from Studio

Perfect for initial collaboration (or any other stage, really), Studio makes it easy to sync prototypes to Freehand—where you can invite other people on your team to offer real-time feedback via the web.

To create and freehand in Studio:

  1. In the toolbar in the top-right corner of the Studio canvas, click the Freehand icon (studio-freehand-icon.png).
  2. In the small dialog that appears, click the New button.

studio-create-freehand.gif

There are two ways to share your freehand from Studio:

  • To share a link to your newly published freehand, click Copy Link and paste the link into an email, text, or other message.
  • To open your newly published freehand in your browser, click the open icon (studio-freehand-open-browser.png).

Mirroring Studio Prototypes

Use the device mirroring feature in Studio to preview prototypes in action on the InVision iOS app.

To mirror a Studio prototype on your iPhone or iPad:

  1. Ensure that your computer and iOS device are connected to the same WiFi network.
  2. In the Studio toolbar, click the sync icon (studio-publish-icon.png) and click the Mirror tab. This will generate a unique QR code.
  3. In the footer of the InVision iOS app, tap the QR scanner icon (invision-ios-app-qr-scan-button.png).
  4. Scan the QR code displayed in Studio. This will automatically mirror the prototype to your device.

To stop mirroring the Studio prototype to your iOS device, at the bottom of the Studio sync dialog, hover over the green dot next to your device name and click the X that’s revealed.

Viewing and sharing a Studio prototype

Sharing your Studio prototypes with other people is currently done by sending a public link. It is not yet possible to invite collaborators to Studio prototypes; however, anyone you share a public link with can view and comment, as discussed in the "Commenting on a Studio Prototype" section below.

Open a Studio prototype

To open a prototype from Studio after publishing or updating it:

  1. At the right end of the Studio toolbar, click the InVision publishing icon (studio-publish-icon.png).
  2. Under the prototype name, click Copy Link or click the URL itself to open the prototype in InVision.

Share a Studio prototype

To share a Studio prototype as public link from InVision:

  1. Open the published Studio prototype in InVision.
  2. At the bottom-right corner of the console toolbar, click the green Share button.
  3. In the Share dialog, click the Get Public Link button, and then click the link icon (to copy the link to your clipboard).
  4. Send the public link to the people you want to access your prototype.

Important: Anyone with the public link can access your prototype.

To share a Studio prototype—from the InVision console—with an Enterprise team:

  1. Open the published Studio prototype in InVision.
  2. In your browser URL bar, select and copy the full URL.
    Note: Do not use Share button in the bottom-right corner of the console; that button is to copy a public link that anyone can use to access your prototype.
  3. Send the Studio prototype URL to the people you want to access your prototype.

Commenting on a Studio prototype

Along with the prototype owner, any collaborator with a share link to access a Studio prototype in InVision can comment on that prototype. To leave comments on a Studio prototype you’re viewing, in the console toolbar, click the comment icon (invision-console-comment-icon.png) or use the keyboard shortcut—C. To notify specific people about a comment, @mention them in the comment.

Inspecting a Studio prototype

InVision Inspect makes it convenient for developers and project managers to grab everything they need from a Studio prototype to start building the project. To inspect a Studio prototype you have open in InVision, in the console toolbar, click the Inspect icon (invision-console-inspect-icon.png) or use the keyboard shortcut—I.