I’m evaluating which tool should I use to design my first mobile app. I know some very basic programming. If you don’t mind, I have two questions. I need a button (the name of a folder), that when touched on the plus sign it expands to show the list of the folders or files inside that folder. Now, if there is a folder inside that first folder, I would like it to do the same to show its contents too, so you can expand and collapse this folders/buttons touching the plus or minus sign. Do Indigo allow this? And the second question is. If this is possible, can you create a "set" with this folder/sub folder/files, and carry this "set" to different pages, with the functionality included? If not, do you have a suggestion of what prototyping tool may be able to do this?
Thanks!
Hi, Javier.
If all you need two scrollable areas stacked one on top of the other, you can use containers (find it under LAYOUT in the UI Elements toolbox)
[ Container 1 ]
------------------
[ Container 2 ]
When you double click to edit each container, you will have the option to make the container's canvas bigger than its bounds. Simple drag the bottom right corner, and this would automatically create scrollbars when you exit the container edit mode. We describe this feature in "Scrolling in Containers" section in our product blog.
Let us know if you need more clarification.
Thanks Diego! your information was very useful.
Another question. Can you have two panels or areas in the screen, and scroll on them independently? Like half the screen with a list of messages, and the other half with a different list?
Thanks again.
Javier
Hello Javier,
You can achieve that with Indigo simply by using the Tree control placed in the Layout category inside the toolbox. That control supports adding multiple nested levels of items. You can collapse and expand items that have children when previewing the prototype. If that’s enough it’s probably the best choice as it’s an out of the box solution for your scenario.
The other alternative is to build that interaction yourself which will give you total control in terms of the visuals and behavior. You can check the basics of adding interactions to an Indigo prototype here.
Once you have, let’s say, a button or a plus icon you can add a tap interaction that goes to a new state. In the new state you can change the screen at will, even by adding new controls to represent the contents of that folder. Then you can add another tap interaction to any of those new controls to simulate the opening of a nested element and so on. Note that interactions can be turn into “toggles” so they not only expand but also collapse on second click, by checking the checkbox “Toggle back When User Does Same Action Again”.
Related to the reuse question I suggest you to take a look at this topic.
In short, Screenparts are user created controls that can be included in screens as if they were a regular control like a button or tree. This means that if you include your folder design (the tree or the one with the custom interactions) inside a Screenpart then you will be able to use it as many times as you need. Note also that if at some point you update the Screenpart source all the screens that includes it will automatically reflect the change.
Hope this helps.
Best regards,DiegoIndigo Studio Team