As asked
Figma documents are represented as a tree of nodes: frames contain groups, groups contain shapes, and each node has a local transform relative to its parent. Write a function that takes the root of this tree and returns a flat list of all leaf nodes with their absolute (world-space) positions.
Sample answer outline
A strong answer uses depth-first traversal, accumulating a running transform matrix as the stack descends. The candidate should handle the case where a node has no children (leaf case), and correctly compose parent-to-world transforms using matrix multiplication. A great answer mentions that Figma nodes can have rotation and scale in addition to translation, so a proper solution uses affine matrix composition rather than simple coordinate addition. The candidate should also consider tree depth and whether recursion or an explicit stack is better for very deep scenes.
Reference implementation (typescript)
interface Node {
id: string;
x: number;
y: number;
rotation: number; // degrees
children?: Node[];
}
interface AbsoluteNode {
id: string;
absX: number;
absY: number;
}
function flattenSceneGraph(root: Node): AbsoluteNode[] {
const result: AbsoluteNode[] = [];
// your implementation here
return result;
}Expect these follow-ups
- How does your solution handle rotation? Show me the matrix multiplication.
- If the tree has 500,000 nodes and you need to run this on every frame at 60fps, what optimizations would you make?