Speeding Up File Load Times, One Page At A Time | Figma Blog (opens in new tab)

Figma improved file-loading performance by dynamically loading only the page a user opens instead of the entire file. This approach reflects user-perceived complexity, reduces memory usage, and avoids making small pages wait for unrelated content. For the slowest 5% of loads, the change reduced load times by 33%.

Loading Content According to User Needs

• Figma files can contain dozens of pages, hundreds of frames, components, styles, variables, and prototype screens.
• Usage data showed that users often treat a file as an entire project but typically visit only a subset of its pages in one session.
• Loading everything up front made a small page unnecessarily depend on the size of the whole file.
• Dynamic loading lets Figma display the selected page first and fetch additional content only when needed.

Cross-Page Read Dependencies

• A Figma file is modeled as a tree of nodes, with nodes representing interactable layers and their properties.
• Nodes can reference content located on other pages, creating cross-page dependencies.
• An instance points to its backing component, which may be on another page; the component must be loaded before the instance can render correctly.
• Styles and variables also create dependencies:
  • A fill style requires loading its corresponding style node.
  • A variable-based font size requires the variable node so the client can resolve the raw value.

QueryGraph and Earlier Dynamic Loading

• Figma had already developed dynamic loading for view-only files and prototypes.
• Its QueryGraph framework stores dependency relationships as an in-memory graph.
• The multiplayer system uses this graph to determine which parts of a file should be sent to connected clients.
• Previous loading strategies included:
  • Page-based canvas loading: Load the selected page and its required dependencies, then fetch other pages on demand.
  • Frame-based prototype loading: Load the current prototype screen and preload reachable frames within a limited number of transitions.

Performance Impact

• The goal is for load times to trend downward even as files become larger and more feature-rich.
• Dynamic loading improves both initial responsiveness and memory consumption.
• The largest benefits appear in worst-case loads, with a reported 33% reduction for the slowest 5% of page loads.

Figma’s approach demonstrates that large collaborative documents should be loaded according to the user’s immediate context, while dependency tracking ensures referenced content remains available when required.