Rethinking my components with slots | Show your work
Summary
Slots fundamentally reshape design systems by enabling flexible, reusable components—but they're not a universal solution. Rachel breaks down three distinct categories where slots excel (repeating elements, free-form content, page templates) and reveals where instant swaps still win, showing how to reduce variant complexity while maintaining system control.
Key Takeaways
- Use nested subcomponents (menu item, menu heading, menu divider) instead of flat frames as slot defaults. This ensures system-level changes propagate to modified instances—changes won't reflect in slots without nested components, breaking downstream updates.
- For free-form content areas (modals, sheets, cards), omit default content entirely to avoid forcing designers to delete templates they don't need. Multiple slots in one component (like the card example) provide structure without constraint.
- Distinguish between slots (for building/flexibility) and instant swaps (for choosing/swapping elements). Icons in buttons or list items belong in instant swaps; use slots only when content structure, not just selection, varies.
- Experiment with slots for page-level templates and higher-order layouts—treating entire pages as components. This approach mirrors code patterns and enables AI agents to generate accurate, structured layouts with component accuracy.
- Slots reduce variant explosion by supporting unlimited content variations within structured containers. For repeating patterns (menus, lists, tabs, checkbox groups), slots eliminate the need to pre-build dozens of variant combinations.
Related topics
Transcript Excerpt
Slots have taken over my design system. In this video, I'll break down exactly where I'm using slots in my design system with some helpful tips along the way. I'm Rachel. Welcome to show your work, the series where designers geek out and get in the file showing you how we're building with Figma. All right. So, there's a few categories in a design system where slots really make sense. The first being repeating elements. So, these are going to be components like menus, lists, tabs, checkbox groups, radio groups, all of these patterns where you're really seeing kind of the same thing over and over again. And this can even apply to some components that you might not initially think it does. Uh, for example, something like a chat component. Notice how for several of these components, I have the…