×

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 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 10 popular device models.
  • Tablet: Choose one of four popular device models.
  • Computer: Choose one of six popular device models.
  • Watch: Choose one of five popular device models.
Scaling

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

  • NoneView the 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:

  • Device: If your viewport is set to any phone, tablet, computer, or watch, you will see the Device option in the Appearance dropdown list.
  • 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.

Model

If your viewport is set to any phone, table, or watch that is available (physically) in multiple colors and your appearance is to Device, you will see a Model dropdown list, which you can use to select your preferred model (color).

Note: It's not currently possible to change the model (color) of a computer in the preview viewport.

 

Publishing a Studio prototype to InVision

There are three ways to publish Studio prototypes to InVision Cloud:

  • Publish a new prototype
  • Update a previously published prototype
  • Publish a new version of a prototype

Publish a New Prototype

To publish a new Studio prototype to InVision:

  1. At the right end of the Studio toolbar, click the InVision publishing icon (studio-publish-icon.png).
    Note: The publish dialog will open, so you can choose the appropriate Viewport, Scaling, and Appearance settings for the prototype.
  2. In the Name field, enter a name for the new prototype.
  3. Click the Viewport drop-down arrow, and then click (and preview) the device type you want to use when viewing your prototype on InVision Cloud.
    Note: To customize your viewport dimensions, choose any predefined device type, and then edit the text fields to the right of the Viewport drop-down arrow.
  4. If using Auto setting for your viewport, click the Scaling drop-down arrow and click either Fit or None.
  5. If using any viewport setting other than Full Window, click the Appearance drop-down arrow and choose your preferred settings.
  6. At the bottom of the publish dialog, click Publish.

studio-publish-new-prototype.gif

Update a Previously Published Prototype

To update (replace) a Studio prototype that you have previously published to InVision:

  1. At the right end of the Studio toolbar, click the publishing icon (studio-publish-icon.png).
  2. Click the back arrow, begin typing the name, and then click the existing prototype in the results list.
  3. If you need to edit any of Viewport, Scaling, or Appearance settings, click the corresponding drop-down arrows and choose the appropriate settings.
    Note: These options are described in the Settings table above.
  4. At the bottom of the publish modal, click Update.

Publish a New Version of a Prototype

To publish a new version of an existing Studio prototype without replacing the previously published version:

  1. At the right end of the Studio toolbar, click the publishing icon (studio-publish-icon.png).
  2. At the bottom of the publish modal, click New.
  3. In the Name field, enter a name for the new version of the prototype.
  4. Click the corresponding drop-down arrows and choose the appropriate Viewport, Scaling, and Appearance settings for the new version.
    Note: These options are described in the Settings table above.
  5. At the bottom of the publish modal, click Publish.

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.

 

Getting Started: Studio (
)

Publishing and Sharing

Prev