Architecting Subcomponents

on YouTube ↗22m

" summary

Argues that instead of inflating a card component with endless props or forcing users to rebuild from scratch, break it into smaller parts so adopters can compose in minutes rather than wait months for feature requests; demonstrates three subcomponent patterns (lockup, extension, alternatives) and four container types (slot, substitution, block, zone) implemented in Figma, shows that nested instances and dropping assets work for real, and notes tradeoffs: better precision and speed but more docs, governance, and learnability.

AI-written summary · about

" chapters (10)

1. 0:00Architecting subcomponents
2. 1:54Designers need subcomponents
3. 5:25Subcomponent patterns for cards
4. 7:33Container types for subcomponents
5. 12:07Choosing subcomponent patterns
6. 13:54Material UI component anatomy
7. 15:19Subcomponents empower users
8. 16:41Approaches to building components
9. 19:29Adopting subcomponents challenges
10. 21:12Control versus user freedom

" related talks

• 44mIt’s all about componentsDebbie O'Brien · jsday 2022
• 43mDesign Beyond BreakpointsChristine Vallaure · SmashingConf Freiburg 2023
• 39mDesigning with ComponentsMark Dalgleish · ComponentsConf 2019
• 38mMastering the art of crafting code-aligned UI kitsJan Toman · Schema 2021
• 25mDesign systems for agenciesMartina Dellepiane, Sergej Spomer · Config Europe 2020
• 18mMaking the Things That Help Others Do Their ThingJoey Banks · Config 2022
• 28mPushing Figma to its limitsChudo Loo, Andrei Iancu, Gleb Sabirzyanov, Vitalii Sologub, Shuaiqi Sun · Config 2021
• 44mYes, You ShouldChristine Vallaure · SmashingConf New York 2022