How do you populate one overlay for three profiles using variables?

WHAT THIS TESTS: This question tests knowledge of Figma's local variables and advanced prototyping to build dynamic, reusable overlays without duplicating frames. The interviewer wants to see if you understand how to manage state in a prototype, specifically using variables to update content in a single overlay rather than creating redundant components for every user.

A GOOD ANSWER COVERS: First, define a string variable for the user's name and determine how to handle the avatar, such as using an instance swap property on the overlay component if the avatar is a component, or another appropriate method for image content. Second, build one overlay frame with a text layer bound to the string variable and an avatar slot configured for swapping. Third, on each profile card, create an On click interaction that first uses Set variable to assign the correct name value, then uses Open overlay targeting the same shared overlay frame. Fourth, mention that closing the overlay can optionally reset the variable to a default state to keep the prototype clean.

COMMON WRONG ANSWERS: A major red flag is suggesting three separate overlay frames or three variants of the overlay component, one per user, which defeats the purpose of the question. Another mistake is proposing to detach the overlay instance and manually edit text, showing a lack of understanding of reusability. Some candidates incorrectly assume Figma supports React-style prop drilling between components without using variables or component properties.

LIKELY FOLLOW-UPS: The interviewer might ask how you would handle the avatar if it is a raster image rather than a component instance, which could lead to discussing instance swap properties or converting images into components. They may also ask how to animate the overlay entrance, prompting a discussion of Smart Animate or simple transitions. Another follow-up is how to reset variable values when the overlay closes to prevent showing stale data on the next open.

ONE CONCRETE EXAMPLE: Imagine three profile cards for Alice, Bob, and Charlie. Create a string variable called selectedName and configure the overlay component with a text layer bound to it and an instance swap property for the avatar. Clicking Alice's card sets selectedName to Alice and swaps the avatar to Alice's component, then opens the same overlay frame. Clicking Bob does the same with Bob's data. The prototype now maintains one overlay and three lightweight Set variable actions instead of three duplicated frames.