Version Control: How Figma Make Helped Us Figure Out Video Playback | Figma Blog
Figma’s team used Figma Make to rapidly prototype video playback for Figma Buzz under a two-month deadline. The tool helped translate complex interaction ideas into working code, clarify feasibility with engineers, and expose edge cases before implementation. Although the project began with support for one video, technical progress expanded the scope to multiple videos and required revisiting the original playback design. ## The Challenge of Video Playback - Figma Buzz lets teams create branded assets containing video, text, images, and other layered elements. - Playback controls could not simply be placed in the center of the canvas because they might obscure important design content. - The team needed to account for videos being: - Moved within or outside their parent frame - Partially visible or completely off-canvas - Enlarged and cropped - Used alongside other assets in grid view - Designer Natasha Tenggoro used Figma Make because the interaction logic was difficult to communicate with static Figma designs and would have taken too long to build in another tool. ## Version One: Single-Video Playback - The initial release focused on the common case: assets containing one video. - Natasha imported an existing Figma Design frame and prompted Figma Make to create: - A draggable media frame - Media that could extend beyond a fixed parent without clipping - Reduced opacity for media outside the parent - Playback controls pinned to the media’s top-right corner - Automatic repositioning of controls when they would leave the parent frame - Control fading when less than 20% of the video was visible - The working prototype gave engineers a concrete demonstration of the intended behavior. - This helped establish technical feasibility, clarify scope, and turn an uncertain idea into a prioritized feature. ## Expanding to Multiple Videos - Further engineering investigation showed that multiple videos could potentially be supported within the original release timeline. - The expanded capability forced the team to reconsider earlier decisions about playback controls. - For a collage containing several videos, the team chose a single overall playback control rather than separate controls for each video. - This approach reduced interface clutter, avoided covering design elements, and provided a more unified preview experience. ## Practical Conclusion Figma Make served as a bridge between design intent and engineering implementation, enabling fast exploration of complex motion and interaction behavior. The experience suggests that functional prototypes are especially valuable when requirements involve dynamic positioning, visibility rules, and changing technical scope.
Read original(opens in new tab)