Browser-based vs desktop app in Figma - Business Scenario Comparison

Scenario Mode

👤 Your Role: You are a product analyst at a software company.

📋 Request: Your manager wants a clear comparison of user engagement between the browser-based and desktop versions of your app.

📊 Data: You have user activity data for both app versions, including daily active users, session length, and feature usage over the past month.

🎯 Deliverable: Create a dashboard in Figma that visually compares key engagement metrics between the browser-based and desktop apps.

Sample Data

Date	App Version	Daily Active Users	Average Session Length (min)	Feature A Usage (%)	Feature B Usage (%)
2024-05-01	Browser	1200	15	40	30
2024-05-01	Desktop	800	25	50	45
2024-05-02	Browser	1250	16	42	32
2024-05-02	Desktop	820	24	48	44
2024-05-03	Browser	1300	14	41	31
2024-05-03	Desktop	850	26	52	46
2024-05-04	Browser	1280	15	43	33
2024-05-04	Desktop	830	25	51	47

1

Step 1: Import the sample data into Figma as a table or use a plugin to visualize data.

No formula needed; prepare data visually for design.

Expected Result

Data is visible in Figma for reference.

2

Step 2: Create two side-by-side bar charts: one for average Daily Active Users (DAU) by app version, and one for average Session Length by app version.

Calculate average DAU and Session Length for Browser and Desktop versions from sample data.

Expected Result

Bar charts show Browser DAU ~1257.5, Desktop DAU ~825; Session Length Browser ~15 min, Desktop ~25 min.

3

Step 3: Design two pie charts showing average Feature A and Feature B usage percentages by app version.

Calculate average Feature A and B usage for Browser and Desktop from sample data.

Expected Result

Pie charts show Browser Feature A ~41.5%, Feature B ~31.5%; Desktop Feature A ~50.25%, Feature B ~45.5%.

4

Step 4: Add clear labels, legends, and titles to all charts for easy understanding.

Use Figma text tools to add descriptive labels and legends.

Expected Result

Dashboard is easy to read and interpret.

5

Step 5: Arrange all charts in a clean layout with a header titled 'User Engagement: Browser vs Desktop App'.

Use Figma frames and alignment tools for layout.

Expected Result

Final dashboard is visually balanced and professional.

Final Result

Bar Chart: Daily Active Users

↓

Bar Chart: Avg Session Length (min)

↓

Pie Chart: Feature A Usage

↓

Pie Chart: Feature B Usage

✓Browser app has higher daily active users than desktop app.

✓Desktop app users spend more time per session than browser users.

✓Desktop app shows higher usage percentages for both Feature A and Feature B.

✓User engagement differs by app version, suggesting different user behaviors.

Bonus Challenge

Add a line chart showing daily trends of active users for both app versions over the sample period.

Show Hint

Calculate daily active users per date and plot two lines, one for Browser and one for Desktop.

Practice

1. Which statement best describes a browser-based app like Figma?

easy

A. It only works on mobile devices.

B. It installs on your computer and works without internet.

C. It runs inside a web browser and usually needs internet access.

D. It requires special hardware to run.

Solution

1. Step 1: Understand browser-based apps

   Browser-based apps run inside web browsers like Chrome or Firefox and usually need internet to load and save data.

2. Step 2: Compare with other options

   Desktop apps install on computers and can work offline, so It installs on your computer and works without internet. is incorrect. Options C and D are unrelated to browser-based apps.

3. Final Answer:

   It runs inside a web browser and usually needs internet access. -> Option C

4. Quick Check:

   Browser-based app = runs in browser with internet [OK]

Hint: Browser apps run in browsers and need internet [OK]

Common Mistakes:

• Confusing browser-based with desktop apps
• Thinking browser apps install on computer
• Assuming browser apps work offline

2. Which of these is the correct way to open Figma's desktop app?

easy

A. Double-click the Figma icon installed on your computer

B. Run Figma from a USB drive without installation

C. Use a mobile app store to open Figma

D. Open a web browser and go to figma.com

Solution

1. Step 1: Identify desktop app usage

   Desktop apps are installed on your computer and opened by clicking their icon.

2. Step 2: Eliminate other options

   Open a web browser and go to figma.com describes browser use, not desktop app. Use a mobile app store to open Figma is about mobile apps. Run Figma from a USB drive without installation is not typical for desktop apps.

3. Final Answer:

   Double-click the Figma icon installed on your computer -> Option A

4. Quick Check:

   Desktop app = open installed icon [OK]

Hint: Desktop apps open from installed icons, not browsers [OK]

Common Mistakes:

• Confusing browser access with desktop app launch
• Thinking desktop apps run from USB without install
• Assuming mobile app store opens desktop app

3. If you lose internet connection, which Figma app will still let you work offline?

medium

A. None of the above

B. Browser-based Figma app

C. Mobile browser Figma

D. Desktop Figma app

Solution

1. Step 1: Understand offline capabilities

   Browser-based apps need internet, so they stop working offline.

2. Step 2: Identify desktop app features

   Desktop apps can work offline because they are installed locally and save data on your computer.

3. Final Answer:

   Desktop Figma app -> Option D

4. Quick Check:

   Offline work = desktop app only [OK]

Hint: Only desktop apps work offline [OK]

Common Mistakes:

• Assuming browser apps work offline
• Confusing mobile browser with desktop app
• Choosing 'None' when desktop app works offline

4. You try to open Figma desktop app but get an error saying it can't connect. What is the likely cause?

medium

A. The desktop app requires internet for some features

B. You are not connected to the internet

C. You opened the browser instead of desktop app

D. Your computer does not support browsers

Solution

1. Step 1: Understand desktop app internet needs

   Desktop apps can work offline but some features like syncing need internet.

2. Step 2: Analyze error cause

   If the app can't connect, it likely needs internet for syncing or updates, so The desktop app requires internet for some features fits best.

3. Final Answer:

   The desktop app requires internet for some features -> Option A

4. Quick Check:

   Desktop app needs internet for syncing [OK]

Hint: Desktop apps may need internet for syncing [OK]

Common Mistakes:

• Assuming desktop apps never need internet
• Confusing browser with desktop app
• Blaming computer hardware incorrectly

5. You want to work on Figma designs during a flight with no internet. Which setup is best?

hard

A. Use the browser-based Figma app before the flight

B. Install and use the desktop Figma app on your laptop

C. Use a mobile browser to access Figma

D. Save files on a USB and open in browser offline

Solution

1. Step 1: Identify offline work needs

   Working during a flight means no internet, so you need an app that works offline.

2. Step 2: Choose the right app

   Desktop Figma app works offline if installed, so it's the best choice. Browser apps need internet, so browser-based and mobile browser options fail. Save files on a USB and open in browser offline is not possible because browser needs internet to open Figma files.

3. Final Answer:

   Install and use the desktop Figma app on your laptop -> Option B

4. Quick Check:

   Offline work needs desktop app installed [OK]

Hint: Offline work? Use desktop app installed on laptop [OK]

Common Mistakes:

• Trying to use browser app offline
• Assuming mobile browser works offline
• Thinking USB files open in browser without internet