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.
With the launch of the Padding feature in XD 26, you can add padding to a group. This controls the background of the group, or if it has no background it adds safe-space to the object.
That safe-space translates over as a hotspot in prototype mode, enabling you to interact with areas that are larger than the visible shape.
Learn more about the new padding feature here: https://helpx.adobe.com/xd/help/set-fixed-padding-for-components-groups.html
-
Nir commented
anyone knows of a way to create a prototype with a fast way to create all options on the menu?
-
Nir commented
Is it possible to make a hot spot in the prototype so it will repeat itself in all screen?
like you have in Invision app for example -
Joan commented
have they added the hotspots yet?
-
Cody King commented
When in prototype mode, give me the ability to draw a hotspot so that I can connect text or other shapes to the size i want, rather than the entire object. It is particularly painful with text: 1 text input area is clickable but there maybe a need to create multiple clickable areas within that text, and it is not a fun experience to manage this text within a bunch of individual text areas. Also, the hit states for text kinda sucks, so i need to be able to define a wider area.
-
Cameron Sagey commented
I forgot to add the little draggy dots on the hotspot on the "HotspotPadding--Drag" version. Just pretend they're there.
-
Cameron Sagey commented
Add a "padding" field to the popup in Prototype mode. This would extend the hotspot beyond the bounding box of the element. You could even make the hotspot resizable like a normal shape would be, via dragging the hotspot's bounding box. Doing so would calculate padding values in the popup. So it could be as funky as top: 27, right: 20, bottom: 0, left: 19.
Padding is useful in case the designer changes the element after creating the hotspot - it should still match the outer dimensions of the element, plus whatever padding you've specified. This avoids having to create a 2nd element in the design view (Craft style), and avoids having to manually create hotspots and update them every time the design changes (InVision style).
-
Arvid commented
well, I dont know about you, but I just create a rectangle with no stroke and no fill. That does the job for me.
-
Cody King commented
Have the ability to create a hot spot that I can see in design and prototype mode but is invisible to the user.
-
Lyric commented
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 Jenner commented
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 Guerrera commented
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 Hallgren commented
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.
-
Denis commented
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 Schnare commented
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 Yuya commented
プロトタイプモードで、タップ可能領域を新たに指定するためだけのツールが欲しいです。
Illustratorなどで画面デザインを作ったあと、その画像を読み込んでXDでプロトタイプをつくる場合、
XD上でタップ可能エリアをつくるためには、矩形ツールでボックスをつくらなければいけません。
XDのボックスは、塗りと線を透明にすると、どこにオブジェクトがあるかわからなくなってしまいます。(逆に、塗りや線を追加すると、画面デザインの内容に影響を与えてしまいます。)よろしくお願いいたします
-
drimlike commented
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 Holmes commented
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. -
Paul commented
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. -
Suzanne commented
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.
-
Edmundas commented
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.