Slots pattern for flexible components in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UI/UX designer working on a business intelligence dashboard.

📋 Request: Your manager wants you to create flexible dashboard components that can easily adapt to different data visualizations using the slots pattern.

📊 Data: You have access to various chart types (bar, line, pie), text blocks, and filters that need to be placed inside reusable dashboard card components.

🎯 Deliverable: Create a flexible dashboard card component in Figma using the slots pattern, allowing different content types to be inserted without redesigning the card each time.

Sample Data

Component	Slot Name	Content Type	Example Content
Dashboard Card	Header	Text	Sales Overview
Dashboard Card	Body	Chart	Bar Chart of Monthly Sales
Dashboard Card	Footer	Filter	Date Range Selector
Dashboard Card	Body	Chart	Pie Chart of Market Share
Dashboard Card	Header	Text	Customer Growth

1

Step 1: Create a new component named 'Dashboard Card' in Figma.

Use a rectangle with padding and a shadow to form the card background.

Expected Result

A card shape ready to hold content.

2

Step 2: Define three slots inside the 'Dashboard Card' component: Header, Body, and Footer.

Use Figma's component variants or auto-layout frames labeled as slots for Header, Body, and Footer.

Expected Result

Three distinct areas inside the card where content can be placed flexibly.

3

Step 3: Set the Header slot to accept text content.

Place a text layer inside the Header slot with placeholder text 'Title'.

Expected Result

Header slot shows a text placeholder that can be replaced.

4

Step 4: Set the Body slot to accept different chart components.

Create placeholder frames inside the Body slot labeled 'Chart Area' that can be replaced with bar, line, or pie charts.

Expected Result

Body slot is flexible to hold any chart type.

5

Step 5: Set the Footer slot to accept filter controls.

Add a placeholder frame labeled 'Filter Control' inside the Footer slot.

Expected Result

Footer slot ready to hold filter UI elements.

6

Step 6: Test the component by creating instances and swapping slot content.

Replace Header text with 'Sales Overview', Body with a bar chart frame, and Footer with a date range selector frame.

Expected Result

Dashboard Card instance shows 'Sales Overview' header, bar chart in body, and date filter in footer.

7

Step 7: Create another instance with different slot content.

Replace Header with 'Customer Growth', Body with a pie chart frame, and Footer with no filter.

Expected Result

Dashboard Card instance shows 'Customer Growth' header, pie chart in body, and empty footer.

Final Result

Header: Sales Overview

[Bar Chart of Monthly Sales]

↓

Header: Customer Growth

[Pie Chart of Market Share]

Bonus Challenge

Add a new slot named 'Badge' to the Dashboard Card to show status indicators like 'New' or 'Updated'.

Show Hint

Create a small frame in the top-right corner of the card component and label it as the Badge slot. Use text or icon placeholders.

Practice

1. What is the main purpose of the Slots pattern in Figma components?

easy

A. To create placeholders inside components for flexible content

B. To lock components so they cannot be edited

C. To export components as images

D. To automatically generate color palettes

Solution

1. Step 1: Understand the Slots pattern concept

   Slots act as placeholders inside components where you can insert different content later.

2. Step 2: Identify the main purpose

   This allows components to be flexible and reusable by changing only the slot content.

3. Final Answer:

   To create placeholders inside components for flexible content -> Option A

4. Quick Check:

   Slots = placeholders for flexible content [OK]

Hint: Slots hold flexible content inside components [OK]

Common Mistakes:

• Thinking slots lock components
• Confusing slots with export features
• Assuming slots generate colors automatically

2. Which of the following is the correct way to define a slot inside a Figma component?

easy

A. Group layers and rename the group to 'Slot'

B. Use the 'Export' option on a layer

C. Add a frame and mark it as a slot placeholder

D. Create a text layer with the word 'Slot'

Solution

1. Step 1: Recall how slots are defined

   Slots are defined by adding a frame or container inside a component and marking it as a slot placeholder.

2. Step 2: Evaluate the options

   Only Add a frame and mark it as a slot placeholder correctly describes adding a frame and marking it as a slot placeholder.

3. Final Answer:

   Add a frame and mark it as a slot placeholder -> Option C

4. Quick Check:

   Slot definition = frame marked as slot [OK]

Hint: Slots are frames marked as placeholders inside components [OK]

Common Mistakes:

• Confusing slots with export settings
• Thinking renaming groups creates slots
• Assuming text layers define slots

3. Given a component with a slot named IconSlot, what happens when you drag a new icon into this slot instance?

medium

A. The component breaks and shows an error

B. The original component's icon changes everywhere

C. The slot disappears and cannot be reused

D. The new icon replaces the slot content in that instance only

Solution

1. Step 1: Understand slot instance behavior

   When you drag content into a slot in an instance, it replaces the slot content only for that instance.

2. Step 2: Check effect on original component

   The original component remains unchanged; only the instance shows the new content.

3. Final Answer:

   The new icon replaces the slot content in that instance only -> Option D

4. Quick Check:

   Slot content replaced per instance [OK]

Hint: Slot content changes only in the instance, not original [OK]

Common Mistakes:

• Thinking original component changes globally
• Believing slots disappear after use
• Assuming errors occur on drag

4. You created a slot inside a component but when you drag content into it, the content does not appear. What is the most likely cause?

medium

A. The slot frame was not marked as a slot placeholder

B. The component is locked and cannot be edited

C. The dragged content is not supported by Figma

D. The component has no fill color

Solution

1. Step 1: Check slot setup

   If content does not appear when dragged, the slot frame might not be properly marked as a slot placeholder.

2. Step 2: Rule out other causes

   Locking or fill color does not prevent slot content from showing; Figma supports common content types.

3. Final Answer:

   The slot frame was not marked as a slot placeholder -> Option A

4. Quick Check:

   Unmarked slot frame blocks content [OK]

Hint: Mark frames as slots to accept content [OK]

Common Mistakes:

• Assuming locking blocks slot content
• Blaming unsupported content types
• Thinking fill color affects slots

5. You want to create a reusable button component with a slot for an icon and a slot for label text. Which approach best uses the Slots pattern to achieve this?

hard

A. Create two separate components: one for icon and one for label, then group them

B. Create a component with two frames marked as slots: one for the icon and one for the label text

C. Use a single text layer and change its content for icon and label

D. Create a component with fixed icon and label layers without slots

Solution

1. Step 1: Understand the goal

   You want a flexible button where icon and label can be changed independently.

2. Step 2: Apply Slots pattern

   Defining two frames as slots inside the button component allows replacing icon and label content separately in instances.

3. Step 3: Evaluate other options

   Grouping separate components or fixed layers does not provide the same flexibility and reusability.

4. Final Answer:

   Create a component with two frames marked as slots: one for the icon and one for the label text -> Option B

5. Quick Check:

   Multiple slots = flexible reusable component [OK]

Hint: Use multiple slot frames for flexible parts [OK]

Common Mistakes:

• Using fixed layers instead of slots
• Grouping separate components without slots
• Trying to use one text layer for icon and label