Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


InVision ambassador ambassador
Matt Matt

Nested prototypes

Hi, is there a way to nest prototyped items? I'll try to explain what I'm looking to achieve:

I have a page with a number of selectable items. I want the state of those items to update as they are clicked to illustrate an active state, without linking to a different dartboard. 

 

0

comments

sort by


Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador
Comment actions Permalink

Hi Matt,

Thanks for reaching out here in Community with your questions about how to achieve this in Studio. To confirm, are you looking for nested artboards or nested components?

Studio uses a convention we call components. Components are a close approximate to the symbol conventions found in other applications. Components in their final form will honor a broad, scalable hierarchy that allow designers to quickly build up, mix, and match components intelligently across their designs.

To get a better understanding of how to set up Studio projects, I suggest checking out our Studio Getting Started Guide as well as the Canvas, Layers and Shapes section of our Studio Knowledge Base.

Hope this information helps! Please let us know if you have any follow up questions after reviewing this information.

Best,

Shaina

0

Caitlin Cambron
InVision ambassador Caitlin Cambron , ambassador Edited
Comment actions Permalink

Hi Matt! The articles Shaina linked are a great way to learn about components!

Creating the effect you're going for depends on the program you're using. I'll walk through how I would approach it. This way is program-agnostic, so it will work regardless of if you're using Sketch, Studio, or XD. It does require linking to another artboard - if the approach below doesn't work for you be sure to respond and we'll try another way.

First, create all artboards in every state (links unvisited, active, and visited). Then, link them together in the order that makes the most sense for your prototype. Below is an example of how I created my artboards, link states, and how I linked them together.

 

Here is the prototype link if you want to play around with this design.

Let us know if there's anything else we can do!

Caitlin

1

Matt
InVision ambassador Matt , ambassador
Comment actions Permalink

Hi Shaina and Caitlin,

Thanks for your replies.

I'm A complete novice with Invision, so my terminology may be off!

However, Caitlin is definitely in the right ballpark in terms of what I want to achieve as an end result. But, to me this does feel a little like a work-around. The way the example is built means that I have to click the buttons in a specific order to show the active state. For example, from the first screen, I can't select item two before I've selected item one. I can recreate this same behaviour in the application I'm using now, but this doesn't offer me the scale I require to build true-to-life clickable prototypes that can be tested by users who don't have prior knowledge of where to click, or in which order to click.

What I am looking for is the ability to nest actions within a singular artboard in order to overcome the workaround. In practise, using your 'All Link' project as the example, I'd like users to be presented with the first screen, then be able to toggle on an off any of the 'items' in any order. Effectively, they wouldn't move away from the first artboard, but instead the state of the each item listed would be updated to show the active state.

I'm looking to switch to a more comprehensive application in order to allow this kind of prototype to be built. Can you confirm whether this behaviour is possible within Invision? And if so, how?

Thanks,

Matt

 

0

Caitlin Cambron
InVision ambassador Caitlin Cambron , ambassador
Comment actions Permalink

Hi Matt! Your terminology is spot-on :)

The behavior you want is possible, however it's time-consuming to create in a prototype. I would create each possible combination of buttons clicked, build out screens for all of those, then link them together. This means you'll have duplicate screens in some cases but they would be part of separate workflows in order to accommodate all options.

If I'm understanding you correctly, the feature you want doesn't exist currently. There isn't a faster way or nested way to create this experience and it will still feel like a prototype, not a coded product. I will let our Community Moderator know that you'd like to request this feature, so look out for a message from her.

Let me know if we can provide any clarifications or answer additional questions. Best of luck with your prototype!

Caitlin

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador
Comment actions Permalink

Hi Matt,

Thanks for following up and working with our ambassador, Caitlin, on this one! I appreciate you taking the time to explain in detail what it is you're looking for.

After looking into our currently tracked feature requests, it does appear as if we're tracking a potential feature that should cover what you're trying to achieve - to allow for Components to have multiple states. At this point, I would like to open a ticket on your behalf to track your interest for this feature.

Please keep an eye out for an email confirming that we've formally tracked your feedback and use case regarding this feature. If there's anything else you'd like me to share with our Product and Support teams, please don't hesitate to reach out.

Have a wonderful day,

Shaina

0

join the conversation

to comment, sign up or sign in.