Base component architecture in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a BI dashboard designer using Figma to create reusable components.

📋 Request: Your manager wants a clean, consistent dashboard design that can be easily updated and scaled. They ask you to build a base component architecture in Figma for common dashboard elements.

📊 Data: You have a list of common dashboard elements: cards, buttons, charts, filters, and headers. Each element needs to be designed as a base component with variants for different states (e.g., active, disabled).

🎯 Deliverable: Create a Figma file with base components for cards, buttons, charts, filters, and headers. Include variants for each component to handle different states and sizes. Organize components in a clear structure for easy reuse.

Sample Data

Component	Variant	Description
Card	Default	Standard card with title and content area
Card	Selected	Card with highlighted border
Button	Primary	Blue button for main actions
Button	Disabled	Greyed out button, not clickable
Chart	Bar	Bar chart placeholder with axis
Chart	Line	Line chart placeholder with axis
Filter	Dropdown	Dropdown filter with label
Filter	Checkbox	Checkbox filter option
Header	Title	Dashboard title header
Header	Subtitle	Smaller subtitle text

1

Step 1: Create a new Figma file and set up pages for components and documentation.

Open Figma, create a new file named 'Dashboard Base Components'. Add two pages: 'Components' and 'Documentation'.

Expected Result

A clean Figma file with two pages ready for component creation.

2

Step 2: Design the base Card component with default and selected variants.

Draw a rectangle 300x200 px with a title text at top and content area. Create a variant with a highlighted border for 'Selected' state.

Expected Result

A Card component with two variants: Default (normal border) and Selected (highlighted border).

3

Step 3: Design the base Button component with primary and disabled variants.

Create a button shape 120x40 px with text 'Primary'. Create variants: Primary (blue background) and Disabled (grey background, no interaction).

Expected Result

Button component with two variants showing active and disabled states.

4

Step 4: Create Chart components with bar and line chart variants.

Design placeholders for bar and line charts with axes and labels. Create variants named 'Bar' and 'Line'.

Expected Result

Chart component with two variants representing bar and line charts.

5

Step 5: Build Filter components with dropdown and checkbox variants.

Design a dropdown filter with label and a checkbox filter option. Create variants 'Dropdown' and 'Checkbox'.

Expected Result

Filter component with two variants for different filter types.

6

Step 6: Create Header components with title and subtitle variants.

Design text styles for dashboard title and subtitle. Create variants 'Title' and 'Subtitle'.

Expected Result

Header component with two text style variants for consistent headings.

7

Step 7: Organize all components into a clear structure with naming conventions.

Group components by type (Card, Button, Chart, Filter, Header). Use variant naming for states and sizes. Add descriptions in Documentation page.

Expected Result

Well-organized components easy to find and reuse with clear variant names.

8

Step 8: Test component reuse by building a sample dashboard layout using the base components.

Drag instances of Card, Button, Chart, Filter, and Header components onto a new frame. Arrange them to simulate a dashboard.

Expected Result

A sample dashboard layout demonstrating consistent design and easy updates via base components.

Final Result

Header: Title

↓

Filter: Dropdown

↓

Card: Selected

↓

Chart: Bar

↓

Button: Primary

✓Base components with variants ensure consistent design across dashboards.

✓Organized components speed up dashboard creation and updates.

✓Using variants reduces duplication and errors in design.

✓Sample dashboard layout shows how components fit together seamlessly.

Bonus Challenge

Add responsive variants to the Card and Button components for mobile and desktop sizes.

Show Hint

Create new variants with different widths and heights. Use Figma's auto-layout to adapt content inside components.