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
AdminCorey Lucier (Adobe) (Admin, Adobe) commented
Ah but you should not have to draw any rectangles at all (unless you have a flat image). You can simply click on a design element or group to serve as the hit area.
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.
Pat Lang commented
Voting this up!
Siska Hines commented
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!!
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...
Manuel Ryan Espinosa commented
This is a must. ASAP. I concur.
It is a must have for sure.
Sanjeev Arora commented
A must feature
It may be nice to have a hotspot tool in "prototype" mode with the added value of having a visual reference for all interactive regions instead of having to create invisible shapes in "design" mode as a workaround.
This will also avoid creating clutter in "design" mode and would only be visible in "prototype" mode (e.g. InVision) in helping to keeping things organized.
IMO "design" mode should be focused on designing, "prototype" mode should be for creating interactions.
Yes, this will also help to prototype existing jpgs of UI designs.
1. Provide visual clue for clickable area in Preview mode (just like inVision)
2. Able to add click area for links in Prototype mode ("fat-touch" area)
This is a must. I do not want to have to draw a separate hit area.