Prototype faster with re-usable custom components

Ken Rosen / Monday, January 15, 2018

Among Indigo Studio’s greatest strengths are the granularity with which you can define and design screen components and interactions, and the ability to manage them independently from other elements on your screen.

Sure, you can design at the screen level; it’s certainly quick and easy to lay out static screens and connect them with simple “click” interactions.

But you don’t have to be content with that—Indigo Studio enables you to bring screen elements to life just like in an actual app. Indigo’s built-in toolbox of common UI components come ready-made so you can quickly build lifelike, interactive prototypes, with all of the click, right-click, hover, swipe, and other interactions you’ll likely want to factor into your user experience.

In my last article, I showed you how easy it was to design such a prototype. But I stopped short of showing you how to go beyond the default toolbox components and create, save, and reuse your own custom controls and components.

Let’s do that now.

Introducing Screenparts

In Indigo Studio, when you want to re-use a component or group of components, you can convert them to what we call a “screenpart.” Screeparts can be as simple as a custom icon or button or as complex as an entire page layout. Once created, you can use your screenpart in any screen or project, and you can still define and manage interactions within the screenpart as well.

Screenparts are easy to create—just a simple, two-step process:

1) Add some elements to your screen.

2) Multiselect the elements you've added, and select the Convert To Screenpart action in the Properties Panel.

That’s it!

When you convert elements into a screenpart, Indigo creates a screenpart document and opens it in the background without leaving the screen designer, where you now have a screenpart instance. Also, Indigo adds the new screenpart to the Screenparts tab in the Toolbox. Now all the screens in your project will have this screenpart available to reuse.

With screenparts, you can create your own library of common patterns, components, and screens and dramatically speed up your prototyping.

Want to learn more? Check out the following lessons and video overview below: