Simulating Slots in Figma

Figma lacks native “slots,” but designers simulate this pattern for highly flexible, reusable components. A “slot” is a placeholder within a component for the custom content or other components, boosting design system adaptability.

What Are “Slots” in Design?

A “slot” is a customizable region within a component. It maintains core structure and styling while internal content remains dynamic. Crucial for robust design systems, components adapt to diverse use cases without duplicating effort.

Simulating Slots in Figma: Techniques

Figma offers several features to effectively simulate the “slots” pattern:

Content Property (Nested Instance Swaps)

Most direct method. Create a generic placeholder component (e.g., “Drop Content Here”). Place its instance inside your main component. Select the nested instance, then in the right panel, click “Create Property” next to “Swap instance.” Choose “Content” and name it (e.g., Header Slot). Instance users swap the nested instance with any other component via properties panel.

Boolean Properties for Conditional Visibility

Useful for optional content areas. Design different content pieces for a slot (e.g., an icon, a badge). Place them within your main component. Create a Boolean property (e.g., Show Icon) linked to each layer’s visibility. Users toggle these properties to reveal or hide corresponding slot content. Suits predefined content, not arbitrary injection.

Text Properties for Dynamic Text Content

For text-based slots, use Figma’s text properties. Select a text layer within your component. Click “Create Property” next to the “Content” field. Name it (e.g., Button Label). Component instances expose this property, allowing designers to type custom text.

Variants for State-Based Slots

Variants define configurations where slots are present or absent. Design multiple component versions (e.g., card with/without image). Group into a component set, defining properties (e.g., Image: True/False). Designers select variant, dictating slot presence/absence.

Why Use the “Slots” Pattern?

Implementing “slots” offers advantages:

• Increased Flexibility: Components adapt highly to various content and layouts.
• Enhanced Reusability: Single master component serves many purposes, reducing component count.
• Improved Maintainability: Core component structure changes propagate universally; slot content untouched.
• Stronger Design Systems: Facilitates robust, scalable, intuitive design system creation.
• Better Collaboration: Defines custom content areas, streamlining designer-developer handover.

Practical Examples

• Card: Slots for image, title, description, action button.
• Modal/Dialog: Slots for header, main content (any complex UI), footer (action buttons).
• Navigation Item: Slots for icon, text label, optional notification badge.

Best Practices for Slots

• Clear Naming: Name slot layers/properties descriptively (e.g., [Slot] Main Content).
• Sensible Defaults: Provide default content or clear placeholders.
• Document Usage: Explain slot usage in documentation.
• Layout Constraints: Ensure slot placeholders have appropriate auto layout/resizing constraints.
• Don’t Overuse: Create slots only where dynamic content injection is truly necessary.