From site design to published page
A Figma Sites launch film that moves from finished browser pages through responsive editing and collaboration to a publish payoff.
Field notes / why it works
The opening shows a finished browser page before revealing its editor at 0:01.7–0:03.4, so the product outcome arrives before the feature tour. A three-width responsive comparison at 0:07–0:17, six rapid effects shots around 0:22–0:24, and longer prompt-to-result and collaboration passages at 0:37–1:05 vary the pace while showing concrete cause and effect. The publish dialog at 1:08.6 completes the design-to-web arc.
Plate 01 / The format in one breath
A polished 16:9 launch film opens on a finished site in a browser, pulls back to reveal the editor that made it, then tours responsive layouts, design controls, rich media, an assistant interaction, collaboration, and publishing. The promise is that {{PRODUCT}} takes {{STARTING_POINT}} to {{PUBLISHED_RESULT}}; the viewer sees outcomes before controls.
Why it works
- The 0:00–0:03.4 browser preview establishes a credible finished result before the 0:05.2 promise card and 0:06.6 editor reveal.
- The 0:07.4–0:16.9 responsive sequence shows the same site at three widths, making one feature legible without narration.
- The 0:22.3–0:24.1 burst of five subsecond shots energizes the middle; longer interactive passages at 0:37.8–0:48.1 and 0:49.7–1:02.7 let viewers see cause and effect.
Plate 02 / Format card
| Reference | |
|---|---|
| Platform · aspect · length | X · 16:9 · 1280×720 · 25 fps · 75.4 s |
| Pace | 36 detected shots, 35 cuts, 27.9 cuts/min; 12 in-shot changes, 37.4 picture changes/min; mean shot 2.09 s, median 1.52 s |
| Script | No reliable spoken script. The six low confidence transcript tokens are music/noise artifacts; spoken WPM is not applicable. |
| Voice | None heard or visually supported; meaning comes from the product interface and short title cards. |
| On screen | Browser mockup, editor screen, responsive site examples, cursor interactions, brief interface montages, one text title card. |
| Captions | No dialogue captions. Product UI, a large white sans headline, and tiny interface labels carry text. |
| Sound | Continuous tonal music-like bed, rough 121 BPM (inferred); no clear SFX tied to cuts; measured −10.1 LUFS, +0.3 dBFS true peak. |
| Structure | Result → promise → responsive proof → editor controls → interaction/AI → collaboration → site montage → publish. |
Pro / 13 plates + recipe
The first plates are open. The full dissection is Pro.
Get the timed shots, type and sound specs, and the runnable recipe.
Open the full blueprint- Plate 03 / The hook, frame by frame (first 3 seconds)Pro
- Plate 04 / Structure (beat sheet)Pro
- Plate 05 / Shot grammarPro
- Plate 06 / Visual style guidePro
- Plate 07 / Voice and deliveryPro
- Plate 08 / Sound designPro
- Plate 09 / PackagingPro
- Plate 10 / Script templatePro
- Plate 11 / Production planPro
- Plate 12 / PromptsPro
- Plate 13 / Edit recipePro
- Plate 14 / QA checklistPro
- Plate 15 / Make it yoursPro
- Recipe / runnable promptPro