Syncing, presenting, and sharing

Tutorial Breakdown

At any point in the design and prototyping process, Studio allows you to sync directly to your InVision account to share and collaborate on your project. Once you’ve synced to InVision, you’ll be able to view your prototype in all of it’s animated glory, gather feedback from stakeholders, and get developers what they need to begin building.

In this video we’ll wrap things up by:

  • Collaborating with Freehand
  • Syncing to InVision
  • Viewing and sharing prototypes
  • Commenting and sharing feedback
  • Using Inspect for developer handoffs

Studio project file

Download this free Studio project file to follow along—step by step—with the tutorial.

New to Studio?

Download the latest version of InVision Studio to get started

Download StudioDownload InVision Studio

Transcript

In the early stages of design collaboration and feedback, InVision Studio syncs directly and seamlessly with Freehand. To sync to Freehand, just head up to the Share button in the top right corner of the screen, choose the Freehand button in the middle of the three tabs, give it a name (in my case, we're going to call it “Deck Mobile”), and then we'll choose to sync All Artboards to my personal team, and then choose Create Freehand.

Studio instantly creates a freehand document and spits out a link that I can click on where me, my team, stakeholders, project managers, developers—really anyone involved in the collaborative design process—can come in and leave feedback and input in one collaborative space where we can all work together.

When you're ready to share your prototypes on the web in their full fidelity, Studio syncs seamlessly with your InVision account. We'll just head up to the Share button on the toolbar at the top of the screen, give your project a name, and choose Publish. Studio uploads all the assets and gives us a link.

When we click on that link, it will launch our web browser and open up our project where we can view it and share it.

When you open a Studio prototype on the web, you see exactly what you saw in the InVision preview window. The same fidelity, the same interactions, the same animations—the same everything. When it's time to share, you can head down to the Share button in the bottom right hand corner, choose Copy Link, and send it off anywhere you like. Anyone with a link to your prototype will be able to view it in its full fidelity and leave comments.

When a collaborator receives a share link, they can head down to Comment Mode on the toolbar at the bottom of the screen. Once in comment mode, you can click anywhere to leave a comment directly within the context of a screen. You can also use the @ symbol to mention a specific member of your team. Hit return and any collaborators mentioned will receive a notification so they can jump in, resolve, and respond to feedback.

When it's time to hand your prototype over to a developer, they can open your share link, and then head down to Inspect on the toolbar at the bottom of the screen. Inspect allows developers to view measurements, grab colors, look at fonts, even select individual objects to grab assets. They can browse all of your layers in groups, and then they can head over to the Code tab to grab code from their favorite language.

To change units in code, you can head up to the ellipses in the top right corner, set your units, set your code, and start building. And the best part? Every time you sync from Studio, your developers will get the latest assets and code—o that everyone can build better, faster, together.

Read More
Free. Forever.

Push your craft to new heights.

InVision Studio—designed with you in mind.

Make your next screen your best one yet.

Download studio free Download studio