The journey to interactive components
summary
Figma ships interactive components that let instances keep overrides and wired interactions across variants and work in-place; the product goal is to cut exploration cost. Engineering uses WebGL for rendering, a high-performance C++ editor plus a compact Skew viewer, WebAssembly and asm js; code drops from ~2 MB to ~100 KB so viewer loads ~30s vs ~5s on mobile, and the prototype runtime now runs both codebases to make text, animation and overrides actually work—beta at 40,000 users.
AI-written summary · about
chapters (5)
- 0:00Introduction
- 0:18What are Interactive Components? Context
- 1:47How did we get here? Product goals
- 13:11How can we get there? Process
- 31:15Where are we now? Conclusions
related talks
23mCollaborative and real-time design systems in Figma
24mFigma components in sync with code components
39mDesigning with Components
44mIt’s all about components
29mDesign to Code: Roundtable discussion with Code Connect users
32mTelling a more compelling story with interactive prototypes
22mArchitecting Subcomponents
15mModern Approach to Designer ❤️ Developer Collaboration