Introducing Slots (new feature) | Schema by Figma 2025

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.

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.