Pumpkin Eater / Q4 2024
A Figma Timelapse Tool in 615 Lines.
Lightweight Figma automation for capturing the design process as video.
// The Build
A single-file utility (615 lines, zero external dependencies beyond the Figma API) that captures design sessions as timelapse videos. Parses a Figma URL to extract the file key, uses the Figma API to fetch the document structure, recursively flattens all visible nodes from deepest child to shallowest, and retrieves high-resolution images for each layer.
Layers render sequentially on an HTML5 Canvas with custom easing functions (linear, ease-in, ease-out, ease-in-out) and per-layer opacity fade-in. An animated cursor follows layer centers with natural ease-out motion. Exports via MediaRecorder with codec detection (VP9, VP8, WebM, MP4) and resolution options up to 4K. Settings persist in localStorage.
// outcome
Design timelapse capture in a single 615-line script. No dependencies beyond the Figma API.
615
Lines of code
1
File
0
Dependencies
auto
Frame capture
Got a similar problem? Let’s talk.