First Figma design - Real Business Scenario

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.

Sample Data

Month	Sales
January	12000
February	15000
March	13000
April	17000
May	16000
June	18000

Product	Sales
Product A	45000
Product B	38000
Product C	32000
Product D	29000
Product E	27000

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.

Practice

1. What is the main purpose of using Figma in Business Intelligence dashboard projects?

easy

A. To perform data cleaning and transformation

B. To write SQL queries for data extraction

C. To plan and share dashboard designs before building

D. To run complex data models and calculations

Solution

1. Step 1: Understand Figma's role in BI projects

   Figma is a design tool used to create and share visual layouts before actual development.

2. Step 2: Compare options with Figma's function

   Only planning and sharing dashboard designs fits Figma's purpose; others relate to data processing.

3. Final Answer:

   To plan and share dashboard designs before building -> Option C

4. Quick Check:

   Figma = design planning and sharing [OK]

Hint: Remember: Figma is for design, not data processing [OK]

Common Mistakes:

• Confusing Figma with data tools like SQL or Excel
• Thinking Figma runs calculations or data models
• Assuming Figma cleans or transforms data

2. Which of the following is the correct way to create a frame in Figma?

easy

A. Import a frame from Excel

B. Write <frame> tags in the code editor

C. Use the SQL command CREATE FRAME

D. Select the Frame tool and drag on the canvas

Solution

1. Step 1: Identify how frames are created in Figma

   Frames are created by selecting the Frame tool and dragging on the canvas area.

2. Step 2: Eliminate incorrect options

   Options A, B, and C relate to Excel, coding, or SQL, which are not how Figma frames are made.

3. Final Answer:

   Select the Frame tool and drag on the canvas -> Option D

4. Quick Check:

   Frame creation = Frame tool drag [OK]

Hint: Use the Frame tool button, not code or SQL [OK]

Common Mistakes:

• Trying to code frames instead of using the tool
• Confusing Figma with programming or database commands
• Looking for import options instead of drawing

3. Given a Figma design with a frame containing a rectangle and a text label, what will happen if you move the frame?

medium

A. The frame and all its contents move together

B. Only the frame moves, rectangle and text stay in place

C. Only the rectangle moves, text stays fixed

D. The text moves but the rectangle stays fixed

Solution

1. Step 1: Understand frame grouping in Figma

   A frame groups its contents so moving the frame moves everything inside it.

2. Step 2: Apply this to the rectangle and text inside the frame

   Both rectangle and text are inside the frame, so they move together with it.

3. Final Answer:

   The frame and all its contents move together -> Option A

4. Quick Check:

   Frame moves contents together = The frame and all its contents move together [OK]

Hint: Remember: Frames act like groups moving all inside [OK]

Common Mistakes:

• Thinking only the frame moves but contents stay
• Assuming individual elements move separately
• Confusing frames with layers that are not grouped

4. You created a component in Figma but when you edit one instance, the others do not update. What is the likely problem?

medium

A. You edited an instance instead of the main component

B. You forgot to save the file

C. You need to restart Figma to apply changes

D. Components cannot be edited after creation

Solution

1. Step 1: Understand component behavior in Figma

   Editing the main component updates all instances; editing an instance changes only that one.

2. Step 2: Identify the cause of no update

   If other instances don't update, likely you edited an instance, not the main component.

3. Final Answer:

   You edited an instance instead of the main component -> Option A

4. Quick Check:

   Edit main component to update all instances [OK]

Hint: Edit main component, not instances, to update all [OK]

Common Mistakes:

• Editing instances expecting all to update
• Thinking saving or restarting fixes component updates
• Believing components are uneditable after creation

5. You want to share your Figma dashboard design with a team member for feedback but want to restrict editing. Which sharing option should you choose?

hard

A. Export as PNG and email it

B. Share with 'Can view' permission

C. Share with 'Can edit' permission

D. Duplicate the file and send the copy

Solution

1. Step 1: Understand Figma sharing permissions

   'Can view' allows others to see but not change the design; 'Can edit' allows changes.

2. Step 2: Choose the option that restricts editing but allows feedback

   Sharing with 'Can view' lets team members comment and review without editing.

3. Final Answer:

   Share with 'Can view' permission -> Option B

4. Quick Check:

   Restrict editing = 'Can view' sharing [OK]

Hint: Use 'Can view' to share without edit rights [OK]

Common Mistakes:

• Giving 'Can edit' permission by mistake
• Sending static images instead of live designs
• Duplicating files unnecessarily causing confusion