Why It Matters
Slots are the secret to flexible component composition. Instead of creating dozens of card variants (card with image, card with icon, card with illustration), you create one card with an "image slot" that can be swapped. This reduces component count while increasing flexibility—any frame can go in the slot.
Examples
1
A card component with a "Media Slot" where designers can place images, illustrations, or icons.
2
A modal with a "Content Slot" that accepts any combination of text, forms, or custom content.
3
A navigation item with an "Icon Slot" that can be swapped with different icons per menu item.
Related Terms
Component Set
A group of related component variants combined into a single component with configurable properties, allowing users to switch between variants without swapping components.
Instance
A linked copy of a main component that inherits its properties and automatically updates when the main component changes.
Variant Property
A configurable attribute of a component set that allows users to switch between different variations of a component, such as size, state, or type.
Main Component
The original, source component that defines the structure, styles, and behavior that all its instances inherit.
Explore More Design Terms
Browse our complete glossary of Figma and design systems terminology.