Behind the feature: the hidden challenges of autosave | Figma Blog
Figma’s expanded autosave protects offline edits by persisting pending changes even if the browser tab closes. The feature was difficult because Figma combines large, mutable documents with browser performance limits and real-time multiplayer editing. Rather than repeatedly serializing entire files, Figma chose to store and later replay only the changes made while disconnected. ## Why Whole-File Autosave Was impractical - Figma documents are scenegraphs—trees of layers that can reach tens of megabytes compressed and hundreds of megabytes in memory. - Serializing a large document can take seconds; even an optimized 100 ms operation would cause noticeable stutters because JavaScript and WebAssembly are generally single-threaded. - Splitting serialization across browser frames could reduce blocking, but introduces consistency problems if users edit the document while it is being serialized. - Reading from an immutable scenegraph would solve consistency issues, but adopting immutable data structures would require a major rewrite and could increase memory usage and slow writes. - Replacing a cloud file with an offline backup could overwrite newer edits from collaborators. Keeping the backup as a separate copy would also be problematic for files that act as shared sources of truth, such as design-system component libraries. ## Saving Changes as a Delta - Figma already tracks unsent edits as “deltas” for its multiplayer editing system. - When a document goes offline: - User edits accumulate in an in-memory pending-changes buffer. - The buffer is periodically written to disk. - If the document closes, the changes remain available. - On reload, the changes are applied to the latest document version and uploaded to the server. - This approach avoids serializing the entire scenegraph and naturally preserves newer server-side changes. ## Browser Storage and Granularity - Figma uses IndexedDB because it supports: - Large amounts of browser-side data - Storage in smaller chunks - Database indexes - Transactional operations for data integrity - Pending changes are stored per file and per node or layer as property changes. - This granularity balances storage overhead against redundant disk I/O: finer-grained records reduce unnecessary writes but require more metadata and rows. Figma’s autosave demonstrates that reliable offline persistence is not simply a matter of writing files to disk. For large, collaborative applications, storing incremental changes provides better performance and safer reconciliation than saving and restoring complete document snapshots.
Read original(opens in new tab)