Narrative Logger

Narrative Logger is a canvas plugin I built for a research workshop on how game designers distribute clues across an existing story structure. While designers work, it records every edit, cuts the session into slices, and pairs each slice with a snapshot of the canvas, so researchers can replay the design process step by step.

I built it as a Figma plugin and a Miro app so participants could work in the canvas they already use.

My role

I designed and built the tool end to end: what to capture, the capture logic for both platforms, the participant-facing panel, the export format, deployment, and the setup guide for workshop participants.

A finished clue map hides the decisions that produced it. Interviews afterward rely on memory, and screen recordings are hours of footage nobody can query. The research needed process data that was structured (every create, edit and delete, tied to a node), segmented into meaningful phases, visual, and low-friction enough that designers would work the way they normally do.

No off-the-shelf tool did this inside the canvases designers already use, so I built one.

Each participant starts from a given narrative spine and grows it into a clue tree: main beats, sub-clues, solid links for causal flow and dashed links for hints. The logger slices the session two ways: automatically on a timer or after a pause, so nothing goes unrecorded, and manually when the designer presses Record this node at a moment they consider a decision point.

The manual slices matter most to the research: they show where designers themselves think the decisions are. In Figma, each closed segment also opens an optional prompt: What narrative decision were you making here?

Figma and Miro expose very different APIs, so each version is written for what its platform can observe, and both export the same kind of package.

In Figma, the plugin listens to the live event stream (document, selection and page changes) and sorts each change into create, delete, rename, text edit or selection. It ignores collaborators' remote edits, records which frame the designer is focused on and where their attention moved from, and exports the working frame as a snapshot at the start and end of each segment.

In Miro, the app keeps a map of every board item and diffs the board against it at each slice. That yields exact create, update and delete records for each node and connector, with their text. The Miro SDK can't render the board as an image, so I used the browser's Screen Capture API: the participant shares the tab once, and each slice saves a frame of the real canvas.

Smaller decisions kept the data clean: event counting pauses while a snapshot renders, a denied screen share writes a placeholder instead of breaking the sequence, and files are flat and zero-padded (01_Auto_operations.json) so they sort in order.

Participants are designers, not developers. I shipped the Miro app as a prebuilt bundle that runs with one command, wrote a step-by-step setup guide for Mac and Windows, and kept the panel to three actions: link the screen, record a node, export. A live status line shows the slice countdown and operation count, so people can see it's working without thinking about it. After export, the app releases the screen share and resets itself for the next session.

The diffs show decisions a final board erases.

In one sample session, a single slice holds one structural move: the designer deleted sub-clue 5.1 and its link, pruning a branch. In the next, they went back to node 3 and added a new sub-clue, 3.2. Because every record carries a stable item id, researchers can follow a node across its whole life, separate structural work from text refinement, and line each log up against its screenshot.

{ "time": "2026-05-26T01:04:00.310Z", "action": "DELETE",
  "itemType": "shape", "content": "<p>5.1</p>" }

From logs to a replayable story.

Next I'd like to merge both exports into one shared trace format and build a replay viewer that steps through slices, with each screenshot beside its diff and changed nodes highlighted.