By replacing a decade-old architecture with a reactive foundation, we made common operations in large design systems up to 50% faster and unlocked a new way to build dynamic features.

Figma is a collaborative interface design tool that enables teams to create, prototype, and collaborate on digital designs in real-time. From their blog, readers can learn about user interface design, design systems, and prototyping techniques. With documentation, tutorials, and design resources, Figma empowers designers and developers to create beautiful and functional user experiences.

Figma

Figma's engineering team replaced a decade-old Instance Updater architecture with a new reactive system called Materializer. The old system handled component instances in a self-contained but increasingly fragile way, causing cascading updates and editor lockups in large design system files. The new architecture introduces push-based dependency tracking, automatic invalidation, and a shared runtime orchestration layer that cleanly separates layout, variable evaluation, and instance resolution. Common operations like variable mode changes improved by 40–50% in large files. The framework is generic enough that other Figma features like rich text and slots are now built on top of it, accelerating future development. Rollout involved months of parallel validation across hundreds of thousands of production files to ensure correctness and performance parity.

How we rebuilt the foundations of component instances