Prototyping video playback with Figma Make
When the team behind Figma Buzz set out to add video support, the biggest challenge wasn't the media pipeline—it was designing the playback experience. Product Designer Natasha Tenggoro needed to figure out how controls should behave when videos are layered with text, images, and other objects in a single asset canvas. With roughly two months to ship, she turned to Figma Make to build working prototypes quickly, using prompts to explore complex interaction patterns that were difficult to explain in words or mock up in traditional design tools.
Version one: Keeping single-video controls in check
The initial scope focused on one video per asset, which covers the vast majority of marketing use cases. The team knew users would often place text or logos over their video content, so tying playback controls to the center of the frame—where they might conflict with other layers—was off the table. Instead, they attached the UI to the video itself. But because users can drag videos freely around the canvas, the design had to account for partial visibility, cropping, and the possibility that controls might drift away from the media entirely.
Natasha sketched out a solution where the playback badge stays pinned near the video's top-right, fades when less than 20% of the frame is visible, and intelligently repositions itself to avoid rendering outside the parent container. The challenge was communicating this behavior to engineering. "This kind of design logic is nearly impossible to prototype directly in Figma Design, and building it in another tool would've taken hours," she says.
Instead of starting from a blank canvas, she brought in an existing Figma Design frame with the UI mocked up, then prompted Figma Make to build the interactive logic on top of it. The prototype gave engineers working code they could evaluate for scope and feasibility, turning an abstract idea into a clearly prioritized feature.
Version two: Scaling to multiple videos
Midway through development, engineers discovered that supporting multiple videos per asset was feasible within the same timeline. That changed the design problem: with a collage of videos, should users control each clip individually or preview the whole set at once? The team chose a single, unified playback control to minimize UI clutter and let users see the full creative composition play together.
This decision raised a new question about control placement. One suggestion was to put the playback UI above the frame alongside metadata, but Natasha had reservations—the tap target would be small, and it could disappear entirely when zoomed out in grid view. To make her case concrete, she built two competing prototypes in Figma Make: one with the control above the asset and another positioning it in the upper right corner of the frame.
That transparency turned what could have been a vague 'we’ll see' into a prioritized feature. It helped bridge the gap between design intent and engineering effort.“That transparency turned what could have been a vague 'we’ll see' into a prioritized feature. It helped bridge the gap between design intent and engineering effort.”
The comparison made the tradeoffs visible to the whole team, and they ultimately chose the in-frame upper-right option. For Natasha, the value wasn't just in testing her own idea—it was about demonstrating the reasoning behind the final design. "Make gives me another tool to show that my design decisions are informed, thoughtful, and grounded in reality," she says.
Option B's alternative placement, in the asset's top-right corner, proved decisive for keeping controls visible and accessible across zoom levels.
Why prototypes beat explanations
The Figma Buzz team's process is a reminder that interaction design often requires more than static mockups or detailed specs. When behavior logic is conditional—depending on element placement, zoom level, and visibility thresholds—words alone don't always get the idea across. Working prototypes let designers validate usability questions early, compare multiple approaches side by side, and hand engineers something concrete to build from. In tight timelines, that speed translates directly into better design decisions.
Nailing the playback interactions
With the controls’ placement settled, the team turned to the trickier question of behavior. How should video react to hover, selection, and clicks elsewhere on the canvas? The obvious reference points were Figma Slides and FigJam, but the team deliberately avoided importing those conventions wholesale. “We didn’t want to automatically inherit heuristics from our other products because Figma Buzz is a completely different use case,” says Natasha.
In Buzz, users often move around the canvas, selecting different frames to evaluate an entire campaign. That means a video shouldn’t stop just because its frame loses selection—the preview should keep playing even while the playback controls fade away. Natasha used Figma Make to fine-tune the details of this logic with engineering. The resulting behavior: controls appear on hover, vanish when the cursor leaves, and show a reset button once the video ends. But deselecting and reselecting an ended video flips the control back to a play state rather than restarting it.
Natasha refined these heuristics by feeding Figma Make a sequence of individual prompts, one per section, describing two side-by-side Instagram story assets. Each asset carried specific video sources, title placement, and a shared 4px-margin control in the top-right. While playing, the control expanded to a 32px-height bar with time readout and pause; when paused it showed play, and when ended, a restart icon. Playback was capped artificially at 10 seconds for the left asset and 5 seconds for the right, at which point the restart control would appear. For both, the control would hide when the pointer left the asset during playback but stay visible when paused or ended.
The prompt also specified selection rules: clicking an asset selected it, showing a blue container treatment, but selection alone would not auto-play video; clicking the canvas deselected. A video in progress would keep playing through deselection, stopping only on pause or on reaching its capped end.
The final behavior
Figma’s approach to Buzz’s video playback reflects the working patterns of marketing teams, who need to layer motion into designs and preview assets at different levels of detail. “Buzz is growing to match the reality of today’s campaigns, giving teams the ability to move at the pace of their ideas,” says Natasha.
The tool proved valuable at the refinement stage for Natasha, who says it sped up designer-developer handoff on the video interface. “I love using Make at the refinement phase, when I’m tightening details that make a design sing. It gives me a way to shape and ship those details, not just prototype them.”
