Version history in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a product designer working with a team on a new app interface.

📋 Request: Your manager wants you to track and analyze the version history of design files to understand changes over time and identify who made key updates.

📊 Data: You have access to version history data from Figma showing file versions, timestamps, editor names, and brief change descriptions.

🎯 Deliverable: Create a report that summarizes the number of versions per day, highlights the most active editors, and shows a timeline of changes.

Sample Data

Version ID	Timestamp	Editor	Change Description
v1	2024-06-01 09:15	Alice	Initial wireframe created
v2	2024-06-01 14:30	Bob	Added color scheme
v3	2024-06-02 10:00	Alice	Updated button styles
v4	2024-06-02 16:45	Charlie	Fixed layout issues
v5	2024-06-03 11:20	Bob	Added icons
v6	2024-06-03 15:00	Alice	Refined typography
v7	2024-06-04 09:50	Charlie	Improved navigation flow
v8	2024-06-04 13:30	Bob	Updated footer design

1

Step 1: Extract the date from the Timestamp column to group versions by day.

Create a new column 'Date' by taking the date part of 'Timestamp' (e.g., 2024-06-01).

Expected Result

Dates like 2024-06-01, 2024-06-02, etc. for each version.

2

Step 2: Count the number of versions created each day.

Group data by 'Date' and count 'Version ID' entries per group.

Expected Result

2024-06-01: 2 versions, 2024-06-02: 2 versions, 2024-06-03: 2 versions, 2024-06-04: 2 versions.

3

Step 3: Identify the number of versions each editor has contributed.

Group data by 'Editor' and count 'Version ID' entries per editor.

Expected Result

Alice: 3 versions, Bob: 3 versions, Charlie: 2 versions.

4

Step 4: Create a timeline visualization showing versions over time with editor names.

Plot 'Timestamp' on the x-axis and 'Version ID' on the y-axis, color-coded by 'Editor'.

Expected Result

A timeline chart showing when each version was created and by whom.

5

Step 5: Build a summary dashboard with daily version counts, editor contributions, and the timeline chart.

Combine the grouped counts and timeline visualization into one dashboard.

Expected Result

Dashboard clearly showing version activity per day, top editors, and version timeline.

Final Result

09:15 v1 Alice

↓

10:00 v3 Alice

↓

11:20 v5 Bob

↓

09:50 v7 Charlie

✓Versions were evenly created over four days, with two versions each day.

✓Alice and Bob contributed equally with three versions each, while Charlie contributed two.

✓The timeline shows steady progress with multiple editors updating the design daily.

Bonus Challenge

Add a filter to the dashboard to view version history by a specific editor or date range.

Show Hint

Use slicers or dropdown filters to let users select an editor or date range and update the visuals accordingly.

Practice

1. What is the main purpose of Version history in Figma?

easy

A. To save your work automatically and let you go back to earlier versions

B. To create new design files from scratch

C. To share your design with others instantly

D. To export your design as an image file

Solution

1. Step 1: Understand what version history does

   Version history automatically saves your work and allows you to revisit previous versions.

2. Step 2: Compare options with this understanding

   Only To save your work automatically and let you go back to earlier versions describes this feature correctly; others describe unrelated features.

3. Final Answer:

   To save your work automatically and let you go back to earlier versions -> Option A

4. Quick Check:

   Version history = Save and revert [OK]

Hint: Version history means saving and going back in time [OK]

Common Mistakes:

• Confusing version history with sharing features
• Thinking version history creates new files
• Assuming version history exports images

2. Which of the following is the correct way to name a version in Figma's version history?

easy

A. Go to File menu and choose 'Export version name'

B. Double-click the canvas and type the version name

C. Drag the version to the top of the list

D. Right-click on a version and select 'Name this version'

Solution

1. Step 1: Recall how to name versions in Figma

   You name a version by right-clicking it in the version history and selecting 'Name this version'.

2. Step 2: Check other options for correctness

   Double-clicking canvas, exporting version name, or dragging versions are not valid actions for naming.

3. Final Answer:

   Right-click on a version and select 'Name this version' -> Option D

4. Quick Check:

   Name version = Right-click + Name [OK]

Hint: Right-click version to name it quickly [OK]

Common Mistakes:

• Trying to name version by clicking canvas
• Looking for naming in export options
• Dragging versions to rename

3. If you accidentally delete an important frame in your Figma file, how can version history help you?

medium

A. It sends an email with the deleted frame backup

B. It automatically recovers deleted frames without user action

C. It lets you restore the file to a previous version before deletion

D. It prevents deletion by locking frames

Solution

1. Step 1: Understand version history's recovery role

   Version history allows restoring the file to an earlier saved state before the frame was deleted.

2. Step 2: Evaluate other options

   Version history does not auto-recover without user action, send emails, or lock frames to prevent deletion.

3. Final Answer:

   It lets you restore the file to a previous version before deletion -> Option C

4. Quick Check:

   Restore deleted work = Use version history restore [OK]

Hint: Restore deleted items by reverting to earlier version [OK]

Common Mistakes:

• Assuming auto recovery happens instantly
• Expecting email backups from version history
• Thinking version history locks objects

4. You try to name a version in Figma but the option is greyed out. What could be the problem?

medium

A. Your internet connection is offline

B. You have not selected a saved version yet

C. You are not logged into Figma

D. You are trying to name a version in a different file

Solution

1. Step 1: Identify why naming is disabled

   Version naming is only enabled when you select a saved version in the version history panel.

2. Step 2: Check other options for relevance

   Internet or login issues usually prevent saving, but naming option greyed out specifically means no version selected.

3. Final Answer:

   You have not selected a saved version yet -> Option B

4. Quick Check:

   Name option greyed = No version selected [OK]

Hint: Select a saved version before naming it [OK]

Common Mistakes:

• Assuming offline disables naming option
• Thinking login status affects naming directly
• Trying to name versions in wrong files

5. You want to compare two versions in Figma to see what changed between them. Which steps should you follow?

hard

A. Open version history, select the first version, then select the second version to compare side-by-side

B. Export both versions as images and compare them manually

C. Duplicate the file twice and open each copy separately

D. Use the 'Compare versions' button in the File menu

Solution

1. Step 1: Understand how to compare versions in Figma

   Figma allows selecting two versions in version history to view differences side-by-side.

2. Step 2: Evaluate other options

   Exporting images or duplicating files is manual and inefficient; no 'Compare versions' button exists in File menu.

3. Final Answer:

   Open version history, select the first version, then select the second version to compare side-by-side -> Option A

4. Quick Check:

   Compare versions = Select two versions in history [OK]

Hint: Select two versions in history to compare visually [OK]

Common Mistakes:

• Thinking export is needed to compare versions
• Duplicating files instead of using version history
• Looking for a non-existent compare button