--- title: How we rebuilt the foundations of component instances description: Figma's engineering team replaced a decade-old Instance Updater architecture with a new reactive system called Materializer. The old system handled component... canonical: https://daily.dev/posts/how-we-rebuilt-the-foundations-of-component-instances-mdjodmvzl twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How we rebuilt the foundations of component instances | daily.dev og:description: Figma's engineering team replaced a decade-old Instance Updater architecture with a new reactive system called Materializer. The old system handled component... og:url: https://daily.dev/posts/how-we-rebuilt-the-foundations-of-component-instances-mdjodmvzl og:image: https://api.daily.dev/og/posts/mdjOdMVZl.png og:image:alt: How we rebuilt the foundations of component instances og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How we rebuilt the foundations of component instances **[Figma](https://daily.dev/sources/figma)** · 10 min read · 16 upvotes · 0 comments ## Summary 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. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [How a Component-First Approach Fixes Figma-to-Code](https://daily.dev/posts/how-a-component-first-approach-fixes-figma-to-code-v9nodv6in) · The New Stack · 2 upvotes · 0 comments - [Improving performance in the layers panel](https://daily.dev/posts/improving-performance-in-the-layers-panel-7eeniw3j8) · Figma · 3 upvotes · 0 comments - [Frontend Design Patterns That Actually Work in 2026](https://daily.dev/posts/frontend-design-patterns-that-actually-work-in-2026-rk8av9x3v) · Netguru · 79 upvotes · 1 comments - [Figma adds code layers, support for animations, more AI features in new update](https://daily.dev/posts/figma-adds-code-layers-support-for-animations-more-ai-features-in-new-update-2drvuw2lb) · TechCrunch · 0 upvotes · 0 comments - [Config 2026: New materials, new tools and a more expressive canvas](https://daily.dev/posts/config-2026-new-materials-new-tools-and-a-more-expressive-canvas-mtp8laipq) · Figma · 1 upvotes · 0 comments --- Tags: [#performance](https://daily.dev/tags/performance), [#architecture](https://daily.dev/tags/architecture), [#figma](https://daily.dev/tags/figma), [#design-systems](https://daily.dev/tags/design-systems), [#reactive-programming](https://daily.dev/tags/reactive-programming) [View this post on daily.dev](https://daily.dev/posts/how-we-rebuilt-the-foundations-of-component-instances-mdjodmvzl) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"How we rebuilt the foundations of component instances","url":"https://daily.dev/posts/how-we-rebuilt-the-foundations-of-component-instances-mdjodmvzl","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-we-rebuilt-the-foundations-of-component-instances-mdjodmvzl"},"datePublished":"2026-03-17T17:51:29.783Z","dateModified":"2026-03-17T17:51:57.170Z","description":"Figma's engineering team replaced a decade-old Instance Updater architecture with a new reactive system called Materializer. The old system handled component...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/c4043de1ac9c16c49b7cb4284b624ef9?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/c4043de1ac9c16c49b7cb4284b624ef9?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Figma","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Figma","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/d81fd85ddaea4d25a658694de448118f","url":"https://daily.dev/sources/figma"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/how-we-rebuilt-the-foundations-of-component-instances-mdjodmvzl","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":16},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"performance,architecture,figma,design-systems,reactive-programming","timeRequired":"PT10M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Figma","item":"https://daily.dev/sources/figma"},{"@type":"ListItem","position":3,"name":"How we rebuilt the foundations of component instances"}]} ```