Inside: Behind the scenes of component properties
summary
Component properties are actually implemented as metadata on instances that store component properties values so files avoid the variant explosion problem (largest component set hit 16 000 variants). Engineering adds stable IDs, inheritance semantics (default vs initial value) and conversion rules so preexisting overrides survive. The shipped work includes authoring helpers like select all matching layers and consumer features exposed instances and preferred values, and the feature is live in open beta.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 0:51Components and variants in Figma
- 3:58Motivation for properties
- 5:23Engineering planning
- 8:12Design challenges
- 10:15Figma’s component implementation
- 13:47Property values and inheritance
- 17:03Edge cases in updates
- 19:51Post-launch improvements
- 21:38Call to action
related talks
20mTaking Component Driven One Step Further
26mComponents, Patterns and sh*t it’s Hard to Deal with
25mFrom Design Systems to Component Libraries
32mThe journey to interactive components
24mFrom Sketch to Code Designing a Component Kit
24mDesigning Component API
44mIt’s all about components
51mBuilding Better Components — A Journey to a More Resilient Frontend