Figma·Software Engineer·Onsite - System Design / Architecture·Senior

SeniorPrefer not to say

May 2026

Summary

Figma system design round focused on building a document property layer from scratch. The core problem was deceptively simple but the follow-up discussion about extensibility is where things got interesting.

Questions Asked (1)

Design a Document Layer object that supports applying property changes to a document. It needs an apply(key, value) method that sets or deletes properties, and a get(key) method that returns the current value or None if absent. Then discuss how you'd extend it to support atomic batch updates, undo/redo, and history compaction.

System DesignTechnical Trade-offsAPI & Integrations

Author's notes

The basic apply/get part took maybe five minutes and I was feeling pretty good about myself.

Create a free account to read the full note

AI HintsAI Generated

Suggested Approach

Start by clarifying requirements and constraints, then design a simple DocumentLayer class with apply and get methods, using a dictionary for storage and handling deletion via a sentinel. For extensions, discuss atomic batch updates using transactions, undo/redo with command pattern or snapshots, and history compaction via periodic snapshots or merging operations, emphasizing trade-offs in memory and performance.

Pro tip: Demonstrate awareness of Figma's collaborative environment by mentioning how these features would interact with real-time multi-user editing, such as operational transforms or CRDTs, and the need for conflict resolution.

1. Clarify Requirements and Constraints

Ask about expected document size, concurrency needs, persistence, and performance requirements to tailor the design.

2. Design Core API

Implement a DocumentLayer class with a dictionary for storage, apply(key, value) to set or delete (using a sentinel like None or a special token), and get(key) returning value or None.

3. Extend for Atomic Batch Updates

Introduce a transaction mechanism that groups multiple apply operations, ensuring all-or-nothing execution, possibly with a staging area and commit/rollback.

4. Add Undo/Redo Support

Use a command pattern or snapshot approach to record operations, maintaining undo and redo stacks, and consider memory implications.

5. Implement History Compaction

Discuss strategies like periodic snapshots, merging consecutive operations, or using a log with checkpointing to reduce memory footprint while preserving undo/redo.

Key Points to Mention

Use of a sentinel value (e.g., a unique object) to distinguish deletion from setting None.
Atomicity via transactions: staging changes and committing only if all succeed, with rollback on failure.
Undo/redo implementation: command pattern (each operation as an object with undo/redo) or snapshot-based (store full document states).
History compaction techniques: periodic snapshots, operation merging (e.g., combining consecutive sets to the same key), or log truncation.
Trade-offs: memory vs. performance, complexity vs. functionality, and impact on collaborative editing (e.g., CRDTs or OT).
Consideration of concurrency and conflict resolution in a multi-user environment like Figma.

AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.