Log in to like this post! Design in Sketch. Get better results with Indigo Studio. George Abraham / Tuesday, November 14, 2017 UX prototyping can help teams learn fast, and iterate faster; without investing in code. However, this hinges on getting real actionable feedback from customers and stakeholders as early as possible. Near instant feedback loops will let you course correct or pivot completely before it’s too late. And for this, your users need to be able to use the prototype wherever they are, on any device. Our new export to Indigo plugin for Sketch enables you to export and sync your Sketch designs with Indigo Studio projects. This lets you harness the power of Indigo Studio for creating animated, interactive prototypes based on your polished visual designs from Sketch! But the story does not end there: you can privately share your prototypes on indigodesigned.com, where your users and stakeholders can access and view them using any web-browser. You can even run unmoderated usability studies with video replays of every mouse movement, facial expression, and verbal utterance. Now that’s what we call a complete prototyping solution! This article provides an overview of how you can get the most out of Sketch and Indigo Studio when used together. It will cover the following topics: Using the Sketch plugin Creating interactive prototypes with Indigo Studio Sharing a link to view the prototype on any device Collecting better feedback through usability testing Creating custom transitions Syncing new changes from Sketch Unleashing the power of screen states Using the Sketch Plugin First things first: getting the Sketch plugin is as easy as downloading it and double-clicking the .plugin file to install it in Sketch. Once this is done, it’s available alongside all the other plugins you use. When you are done creating your artboards in Sketch, use the plugin to export them as an Indigo Studio project. The export dialog will try to auto-detect the device based on your artboard dimensions. By default, the export keeps ordering and groups intact. The only exception is for symbol instances, which are merged. Clicking export will generate an Indigo Studio project with screens and devices ready for prototyping. Get Export to Indigo plugin for Sketch Creating interactive prototypes with Indigo Studio To start prototyping, open the exported project in Indigo Studio and start adding interactions to connect your screens to communicate the user story. Since the UI naming and groups are maintained, you can select a specific UI slice and add interactions directly. You can deep-select using the layers panel in Indigo Studio or use the special SPACE + LEFT CLICK approach to select slice. You can also use the Hotspot UI element in the Indigo Studio toolbox to define a click target. After you add the navigation link to a different screen, pick from the available screen transitions to add an effect. Indigo Studio will remember the last used transition for future interactions. You can click on the thumbnail to view the target screen and continue adding interactions. Sharing a link to view the prototype on any device Once you are done creating the prototype, go to the project home tab to review the UX flow. Select the navigation view to see how the different screens are connected. To send your prototype to reviewers, click on the SHARE PROTOTYPE option. And from the share dialog, click on GENERATE LINK TO PROTOTYPE to publish to indigodesigned.com and get a link. Send this link to your reviewers to view the prototype in any web browser or device. You need to be signed in to publish prototypes. The process is the same if you use our On-Prem Indigo server. The only difference is that the prototype is published on your private server. If you have enabled commenting on your prototypes, reviewers can add their feedback directly on the prototype, and you will be notified by email when there is activity. Learn more about collaborative review and feedback Better feedback through included usability testing While ad-hoc feedback on your prototype is great, it’s better suited for review with individuals who are familiar with the project. For external audiences, it’s better to conduct an unmoderated usability study. This will help you learn whether users were successful in using the designs and understand where they got stuck by watching video replays of the user session. You can create a new usability study after you publish the prototype or create one directly from the project home. Click the CREATE USABILITY STUDY option to set up a new study. This will set up a study on indigodesigned.com. Then click ADD TASKS on the study confirmation dialog to finish setting up the study. After specifying tasks, START THE STUDY to get it ready for participation. Click INVITE USERS to get a link that will let them take part in the study. This will guide users to the study instead of launching the prototype directly. Study results are updated in real-time when users complete the tasks. You will also get a study progress report emailed to you when participants complete the study. Learn more about usability studies with video replays Create custom screen transitions Depending on the user story you want to show, screen to screen transitions may not be what you had in mind. Especially when you want to animate only part of the screen (e.g., show an overlay sliding up from the bottom of the page). With Indigo Studio you can define preset animation effects to control how specific UI elements appear or disappear on screen. To set it up, select the UI element/group you want to animate and pick from fade, slide, flip, or pop effects in the properties editor. These effects will play as soon as the screen loads up in the prototype. But that’s not all! When you add the effects, they show up in the animation timeline. From here, you can change the start time and duration for the animation to give you greater control in staging the effects. Syncing new changes from Sketch You can continue to use Sketch as the key drawing tool for creating UI layouts, and re-export updates to your design. Assume you exported an Indigo Studio project and went on to create interactions and animations. And now you want to change the colors or text in your designs. For this, open up Sketch and make your changes. Then use the plugin to export and replace the existing Indigo Studio project. Not to worry, this will keep the changes you made in Indigo Studio and just update the visual assets. Your interactions and animation effects will remain intact. If you add new artboards to a Sketch page, you can export the selected artboards to append screens in the Indigo Studio project. Just keep the artboard names intact as the screens in Indigo studio map to the artboard names. Unleashing the power of screen states Everything explained till now assumes your prototype consists mainly of independent screens. And as you try to communicate a user story, you will realize that there are specific interactions that are better suited to a screen state. With screen states, you can trigger small changes on the UI in response to an interaction, without having to create an entire artboard/screen to show that. There is no better tool than Indigo Studio to achieve this. Let’s use an example for this to make it clearer. I’m simulating the following scenario, where clicking on one of the items in the grid will reveal a toast notification showing that the item was added. And then the toast disappears after a set amount of time. For creating a state-based interaction, here are the steps: Open up the screen and select the slice showing the toast and hide it. Select one of the image thumbnails (e.g., apple juice) and add a tap interaction to create a new state of the screen In the new state, make the toast visible again and add a slide up animation effect using the property editor. Optionally, add a new animation segment in the timeline to create a timed transition. Use the go-to option in the timeline, and select DO SOMETHING ELSE (Go back). It’s a lot a faster in practice. See the following video to see how this is achieved. See a larger version of this demo (GIF) Resources To use the Sketch integration capabilities, you will need the latest version of Indigo Studio. Download the assets used in this article: Sample sketch file for Jetgo in-flight menu Get Indigo Exporter Sketch plugin Sample prototype files View live prototype Want to learn more about Indigo Studio? Indigo Studio empowers designers, developers, product managers and users to quickly and collaboratively create and test realistic prototypes – before the first line of code is written. Visit our learning library for getting started videos and help documentation. Don't have Indigo Studio yet? Download Indigo Studio Essential, which includes all the Professional features free for you to try for 30-day. After 30 days, if you do not subscribe to Indigo Studio Professional or Enterprise, you will lose access to subscription-based features, but you can continue to use Indigo Studio Essential free of charge. Compare plans to see feature not available in Indigo Studio Essential.