Getting started with slots
Summary
Figma slots unlock more dynamic and composable components, decreasing maintenance on the design system. Designers can now add custom content directly into 'slot' frames, respecting auto-layout settings - a flexible upgrade from rigid component versions or instance swapping.
Key Takeaways
- Slots allow designers to add custom content directly into 'slot' frames within components, respecting the auto-layout settings defined by the component author.
- Component authors can define default content in slots to guide usage, or leave them open-ended for more flexibility.
- Auto-layout settings on slots ensure the custom content flows correctly when added by designers, a key consideration when setting up the component.
- Slots are a nested frame within the main component, and can't be applied to parent frames - maintaining the component structure.
- There are 3 ways to convert a frame into a slot: right-click, keyboard shortcut, or via the properties panel.
- Slots decrease the maintenance overhead on the design system compared to previous methods like instance swapping or pre-defined component versions.
Related topics
Transcript Excerpt
Figma slots are an unlock for more dynamic components in your design system. They allow for more composable components to give your designers the flexibility they need while maintaining some of the structure to hopefully minimize the amount of times they need to detach from the system itself. I'm Brett from Figma. Let's talk about [music] slots. So, at Schema 2025, we announced slots, a new way to natively build components in Figma to make them even more customizable, but decreasing the maintenance on the design system itself. Now, since then, we've partnered with our early access customers to learn and revise our thinking based on real workflows and real feedback. So, let's talk about slots, how to use them, how to set them up, and most importantly, I'm going to walk through some best pra…
More from Figma
- Rethinking my components with slots | Show your work
- How Figma rebuilt the foundations of component instances
- A product designer's guide to the Figma agent
- Meet the Figma design agent
- New capabilities coming to Figma Make