Improving Performance with Incremental Frame Loading | Figma Blog (opens in new tab)

Figma redesigned its prototype player because loading entire documents caused slow startup times, high memory use, and frequent mobile crashes. Its incremental frame loading strategy loads only the currently visible frame and nearby reachable frames, then fetches more as users navigate. This improves time to interactive while reducing the amount of prototype data held in memory.

Problems with Full-Document Loading

• The original system loaded the entire prototype document into memory before displaying the starting screen.
• As Figma files grew to include more pages, design systems, and component variants, prototypes became substantially larger.
• Mobile devices, particularly iPhones, often exceeded their memory limits, causing the operating system to terminate Figma.
• Large prototypes could take minutes to load, creating both performance and stability problems.

Loading Frames Incrementally

• Figma defined “incremental frame loading” as loading only the prototype content needed at a given moment.
• The initial load includes:
  • The first frame.
  • Frames immediately reachable through prototype interactions.
• When a user navigates to another frame, Figma loads that frame’s adjacent destinations.
• Previously loaded frames remain available so users can navigate backward without reloading them.
• This approach reduces both startup time and peak memory consumption.

Adapting Multiplayer Document Sync

• Implementing partial loading required extending Figma’s real-time multiplayer system to synchronize only selected portions of a document.
• The system had to support querying specific subtrees instead of always synchronizing the complete file.
• A client sends a query identifying a document node.
• The server returns a reply containing the requested subtree, including its ancestors and descendants.
• Later modifications to the subscribed content are delivered through changes messages.

Handling Dynamic Document Changes

• The protocol continues to work while designers edit the source file in real time.
• Changes to subscribed nodes are sent directly to clients.
• If a node is moved under a subscribed node, the client is informed about the newly available node.
• If a subscribed node is moved outside the client’s subscribed descendants, the client receives a removal update.
• This keeps the partially loaded prototype consistent with the live document while avoiding unnecessary data transfer.

Figma’s solution combines navigation-aware preloading with fine-grained real-time synchronization. Loading only the frames users need provides a practical way to make large prototypes faster and more reliable, especially on memory-constrained mobile devices.