Branching and merging in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a product designer working in a team using Figma for UI design.

📋 Request: Your manager wants you to create a new feature design while keeping the original design intact. Later, you need to merge your changes back into the main design file.

📊 Data: You have the main design file with the current UI screens. You will create a branch to work on the new feature design separately.

🎯 Deliverable: A merged Figma design file that includes the new feature changes integrated into the main design.

Sample Data

Screen Name	Elements	Status
Login Screen	Username field, Password field, Login button	Main design
Dashboard	Navigation bar, Summary cards, Notifications	Main design
Settings	Profile info, Preferences, Logout button	Main design

1

Step 1: Create a branch from the main design file to work on the new feature.

In Figma, open the main design file. Click on the file name, then select 'Create branch'. Name the branch 'New Feature Design'.

Expected Result

A new branch named 'New Feature Design' is created, duplicating the main design for safe editing.

2

Step 2: Make your design changes for the new feature in the branch.

Add new UI elements or modify existing screens in the 'New Feature Design' branch without affecting the main file.

Expected Result

The branch contains updated screens with the new feature design changes.

3

Step 3: Review your changes and prepare to merge them back into the main design.

Use Figma's branch comparison tool to see differences between the branch and main file.

Expected Result

You can clearly see the new feature changes highlighted compared to the main design.

4

Step 4: Merge the branch back into the main design file.

In Figma, select the branch, then click 'Merge into main'. Resolve any conflicts if prompted.

Expected Result

The main design file now includes the new feature changes from the branch.

5

Step 5: Verify the merged design in the main file.

Open the main design file and check that all new feature elements are present and correctly integrated.

Expected Result

The main design file shows the updated UI with the new feature ready for team use.

Final Result

Main Design File
+-----------------------------+
| Login Screen                |
| - Username field            |
| - Password field            |
| - Login button              |
|                             |
| Dashboard                   |
| - Navigation bar            |
| - Summary cards             |
| - Notifications             |
|                             |
| Settings                   |
| - Profile info              |
| - Preferences               |
| - Logout button             |
|                             |
| New Feature Screen          |
| - New UI elements added     |
+-----------------------------+

✓Branching allows safe experimentation without affecting the main design.

✓Merging integrates new changes smoothly after review.

✓Figma's branching and merging help teams collaborate efficiently on UI design.

Bonus Challenge

Create a second branch to test an alternative design for the new feature and compare it with the first branch before merging.

Show Hint

Use Figma's branch comparison to review differences side-by-side and decide which design to merge.