# Introducing Slots (new feature) | Schema by Figma 2025 Source: https://www.youtube.com/watch?v=pAnrocPfFEo Recap page: https://rapidrecap.app/video/pAnrocPfFEo Generated: 2025-11-11T13:08:46.953+00:00 --- ## Quick Overview Nathan Curtis presents "Spectacular Slots" at Schema by Figma, detailing how using slots in design systems enables greater flexibility and composition while maintaining consistency, contrasting rigid component structures with slot-based systems that empower designers to create complex arrangements like nested layouts and customized component parts without sacrificing code structure or maintainability. **Key Points:** - The core principle advocated is: "Design for consistency, Build for flexibility," using slots to achieve this balance. - Slots solve problems related to component variation, such as enabling complex nesting in action lists (e.g., groups within lists) and allowing for variable content in components like cards (e.g., title lookup, reviews, icon lists). - The presentation contrasts rigid components (where parts are fixed instances) with flexible components (where parts are replaced by slots), showing that designers want to express complex arrangements that traditional props cannot easily handle. - A key benefit is empowering designers to be responsible for what they put in their components, leading to faster iteration and less system maintenance overhead for developers maintaining overly complex structures. - The talk addresses the challenge of how strictly slots must match code, suggesting that while strict matching leads to consistency, a degree of flexibility (like using boolean props for optional elements or more specific slot names) is necessary. - Examples shown include customizing card layouts (vertical/horizontal/pricing) and action lists, demonstrating how slots allow for the composition of multiple sub-components (like headers, groups, and items) within a single component structure. ![Screenshot at 04:01: The slide introduces the concept of slots as a path to overcome the rigidity of component instantiation, showing an avatar slot being filled dynamically within a row component structure.](https://ss.rapidrecap.app/screens/pAnrocPfFEo/00-04-01.png) **Context:** Nathan Curtis, a Design System Consultant from Directed Edges, delivered this presentation titled "Spectacular Slots" at Schema by Figma. The talk focuses on the concept of 'slots' as a design system feature that allows for greater component flexibility and composition, especially for complex nested structures and variations, contrasting this approach with more rigid component design methods often seen in design systems. ## Detailed Analysis Nathan Curtis argues that slots are a fantastic feature that unlocks significant potential in design systems by balancing consistency with flexibility. He illustrates that traditional components relying solely on props for variation become brittle when designers need to compose complex structures, like nested action lists or cards with highly variable content (e.g., different pricing displays or icon lists). The challenge is determining how strictly slots must match code; while designers want flexibility (like being able to reorder elements or introduce new nested components easily), developers need strong defaults and maintainable code. Curtis introduces the principle: "Design for consistency, Build for flexibility," suggesting that slots should manage the flexible, uncommon content, while props handle the common, configurable aspects. He contrasts rigid structures (fixed instances) with slot-based structures, demonstrating how slots allow designers to easily compose complex layouts and components without creating an overwhelming number of variants or coupling design and code too tightly. He shows examples of complex action lists and product cards demonstrating how slots allow for deeper nesting and varied configurations while maintaining a predictable structure for the system maintainers. ### Introduction to Slots - Spectacular slots unlock potential for everyone - Slots solve problems of configuration and composition, unlike rigid component structures. ### Principle - Design for consistency, Build for flexibility - Use props for common configurations, use slots for uncommon composition. ### Component Flexibility - Rigid components (nested instances) versus flexible components (slots) - Slots allow designers to express complex arrangements of content and layout. ### Action List Example - Demonstrates nesting structures (Header, Group, Item) that map cleanly to code composition, avoiding design-code mismatch. ### How Low Do Slots Go? - Explores the depth of slot usage, from shallow (default content) to deep (nesting components within slots), recognizing that high complexity can be scary. ### Design Outcomes - Designers feel fast, in command of autolayout, and carefree with tokens/naming; developers benefit from simpler components and strong defaults. ![Screenshot at 00:04: Title slide introducing Nathan Curtis and the topic "Spectacular slots".](https://ss.rapidrecap.app/screens/pAnrocPfFEo/00-00-04.png) ![Screenshot at 00:18: Curtis mentions slots unlocking potential for everyone, contrasting with previous design limitations.](https://ss.rapidrecap.app/screens/pAnrocPfFEo/00-00-18.png) ![Screenshot at 00:53: The presentation contrasts rigid component structure \(fixed instances\) with flexible component structure \(slots\) in terms of flexibility.](https://ss.rapidrecap.app/screens/pAnrocPfFEo/00-00-53.png) ![Screenshot at 01:56: Slide titled "Spectacular Slots / Groups" showing a checkbox group example, highlighting the complexity slots can manage.](https://ss.rapidrecap.app/screens/pAnrocPfFEo/00-01-56.png) ![Screenshot at 03:59: Slide presenting the core principle: "Design for consistency, Build for flexibility," with annotations pointing to Props and Slots.](https://ss.rapidrecap.app/screens/pAnrocPfFEo/00-03-59.png) ![Screenshot at 06:12: A comparison slide showing a rigid nested instance versus a flexible slot implementation for a row component.](https://ss.rapidrecap.app/screens/pAnrocPfFEo/00-06-12.png) ![Screenshot at 09:40: Slide titled "Stable Bigger Parts" showing examples of components that are stable versus those that are experimental, illustrating the scope of slot applicability.](https://ss.rapidrecap.app/screens/pAnrocPfFEo/00-09-40.png) ![Screenshot at 11:37: Slide posing the challenge: "Given slots, how does a system best enable a component's purpose and potential?"](https://ss.rapidrecap.app/screens/pAnrocPfFEo/00-11-37.png)