Getting started with slots

By Figma

Categories: Design, Product

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

1. Slots allow designers to add custom content directly into 'slot' frames within components, respecting the auto-layout settings defined by the component author.
2. Component authors can define default content in slots to guide usage, or leave them open-ended for more flexibility.
3. Auto-layout settings on slots ensure the custom content flows correctly when added by designers, a key consideration when setting up the component.
4. Slots are a nested frame within the main component, and can't be applied to parent frames - maintaining the component structure.
5. There are 3 ways to convert a frame into a slot: right-click, keyboard shortcut, or via the properties panel.
6. Slots decrease the maintenance overhead on the design system compared to previous methods like instance swapping or pre-defined component versions.

Topics

• Design Systems
• Figma
• Component-based Design
• UI Composition
• Design Workflow

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 maintena...