Figma Interview Guide 2026: Collaborative Editing, Graphics, and Real-Time Systems

By /

Figma is the leading collaborative design platform, with a browser-based collaborative vector editor used by nearly every major design team in tech. Engineering at Figma is uniquely challenging: the core product is a real-time collaborative graphics engine running in the browser, which requires deep expertise in WebGL, CRDTs, operational transforms, and performance optimization. Figma was acquired by Adobe in 2022 but continues operating independently.

Figma Engineering Culture

  • Performance obsession: The Figma editor handles complex vectors, images, and effects at 60fps in the browser — every frame budget matters
  • Real-time collaboration at scale: Thousands of users can edit the same file simultaneously — CRDT/OT expertise is valued
  • Web and C++ hybrid: The rendering engine is written in C++ compiled to WebAssembly; the UI layer is in TypeScript/React
  • Small, impactful teams: Figma is relatively small for its market impact; ownership and initiative are expected

Figma Interview Process (2025–2026)

  1. Recruiter screen (30 min)
  2. Technical screen (60 min): Coding problem, often data structure heavy
  3. Full loop (4-5 rounds):
    • 2× Coding (algorithms; may include product-coding with HTML/CSS/JS for frontend roles)
    • 1× System design (collaborative real-time systems, graphics rendering)
    • 1× Domain depth (graphics, web performance, collaborative editing)
    • 1× Behavioral (ownership, cross-functional collaboration)

Collaborative Editing — Core Figma Technology

# CRDTs — how Figma handles concurrent edits
# Figma uses a custom CRDT called "multiplayer" for real-time collaboration

class Operation:
    def __init__(self, op_type: str, position: int, value, client_id: str, timestamp: int):
        self.type = op_type   # 'insert' or 'delete'
        self.position = position
        self.value = value
        self.client_id = client_id
        self.timestamp = timestamp

class SimpleOT:
    """
    Simplified Operational Transformation for text collaboration.
    Real Figma uses a more complex CRDT for nested document structures.
    """
    def __init__(self, initial: str = ""):
        self.text = list(initial)

    def apply(self, op: Operation) -> None:
        if op.type == 'insert':
            self.text.insert(op.position, op.value)
        elif op.type == 'delete':
            if 0 <= op.position  Operation:
        """
        Transform op1 against op2 (applied first).
        Ensures convergence when ops are applied in different orders.
        """
        if op1.type == 'insert' and op2.type == 'insert':
            if op2.position <= op1.position:
                op1 = Operation(op1.type, op1.position + 1, op1.value,
                                op1.client_id, op1.timestamp)
        elif op1.type == 'delete' and op2.type == 'insert':
            if op2.position <= op1.position:
                op1 = Operation(op1.type, op1.position + 1, op1.value,
                                op1.client_id, op1.timestamp)
        elif op1.type == 'insert' and op2.type == 'delete':
            if op2.position  "heXllo"
# User B: delete char at position 3 -> "helo"
# Without OT: applying both can give wrong result
# With OT: transform B's delete against A's insert first

Graphics and Rendering Questions

import math

# "Implement a function to check if a point is inside a polygon"
# Used in Figma for hit testing (did user click on a shape?)

def point_in_polygon(point: tuple, polygon: list) -> bool:
    """
    Ray casting algorithm: cast a ray from point, count intersections.
    Even intersections = outside; odd = inside.
    O(n) where n = number of polygon vertices.
    """
    x, y = point
    n = len(polygon)
    inside = False

    j = n - 1
    for i in range(n):
        xi, yi = polygon[i]
        xj, yj = polygon[j]
        # Does the ray from (x,y) going right intersect edge (xi,yi)-(xj,yj)?
        if ((yi > y) != (yj > y)) and (x  tuple:
    """Get (min_x, min_y, max_x, max_y) of polygon."""
    xs = [p[0] for p in polygon]
    ys = [p[1] for p in polygon]
    return (min(xs), min(ys), max(xs), max(ys))

def point_in_polygon_fast(point, polygon):
    """Two-step: bounding box check then exact ray casting."""
    x, y = point
    min_x, min_y, max_x, max_y = bounding_box(polygon)
    if not (min_x <= x <= max_x and min_y <= y <= max_y):
        return False
    return point_in_polygon(point, polygon)

# Test: point inside a triangle
triangle = [(0,0), (10,0), (5,10)]
print(point_in_polygon((5, 5), triangle))   # True
print(point_in_polygon((0, 5), triangle))   # False
print(point_in_polygon((11, 0), triangle))  # False

# "Implement a function to compute bezier curve points"
def bezier_curve(p0, p1, p2, p3, num_points=100):
    """Cubic Bezier curve — used for vector paths in Figma."""
    points = []
    for i in range(num_points + 1):
        t = i / num_points
        # Bernstein polynomial form
        x = ((1-t)**3 * p0[0] + 3*(1-t)**2*t * p1[0] +
             3*(1-t)*t**2 * p2[0] + t**3 * p3[0])
        y = ((1-t)**3 * p0[1] + 3*(1-t)**2*t * p1[1] +
             3*(1-t)*t**2 * p2[1] + t**3 * p3[1])
        points.append((x, y))
    return points

System Design at Figma

  • “Design the Figma real-time collaboration system” — WebSocket connections per document, CRDT operation broadcasting, presence (cursor positions), conflict resolution, reconnection with sync
  • “Design Figma’s file storage and versioning” — version history, delta compression, collaborative branching, large file handling (binary assets)
  • “How does Figma render complex vector graphics at 60fps in a browser?” — WebGL, dirty region tracking, layer compositing, GPU memory management, Web Workers for compute

Related Interview Guides

Related System Design Interview Questions

Practice these system design problems that appear in Figma interviews:

Related Company Interview Guides

Explore all our company interview guides covering FAANG, startups, and high-growth tech companies.

Scroll to Top