Creating & Customizing Prototype Screenparts with Indigo Studio

In this video we're going to take a look at Screenparts - one of Indigo Studio's newer features that lets you reuse design elements across screens in your project. Specifically, you'll learn how to create and customize those Screenparts. Let's take a look!

If you have played with Indigo Studio in the past, you're already familiar with screens and storyboards. Now, we have a new feature: screenparts. Screenparts let you reuse parts of your design across screens and even projects. In this video I’ll show how you can use screenparts to create a navigation for a website, and reuse it across different screens. Let’s view the Project Home, where I have three screens pre-created.

One of the screens has a navigation defined, while the other two screens don't. Let's open the product screen, which is the first screen with navigation. As you can see, this navigation has already been designed but has no interactions available. Ideally when somebody clicks on the product link, we want them to come to the product screen which is what you're seeing right now. They could click on the blog link to go to blog. Click “Team”, to go to the team , and so on.

Let me open another screen – for example, blog. As you can see, the screen is designed, but it has no navigation. What I want is to have the same navigation available on different screens. So to reuse this navigation I'm going to select all the UI elements you see in the header area and convert it into a screenpart, using the convert to screenpart action.

When you do this, you’ll see two things: your navigation has a different selection box around it, and we select a new tab in your toolbox, called Screenparts. This tab shows the elements we’ve created as screenparts. To reuse it across all these screens, all I need to do is just copy this screenpart instance, go to the blog screen, and using the in place copy-paste feature, paste it in. Now, I have created the screenpart but it's not interactive. When I click on the product link, it doesn't go to the product screen or the blog. Let’s change that.

When you created the screenpart, not only does it get added to the screenpart tab in the toolbox, it also opens it up in the background. Here, I can quickly add navigation interactions. From the product link I say, add an interaction, and when the user taps or clicks “product”, navigate to screen in project and I'll just pick product.

I can do the same thing for the blog. Let’s “add an interaction”. When the user taps or clicks blog, navigate to screen in project, blog. Let's run this prototype. As you can see, there's a highlight around the product link, but when I go to the blog screen, there is no highlight. What I would really like is for this highlight to show up on “blog”. To do this I just need to go to the blog screen, and edit this particular screenpart to customize it for this screen.

You can either select "edit screenpart instance," or  double click. This gets me into the screenpart editing mode. In this mode, I'm going to select the highlight rectangle and move it behind the blog link. Then you can use the breadcrumb to exit out of it or double click in the gray area to exit. Now let’s run the prototype – and just like that, the product and the blog screen are showing the highlights accordingly.

Another advantage of making that navigation a screenpart is that I can change it once and automatically update it everywhere else. For example, I can go in here, select this logo, and change it to something else. Then when I go back to my product screen, the change has already been made.

To experience screenparts for yourself, get a free 30-day trial of Indigo Studio by clicking the banner below!