0
0
Figmabi_tool~15 mins

Slots pattern for flexible components in Figma - Real Business Scenario

Choose your learning style9 modes available
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.
Progress0 / 7 steps
Sample Data
ComponentSlot NameContent TypeExample Content
Dashboard CardHeaderTextSales Overview
Dashboard CardBodyChartBar Chart of Monthly Sales
Dashboard CardFooterFilterDate Range Selector
Dashboard CardBodyChartPie Chart of Market Share
Dashboard CardHeaderTextCustomer 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.