Skip to main content

Hey everyone, I’m trying to create a heatmap feature in a custom embed that tracks where users click in Figma prototypes. I’m using Figma’s Embed Kit 2.0 and specifically listening for the MOUSE_PRESS_OR_RELEASE event. The only coordinate-related fields I see are:

  1. nearestScrollingFrameMousePosition
  2. nearestScrollingFrameOffset

The thing is, in some prototypes, nearestScrollingFrameMousePosition is properly populated, but in other prototypes, it stays null (even though I do have scrollable frames). Here’s a stripped-down version of my code

if (event.data.type === "MOUSE_PRESS_OR_RELEASE") {
const figmaEvent = event.data; // as MousePressOrReleaseMessage
const {
nearestScrollingFrameMousePosition,
nearestScrollingFrameOffset,
presentedNodeId,
handled,
} = figmaEvent.data;

let x = null;
let y = null;

// Attempt to get coordinates from the "nearestScrollingFrame"
if (nearestScrollingFrameMousePosition && nearestScrollingFrameOffset) {
x = nearestScrollingFrameMousePosition.x + nearestScrollingFrameOffset.x;
y = nearestScrollingFrameMousePosition.y + nearestScrollingFrameOffset.y;
}

// Only capture if we have valid coords
if (x !== null && y !== null) {
captureClick({ x, y, presentedNodeId, handled });
}
}


My questions:

  1. Under what conditions does nearestScrollingFrameMousePosition become null using Embed Kit 2.0?
  2. Is there a recommended fallback or another property I should be looking at for stable click positions?
  3. For creating a consistent heatmap, how do you normally handle scrolling offsets in different prototypes? (Mobile Landscape, Desktop etc)

Any guidance would be much appreciated. I’m sure I’m doing something silly or missing some critical setup, but I haven’t found a definitive explanation in the docs or older threads. Thanks in advance for any help you can offer!

Be the first to reply!

Reply