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
-
DrMissile commented
But what if you want areas that are smaller than the visible elements? Tooltips nested in the hover state blow up the hit area. Any way to mitigate this?
-
Jim Johnson commented
I've just tested this, and the previous comment is correct — padding does not carry over to prototyping mode.
-
Robert Gutke commented
I just tried it and the padding is not carried over in prototyping mode...
-
Manon commented
I'm getting tired of all the empty boxes I need to draw to be able to have a larger area that's clickable.. I see that defining you 'hit area' is in the plans, but that was over 3 years ago.. Please..?
-
Michelle Walker commented
Need this feature so bad! Otherwise people don't know where to click if there are no "hints"
-
Farhan Ahmad commented
This feature is badly required!!!!!
-
DigiLusionist commented
I would like to see drag and drop to hot spot functionality.
This link shows what I am going for:
https://xd.adobe.com/view/00c6b460-6153-4411-6daa-92c30373e62e-76f7/
-
Farhan Ahmad commented
Custom Hot-spot in Prototype mode is Highly Required as we can add this in Invision adobe should take this feature on priority or might people will opt out for Invision instead.
-
LW commented
PLEASE add the option to make custom hotspots. I made wireframes on Sketch and wanted to use Adobe XD's prototype function to link screens. Making the invisible rectangles is not ideal.
-
BP commented
I agree with the inability to draw a hotspot is not ideal, but a workaround is to create a transparent rectangle around the tap-target (if text or icon) and make it a component. That way you can attach the interaction to the whole component.
-
PJ Stephen commented
YES. Working on a prototype for a brand that uses tiny, elegant type, and it's killing the usability of the prototype. PLEASE let us pad the hot spots. I even tried adding a 30 pixel stroke around the type, and setting the stroke to 100% transparent, but it did not expand the hit area.
-
Anonymous commented
Please add this. It is helpful for those who may be transitioning (or evaluating) from the Sketch to Invision flow. I for example imported my massive Sketch files over. I have a horizontal menu in a bunch of pages that, out of convenience, shares the same text box (with just equal spaces between menu options). In Invision I would have been able to just make my own hot spots for these, but now I have to recreate the menu across a bunch of pages. Obviously I will not create such menus going forward if I knowingly plan to use XD for prototyping, but it did catch me off guard, and I can see many cases where custom hot spots would be quite desirable anyhow.
-
Anonymous commented
Please add this feature it would help to get from png page icons and any step back or forward will be helpful
-
Anonymous commented
Please ad this feature, it would greatly benefit the creativity of XD if you could make the interactive area in any shape and not limited to a rectangle. Would be great to have the option to choose between a rectangle interactive area or just the fill/outline of your custom shape. This could for example allow you to create a clickable world map, where you can click on each different country or state. The limitation of the rectangular interactive area make this option completely impossible.
-
Make sure the Fill is enabled, otherwise you'll need to select shape by it's border. By default, the Fill is off for Path objects. Hope this helps.
-
Anonymous commented
Would be great with a custom hotspot shape. Any closed vector shape should be a potential hotspot.
-
Eric commented
Please add this!
-
Cameron Sagey commented
Another thought: Have a shortcut to start a link, like W, and then once the link is started you can hit the number keys to add 10px multiples of padding. (1 = 10px, 2 = 20px, etc.)
Example Workflow:
1. Click Element 2. Hit "W" 3. Hit "2" 4. Click DestinationThat would give you a link with 20px padding, and it would faster than dragging out a wire (current system)
-
Anonymous commented
Wow, 2 years ago. . . sigh
-
Billy Mitchell commented
The prototype target tooltip window has a very small hover area. If you don't move the mouse precisely from the trigger to the target window, it auto closes. Very frustrating causing you to have to re-click many times and very precisely move the mouse to use prototyping features.