Best of Design Systems — March 2026

1. 1
   Article

   Frontend Masters·6w

   Post Mortem: Rewriting AgnosticUI with Lit Web Components – Frontend Masters Blog

   A developer's post-mortem on rewriting AgnosticUI, a framework-agnostic component library, using Lit and Web Components. Covers key decisions and trade-offs including Shadow DOM encapsulation with CSS ::part for styling hooks, accessibility challenges with label/input associations inside shadow roots, the unfinished state of native form participation (formAssociated), and React 19 vs @lit/react DX comparison. Also details a CLI-first distribution model where consumers copy component source into their projects, and a playbook-based dogfooding workflow using real UI scenarios to catch integration issues unit tests miss.

   30
2. 2
   Article

   Figma·6w

   How to supercharge your design system with slots

   Figma's slots feature, now in open beta, lets designers customize components without detaching them, mirroring how developers inject content into container components in code. Five field-tested tips from early users cover: starting with high-detach components like dialogs and cards, using pre-filled vs. empty slots intentionally, adding preferred instances as guardrails, scaling slots to full page layouts, and aligning design structure with production code via Code Connect integration.

   28
3. 3
   Article

   Figma·4w

   How we rebuilt the foundations of component instances

   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.

   16
4. 4
   Article

   Product Hunt·5w

   Refero: Design research for humans and AI

   Refero MCP is a tool that gives AI agents access to 125,000+ real product screens and 8,000+ user flows, enabling them to reference actual design patterns instead of generating generic UI. The goal is to improve AI-generated interface quality by grounding it in real-world product design references.

   15