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.
-
Screen_Shot_2017-09-12_at_1.26.29_PM.png 17 KB -
Screen_Shot_2017-09-12_at_1.22.50_PM.png 17 KB -
HotspotPadding—Drag.png 84 KB -
HotspotPadding—20px.png 84 KB -
HotspotPadding—0.png 79 KB -
Screen_Shot_2016-10-26_at_1.06.14_PM.png 375 KB -
Screen_Shot_2016-10-26_at_12.12.43_PM.png 379 KB -
XD-DefineLinkPadding_ThomasHallgren_10a.png 45 KB -
XD-DefineLinkPadding_ThomasHallgren_06b.png 42 KB -
Screenshot_2016-05-24_17.38.28.png 118 KB
Johan Ronsse
shared this idea
45 comments
-
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.
-
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.
