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


InVision ambassador ambassador
Felipe Ribeiro Felipe Ribeiro

Sketch/Craft prototype: Overlay arbitrary positioning

I made a prototype using Adobe XT. Natively it allows to position the overlay liked artboard, so I can create dropdown effect. Is it possible to do something similar using Sketch/Craft or I need to create an artboard bigger and align it to the options provided (Top/Left, Top/Right, Bottom/Left, etc.)?

0

comments

sort by


Caitlin Cambron
InVision ambassador Caitlin Cambron , ambassador

Hi Felipe!

Yes, this is possible using Sketch and Craft. Check out this article for the basics (go to the Link Types section, then Link as Overlay). Using this link, you can only create overlays that are aligned using preset options (Top/Left, Top/Right, Bottom/Left, etc.).

For overlay with custom alignment as you mentioned, you will have to follow a different process. I actually just did this for a project I'm working on. Here are the steps I followed.

  1. Choose the originating artboard, including the overlay, and copy it. On the original artboard delete the overlay. Now you should have 2 identical artboards - one with an overlay and one without. 

Note: I suggest placing everything in the copies artboard in a group ("Everything else"), then the overlay group on top of that. This will help with linking.

       2. From the original artboard, select the layer or group that will trigger the overlay and press C.

       3. Click inside the destination artboard to bring up the link modal.

       4. Select Link to a Screen from the first drop down menu. Click Add Link to save.

       5. On the copied artboard select the "Everything else" group, press C, and link it to "Link Back/Close" at the top of your screen.

       6. Change additional options, as desired. For example, I chose "Maintain scroll position after click" on both transitions do create the effect of stay on the same page.

       7. Click Add Link each time to save!

Remember to sync to your InVision Prototype :) Hope this helps!

Caitlin

 

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador

Thanks so much for posting that detailed workaround, Caitlin!

I would like our Support team to take a closer look at this desired behavior, Felipe. I will be opening a ticket on your behalf with our Support team so that they can link you up with the matching feature request. Please look for a message soon from our Support team, potentially requesting more information.

Thanks for your patience,

Shaina

0

join the conversation

to comment, sign up or sign in.