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.