Releasing Update 5 for Indigo Studio (v2)

In this update we released a much requested feature to support scrolling inside containers. But we did not stop there. We also added more project management features for you to organize the files in your project from within Indigo Studio.

Managing files inside your Project

In prior versions, the project folder structure could not be edited when viewing the project home/gallery. It was not all bad because we did allow users to create sub-folders when saving their new designs.

With this update, we added functionality for you to create/move/delete folders from project home. If you work anything like us in the Indigo Studio team, we are constantly iterating on our prototypes/designs. Furthermore, we tend to organize our work according to sprints. So it's quite handy that we can quickly create folders in our project to organize design deliverables into folders and name them after sprints. And just as easily drag and drop screens to move them between folders when our release plans change. Naturally, you can also have nested folders.

The best part about it is that we dynamically update the navigation links.What this means is that you can have a prototype that has screens placed in different folders. Indigo Studio takes care of this even when you rename folders and hunts down any navigation interactions that need updating.

Editing Containers as Groups

Containers helps users quickly organize UI elements into visual blocks. We made some changes to how containers are edited, which in a way is related to another feature we released today--scrolling in container.

Long story short, containers are now edited as groups. As in, double clicking a container or hitting the enter on a selected container now enters edit mode. The biggest peace of mind this offers is that anything added in this mode will most definitely be added to the container. This can be especially useful when adding UI elements that are bigger than the container bounds. We also show a breadcrumb navigation that helps with editing nested containers.

You must be wondering how it affects the ease of dragging and dropping elements inside the container, like before. No worries; we still support that but with a twist. When you try to drag a UI element into the container (when not in edit mode), you will see a drop invitation based on your mouse cursor position. Just hold down the SPACE key to add it to the container.

A positive side-effect of this approach is that you can use the container to now clip large images. Simply add a large image to a smaller container, and voila, clipped image. Reposition the image as you please. Mind you, we are not saying image cropping is not on to-do list. Just that you can use containers to achieve the same end goal for now.

Special Select for Nested Elements

We mentioned the use of SPACE key modifier to add elements to the container. The SPACE key can be used in concert with your mouse cursor to do a Special Select. Special because with this approach you can select any element that's nested deep. You will find it useful to quickly change properties of some elements without wanting to enter a full editing mode. This can also be used to edit elements inside groups. To move elements out of containers, Space + Select a nested element and drag it out to move it out.

Scrolling in Containers

We had at least two goals when we approached this design task. As much as possible we wanted to support direct manipulation as opposed to adding more properties and options to achieve this. And secondly, we wanted to offer a good design time experience so that you can see what content is viewable and what's below the container fold. We drew our inspiration from how we tackled scrolling for the screen itself where we introduced the concept of canvas and viewport. To get scrolling on screens, our approach is to resize the canvas using the adorner on the bottom right.

Scrolling in containers works the same way! When in edit mode of the container, grab the corner and resize it. This immediately shows you the container viewport that matches the physical dimensions of the container itself, and the container-canvas. When you exit the edit mode, voila, scrollbars! If you want to set a specific scroll position, while in the edit mode, move/position the visible area to what you want to show.

Other Visual Tweaks

• Project Home Layout We moved the date information to a different position so that the screen names don't get clipped, especially for longer ones

• Alt+ Click Search Suggestions We felt the icons shown in the search suggestions was bit smaller than preferred. We bumped the size up to match the sizes in the UI elements area of the toolbox. Hope that helps.

We are working hard towards another grand version of Indigo Studio, and we are confident you are going to be quite pleased! Something to do with design reuse... shhh! May be I said too much.

How to Get This update?

Here's how to update the version of Indigo Studio installed on your machine:

• If you have the option to automatically check for updates on startup checked, you should see a dialog box pop up when you launch Indigo. Simply click update, and Indigo Studio will do the rest. This is the easier approach.
• If for some reason you chose not to automatically check for updates, go to MENU > HELP & ABOUT and use the "CHECK FOR UPDATES" option.

About Indigo Studio for Interaction Prototyping

Don't have Indigo Studio? Download a free 30-day trial which will let you try all of the prototyping goodness.

Download Indigo Studio

Looking to suggest improvements and new ideas for Indigo Studio?

Submit a new idea

If for some reason you are having trouble with Indigo Studio, check out our help topics, forums or contact support.

Get Support

Follow us on Twitter @indigodesigned