Introduction
In our last lesson, you built a sophisticated card component, mastering how to nest instances and surface their properties to create a flexible and powerful design asset. We also briefly introduced the "slot" pattern as a way to create swappable content areas. This concept of building a single, robust template that can accept varied content is fundamental to efficient system design, not unlike creating an adaptable financial model in your CA work that can handle different data inputs.
Today, we will fully explore that concept. Your learning outcome is to build a modal/dialog component using a 'slot' pattern for reusable content areas. We will move beyond the simple component swaps we've used before and implement Figma's native slot feature. This will allow you to create one modal component that can serve countless purposes—from simple confirmation dialogs to complex forms—without ever needing to detach the instance.
1. The Core Problem: Why Do We Need Slots?
Before we build, let's solidify our understanding of the problem slots are designed to solve. In the past, if you wanted to put custom content inside a component instance (like a modal), you were faced with a dilemma. You couldn't just drag new elements into the instance. Your only real option was to detach the instance from its main component.
The moment you detach, you lose the link to the master. Any future updates to the main component—a change in corner radius, a new brand color, an updated button style—will not be reflected in your detached version. This creates inconsistency and a significant maintenance burden, especially in a large project.
Placeholder Slot Component in Figma
The video "Placeholder Slot Component in Figma" by Juan Encalada perfectly demonstrates this exact problem. While the video goes on to show an older, manual way of creating slots, we'll focus only on the introduction where the problem is explained.
Watch the first section of the video from the beginning until the problem explained. Pay close attention to the part where the designer is forced to detach the carousel instance to add custom content, thereby breaking its connection to the master component. This is the exact issue the slot feature elegantly solves.
2. The Solution: Figma's Native Slot Feature
A slot is a special type of component property that turns a frame inside a component into a flexible container. You can think of it as a designated "empty space" that you, the component creator, define. Anyone using an instance of your component can then freely add, arrange, or remove any content they wish within that space, all while the surrounding component structure (the "chrome" of the modal) remains linked to the master.
It's crucial to understand how slots differ from variants, a feature you're already very familiar with.
How to Use Figma Slots - Zight
This article from Zight provides a concise explanation of slots and a very helpful comparison table.
Please read the following sections: Start with "What Are Slots in Figma?" to get a clear definition. Continue to "Why Use Slots in Figma?" to understand the key benefits. Finally, pay close attention to the table under "Slots vs Variants in Figma". This will help clarify when to use each feature. Variants are for predefined states (e.g., State=Open/Closed), while slots are for accommodating undefined, flexible content.
3. Hands-On: Building a Slot-Enabled Modal
Now for the practical part. We will build a basic modal component from scratch and incorporate a slot for its content area. We'll follow the official guidance from Figma to ensure we're using best practices.
Getting started with Slots | Figma
The video "Getting started with Slots" from the official Figma channel is the ideal guide for this. We'll use it to build our component.
Open your Figma project and follow these steps to build the modal: Create the Modal Structure: First, create the non-flexible parts of your modal. Create a frame and name it Modal. Apply Auto Layout (vertical), add a fill, padding (e.g., 24px), and corner radius (e.g., 16px). Inside, add a header frame with Auto Layout (horizontal, space between). Place a "Title" text layer and a close icon (you can use a plugin like Iconify). Add a footer frame, also with Auto Layout, and place one or two instances of the button component you built previously (e.g., a primary "Confirm" and a secondary "Cancel" button). Create and Configure the Slot: Now, we'll create the flexible content area. Watch how this is done from setting up a slot. Between your header and footer frames, add a new frame and name it Content Slot. It must be a frame, not a shape. Select this Content Slot frame. Right-click and choose "Convert to slot". Figma will highlight it in pink. Crucially, apply Auto Layout to the Content Slot frame itself (vertical direction, set spacing as needed, e.g., 16px). This ensures that any content you later add into the slot will be arranged neatly. Set the Content Slot frame's horizontal resizing to "Fill container" so it expands to the full width of the modal. Finalize the Component: Select the parent Modal frame and turn it into a component (Cmd/Ctrl + Option + K). Your slot-enabled modal is now ready!
4. Using and Controlling Your Slotted Modal
Creating the component is half the battle; the real power comes from using its instances.
Getting started with Slots | Figma
Let's continue with the official Figma video to see how to use our new component and add some important guardrails.
Create an instance of your new Modal component and try the following: Adding Content: Watch the first demonstration from adding content. When you select your modal instance, you'll see the pink outline for the slot. You can now drag any element (text, shapes, other components) directly into this area. Try adding a few text layers or an image. Notice how the Auto Layout you set on the slot frame organizes the content automatically. Adding Default Content (Optional but Recommended): An empty slot can be intimidating. You can add placeholder content to the main component to guide the user. Watch how this is done from adding default content. In your main component, add some placeholder text or a simple component inside the Content Slot frame. Now, all new instances will start with this content, which users can then customize or remove. Setting Preferred Instances (Advanced Guardrails): This is a powerful feature for design system governance, something your structured background in auditing will appreciate. Watch from setting preferred instances. Select your main Modal component. In the Properties panel in the right sidebar, find your Content Slot property and click the "Edit property" icon. Here, you can add "Preferred instances". Select a few components from your library that you expect to be used inside this modal (e.g., your form input component, a text block component). Now, when a user clicks the + icon on the slot in an instance, they will see a curated list of recommended components, streamlining their workflow and ensuring consistency.
Conclusion
Congratulations! You have now mastered one of the most powerful features for building scalable design systems in Figma. By creating a modal with the native slot feature, you've built a component that is both consistent and incredibly flexible, dramatically reducing the need to create one-off designs or detach instances.
Key Takeaways:
- Slots Solve Detachment: Slots are Figma's native solution to the problem of custom content, allowing instances to remain linked to their master component.
- A Slot is a Frame: A slot must be a
framelayer within a component, which you then convert via the right-click menu or properties panel. - Slots Need Auto Layout: For content inside a slot to behave predictably, the slot frame itself must have Auto Layout properties defined.
- Slots vs. Variants: Use variants for predefined states (e.g., size, color) and slots for undefined, freeform content areas.
- Guide with Guardrails: Use default content and "Preferred Instances" to guide designers, ensuring consistency and speeding up their workflow.
Preview of the Next Lesson:
You've now built several advanced components: a button, a form input, a card, and a modal. But a component is only useful if others (or your future self!) know how to use it correctly. In our next lesson, we will focus on documentation. You will learn to write concise usage guidelines for a component, documenting its do's, don'ts, and accessibility considerations. This is a critical skill for creating a professional and maintainable design system.