Figma's slots feature, now in open beta, lets designers customize components without detaching them, mirroring how developers inject content into container components in code. Five field-tested tips from early users cover: starting with high-detach components like dialogs and cards, using pre-filled vs. empty slots intentionally, adding preferred instances as guardrails, scaling slots to full page layouts, and aligning design structure with production code via Code Connect integration.
Table of contents
1. Start with the most-used components for the biggest immediate payoff2. Use pre-filled slots to clarify next steps3. Make it clear what belongs in each slot4. Think beyond individual components5. Align design and code with slotsSort: