Request details

Create separate, custom hotspot areas (e.g. larger than the visible shapes)

Now you can connect layers but what if you want to connect a hit area larger than a layer? Now you can work around this by drawing a rectangle behind the area and linking that up, but it would be great to be able to draw actual hotspots.

140 votes
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)

    We’ll send you updates on this idea

    Johan RonsseJohan Ronsse shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    26 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...
      • Cody KingCody King commented  ·   ·  Flag as inappropriate

        Have the ability to create a hot spot that I can see in design and prototype mode but is invisible to the user.

      • LyricLyric commented  ·   ·  Flag as inappropriate

        When I import .png files, which made by other design tool (axure, sketch...), I hope have a hotspot tool in prototype mode, so i don't need to drag a invisible rectangle to pretend it is a hotspot area.

      • Steven JennerSteven Jenner commented  ·   ·  Flag as inappropriate

        This is not a request for creating custom shapes / separate objects to enable prototyping. I would like a property added to an object that allows me to add padding around an object, so that the selectable area is larger than the object it relates to.

        This could come in two different flavors (combined into one implementation):
        1) Classic padding - add it equally around object
        2) Morphable - like classic, but allows me grab the handles / path points and redefine that space manually

      • Chelsea GuerreraChelsea Guerrera commented  ·   ·  Flag as inappropriate

        While completing the start up camping tutorial, I ran into some issues regarding touch targets on my mobile device. Currently, in prototype mode you are only able to create interactions by selecting a specific element on your artboard and linking that to another artboard (which is what is expected). Where this becomes an issue is in scenarios where you have multiple touch targets "layered" on top of one another.

        For example, on the artboard "Blog", you have a touch target associated with the arrow (telling it to go back to the previous screen) and a touch target associated with the background hero image behind it (telling it to go to the ”Gear Guide" artboard). When a user goes into preview mode and went to tap on the arrow to go back to the previous screen, the touch target was too small and specific to the arrow vector that my finger was actually tapping the background image behind it- sending me to the incorrect screen. It wasn't until I tried to tap the arrow several times, where it finally registered to go back.

        I did see a previous request for this improvement regarding implementing something similar to what InVision does - creating customizable touch targets by drawing rectangles but I don’t necessarily think it has to be done that way because 1) it does get tedious for a designer to have to create the rectangles themselves & 2) it does not guarantee that you will be able to cover every part of the element especially in a scenario where you have multiple elements layered on top of each other (see attached screenshot).

        A suggestion would be to instead be provide the ability to set a custom pixel hot spot/touch radius to elements on your artboard but also having an option such as “auto” where it would apply to an entire element (which works better for say the background image on “Blog” artboard). Once you have assigned the touch radiuses, it would be great to have some type of way to exclude the touch radiuses applied to the elements in the foreground from what is applied to the background (see attached screenshot).

      • Thomas HallgrenThomas Hallgren commented  ·   ·  Flag as inappropriate

        Target link popup feature request. Idea for setting the touchable padding around item in order to make it easier to tap with finger on mobile device and on browser. Note, text and small icons some times hard to click/tap.

        http://adobe.ly/2cRxqw2

      • DenisDenis commented  ·   ·  Flag as inappropriate

        A lot of times when I wire together screens in prototype mode I realize that there is no suitable object yet that can act as tap target. Therefor it would be cool to be able to draw invisible boxes with the without having to go back and forth between design and prototype.

      • Darren SchnareDarren Schnare commented  ·   ·  Flag as inappropriate

        I honestly think the easiest approach would be to, in addition to elements created in Design mode being capable of being a hotspot (i.e. just how it is now), having the ability to draw a hotspot via a rectangle, ellipse or shape tool while in the Prototype mode.

        Hotspots created while in Prototype mode should behave just like elements created while in Design mode; hotspots can be free floating or contained within the bounds of an Artboard. And just like elements contained within an Artboard, hotspots contained within an Artboard will move/stay with the Artboard. This of course will make a bit more work when making changes to a layout in Design mode because now you'd have to jump to Prototype mode and move the hotspots around as well, albeit only the hotspots created in Prototype mode would need to be moved. This does make it really clear why hotspots are not currently separate from the elements created in Design mode though, however I think the benefit of having the ability to create separate hotspots outweighs the overhead faced when making layout changes.

      • Kawanaka YuyaKawanaka Yuya commented  ·   ·  Flag as inappropriate

        プロトタイプモードで、タップ可能領域を新たに指定するためだけのツールが欲しいです。

        Illustratorなどで画面デザインを作ったあと、その画像を読み込んでXDでプロトタイプをつくる場合、
        XD上でタップ可能エリアをつくるためには、矩形ツールでボックスをつくらなければいけません。
        XDのボックスは、塗りと線を透明にすると、どこにオブジェクトがあるかわからなくなってしまいます。(逆に、塗りや線を追加すると、画面デザインの内容に影響を与えてしまいます。)

        よろしくお願いいたします

      • drimlikedrimlike commented  ·   ·  Flag as inappropriate

        Love this idea: "One additional feature within Layers which I personally would fine very useful, the ability to "mark" a layer as hotspot-only, meaning that any elements placed on that layer will be interactive in the Prototype as planned, but be invisible. "

      • Steve HolmesSteve Holmes commented  ·   ·  Flag as inappropriate

        I note that you're in the process of Layers, which is awesome (and needed).
        One additional feature within Layers which I personally would fine very useful, the ability to "mark" a layer as hotspot-only, meaning that any elements placed on that layer will be interactive in the Prototype as planned, but be invisible.
        Right now, if I'm working with an image-only design and draw hot spot shapes over everything for the interaction, creating them then making them semi-opaque to position correctly is the first step, then linking them, then selecting them all again and making them fully transparent so they're not visible in the Prototype.
        Having a layer option, such as the Print option in Illustrator which, when turned off, keeps the layer visible in AI but not on export, would be very useful in this scenario. It would also allow us to show/hide the hotspots easily enough.

      • PaulPaul commented  ·   ·  Flag as inappropriate

        I recently needed to add various click area / invisible buttons over the top of a text block with several links within it, this is not possible yet.
        The site is typography based so this would be really handy, i can imagine it being handy for many other prototypes, bots, image graphic links, very fast prototyping with screen grabs and so on.

      • SuzanneSuzanne commented  ·   ·  Flag as inappropriate

        Being forced to draw a separate object or bring in another image slows down my process. It makes me wonder what the product strategy is: adding so many design features, and so little prototyping control. I use Illustrator or Photoshop to design in, I don't really need a mini-Illustrator in here. I'm concerned about feature bloat.

      • EdmundasEdmundas commented  ·   ·  Flag as inappropriate

        It would be quite good to have ability to select active region of a button. For example I have an icon "search". In prototype I can only make that icon active as a button. But that is not how apps work, because real app buttons have active region. It could be possible to draw an active region over an element and then link it to another artboard.

      • ikelleighikelleigh commented  ·   ·  Flag as inappropriate

        It took me a little while to understand that I need to draw rectangles (no fill or stroke) to use as hotspots in the Prototype mode. It would be great if there was a Hotspot tool you could use while in Prototype mode and link them as you go. A simple fly-out with rectangle or circle shape hotspots to define without having to create shapes then remove the fills/strokes all of the time.

        And also when clicking on one of these hotspots, we can decide if the interaction is a hover or a click. Useful for showing Tooltip style interactions.

      • Siska HinesSiska Hines commented  ·   ·  Flag as inappropriate

        Yes! I came to this page just to vote for this! (Apart from adding Device Preview of course). We need hints of clickable area on the preview. If not, user will be blindly clicking/hovering try to find clickable areas. Please add this feature!!

      • byronbyron commented  ·   ·  Flag as inappropriate

        really really want this feature - many of our apps use lots of white space, many of our UI elements for navigation between views are small icons, but in development the tap target is quite a bit larger. the result is that when prototyping, it feels like you get very tiny tap targets for everything...

      ← Previous 1

      Feedback and Knowledge Base