×

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

Please sign in to leave a comment.

  • Avatar
    Caitlin Cambron

    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
  • Avatar
    Shaina Torgerson

    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