0
0
Figmabi_tool~15 mins

First Figma design - Real Business Scenario

Choose your learning style9 modes available
LearnWhyDeepSheetTryChallengeScenarioRecallDash
Scenario Mode
👤 Your Role: You are a business analyst new to design tools.
📋 Request: Your manager wants a simple dashboard design mockup in Figma to show monthly sales and top products.
📊 Data: You have monthly sales numbers and a list of top 5 products with their sales.
🎯 Deliverable: Create a clean, easy-to-understand dashboard design in Figma showing monthly sales trend and top products.
Progress0 / 10 steps
Sample Data
MonthSales
January12000
February15000
March13000
April17000
May16000
June18000

ProductSales
Product A45000
Product B38000
Product C32000
Product D29000
Product E27000
1
Step 1: Open Figma and create a new file named 'Sales Dashboard'.
No formula needed.
Expected Result
A new blank Figma file is ready for design.
2
Step 2: Create a frame sized 1440x900 pixels to serve as the dashboard canvas.
Use Frame tool, set width=1440, height=900.
Expected Result
A large frame appears as the dashboard background.
3
Step 3: Add a title text at the top center: 'Monthly Sales Dashboard'.
Use Text tool, font size 32px, bold, center aligned.
Expected Result
Dashboard has a clear, readable title.
4
Step 4: Create a line chart area on the left side to show monthly sales trend.
Draw a rectangle 700x400 px, add axis lines and labels for months and sales values.
Expected Result
A placeholder for the monthly sales line chart is visible.
5
Step 5: Plot monthly sales points on the line chart using the sample data and connect them with lines.
Plot points for January(12000), February(15000), March(13000), April(17000), May(16000), June(18000).
Expected Result
Line chart visually shows sales rising and falling over months.
6
Step 6: On the right side, create a vertical list titled 'Top 5 Products'.
Add text heading, then list product names with sales numbers below.
Expected Result
Top products and their sales are clearly listed.
7
Step 7: Add simple bar shapes next to each product name to represent sales proportionally.
Bars sized relative to sales: Product A largest, Product E smallest.
Expected Result
Visual bars help compare product sales easily.
8
Step 8: Use consistent colors: blue for line chart, green for bars, black text on white background.
Apply color styles accordingly.
Expected Result
Dashboard looks clean and professional.
9
Step 9: Add labels and legends for clarity: label axes, add 'Sales in USD' text.
Text labels near axes and bars.
Expected Result
Anyone viewing understands what the numbers and visuals mean.
10
Step 10: Review design for spacing, alignment, and readability. Adjust as needed.
Use Figma alignment tools and zoom to check.
Expected Result
Dashboard is balanced, easy to read, and visually appealing.
Final Result
---------------------------------------------
|           Monthly Sales Dashboard          |
|-------------------------------------------|
|                                           |
|  Line Chart: Monthly Sales Trend           |
|  Jan  Feb  Mar  Apr  May  Jun              |
|   *     *     *     *     *     *          |
|  / \   / \   / \   / \   / \   / \         |
| /   \ /   \ /   \ /   \ /   \ /   \        |
|                                           |
|                       Top 5 Products       |
|  Product A  ██████████████████  45000      |
|  Product B  ██████████████      38000      |
|  Product C  ███████████        32000      |
|  Product D  █████████          29000      |
|  Product E  ███████             27000      |
---------------------------------------------
✓Sales generally increased from January to June with a small dip in March.
✓Product A leads sales significantly, followed by Product B and C.
✓The dashboard clearly shows trends and top products for quick decisions.
Bonus Challenge

Add interactive hover states in Figma to show exact sales numbers on the line chart points.

Show Hint
Use Figma's prototyping features to create hover overlays with text showing sales values.