As a concept slots are not new, we use to do UI slots before this update but it was messy and were immune to break any design system. With this recent update, Figma Slots create flexible space inside components. Designers drop content exactly where it belongs.
Core Concept of slots
Every component needs a stable frame. Padding. Corners. Shadows stay fixed.
Inside that frame sit slots, empty areas waiting for content. Click one. Add text, icons, buttons. Or whole sub components. The frame never breaks.
Take a basic card. Top slot holds images or video. Middle slot takes headings and body text. Bottom slot fits one button or a stack of them.
How a UI slot Works
Build the component first. Frame each area that changes title zone, image box, action row.
Right click that frame. Convert to slot. Now anyone using the component clicks inside, hits + picks from your suggestions or drags their own.
Content lives inside slots but the component stays connected. Reorder items, resize them and the layout holds.
Real Example
Pricing card. Slot 1: hero visual (image today, carousel tomorrow). Slot 2: plan name plus bullet features. Slot 3: primary button plus optional secondary.
One component serves 10 page layouts. Team fills slots per need.
Build Steps
-
Open your component.
-
Draw frames over content areas.
-
Right click frame → Convert to slot. (if you dont see dont panic its in beta mode)
-
Set preferred options, your buttons, icons, badges.
Done! Test by dragging an instance and filling slots.
Best Starting Point
Cards first. Then modals. Then navigation panels. Anywhere content shifts but structure doesn’t.
Slots rolled out this week to paid plans. Restart Figma to check and once I have it a detailed video coming to my Youtube Channel! Read Figma Blog post update about slots here.
