How would you prototype a shared currently playing state in Figma?

What's really being asked

This question probes whether you understand Figma variables and advanced prototyping as a reactive state layer rather than just a styling convenience. Seniors are expected to architect prototypes that behave like production apps, which means avoiding duplication and keeping a single source of truth for data that spans multiple views or components.

A GOOD ANSWER COVERS four things in order. First, variable choice: use a string variable for the currently playing track ID rather than a boolean, because a boolean cannot distinguish between track A and track B. Second, component binding: turn the track list row and the mini-player into interactive components whose variant states or layer visibility are driven by that string variable through conditional interactions. Third, interaction wiring: set the track list row so that tapping it updates the global string variable to its own track ID, and set the mini-player play-pause button to toggle a separate boolean if needed, while keeping the track identity in the shared string. Fourth, persistence: place the mini-player as a persistent component on a parent frame or use it across multiple frames so the variable binding remains alive during navigation, ensuring the player bar does not reset when the user scrolls or changes screens.

The mistakes people make

Duplicating state by creating one boolean variable per frame for isPlaying, which forces manual maintenance and breaks sync. Using overlay transitions to simulate the mini-player appearing on every screen, which destroys context and makes seek or pause interactions impossible across views. Proposing local component variables without explaining how they propagate upward, since local variables inside a track row cannot communicate with a mini-player in another frame unless bound to a shared collection. Suggesting auto-layout or simple component variants alone without mentioning variable-driven conditional logic.

What usually comes next

How would you handle a queue or playlist order? Would you use a number variable for progress or a separate string for album art? How do you prevent every track row from showing the active state at once if they all read the same variable? The interviewer may also ask how you would structure this at scale with multiple collections or modes.

A concrete example

Imagine a library screen with ten track rows. Each row component has a variant property called Active State that is bound to the global variable CurrentTrackID. When CurrentTrackID equals the row's unique track slug, the row switches to the active variant with a highlight and a pause icon. The mini-player at the bottom reads the same CurrentTrackID to display the matching album cover and title. Tapping a different row updates CurrentTrackID, so the previously active row reverts to default and the mini-player swaps artwork instantly, all without leaving the frame.