Branching and merging in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Branching in Figma

What is the primary purpose of creating a branch in Figma when working on a design project?

A To export the design file as a PDF

B To create a separate copy of the design file to work on changes without affecting the main file

C To merge two unrelated design files into one automatically

D To permanently delete the original design file

💡 Hint

Think about how you can work safely on new ideas without changing the original design.

Branching allows designers to create a separate copy of the design file to experiment or make changes without impacting the main design. This helps in safe collaboration and testing.

🎯 Scenario

intermediate

Merging Branches in Figma

You have finished working on a branch in Figma and want to combine your changes back into the main file. What happens during the merge process?

A Your changes are reviewed and then integrated into the main file, resolving any conflicts if necessary

B The branch is deleted without saving any changes

C The main file is overwritten without any review

D A new unrelated file is created

💡 Hint

Consider how merging helps keep the main file updated with your branch work safely.

Merging in Figma involves reviewing changes made in the branch and integrating them into the main file. If there are conflicts, they must be resolved to ensure design consistency.

🔧 Formula Fix

advanced

Resolving Merge Conflicts

During a merge in Figma, you encounter a conflict where two designers changed the same button color differently. What is the best way to resolve this conflict?

A Choose the color that fits the design guidelines and communicate with the team before finalizing

B Delete the button to avoid confusion

C Ignore the conflict and merge anyway

D Duplicate the button with both colors side by side

💡 Hint

Think about teamwork and design consistency when resolving conflicts.

Conflicts should be resolved by selecting the option that aligns with design standards and discussing with the team to maintain consistency and clarity.

❓ visualization

advanced

Visualizing Branch History

Which Figma feature helps you see the history of changes made in a branch and compare it with the main file?

A Export to PNG

B Auto-layout tool

C Branch comparison view showing changes side-by-side

D Prototype mode

💡 Hint

Look for a feature that helps review differences between versions.

The branch comparison view in Figma allows you to see changes made in a branch compared side-by-side with the main file, helping in review and merge decisions.

❓ data_modeling

expert

Design System Updates with Branching

You are updating a shared design system in Figma using branches. What is the best practice to ensure all team members get the latest components without breaking their current work?

A Delete old components before merging updates

B Directly edit the main design system without branches

C Send screenshots of changes instead of updating components

D Create a branch for updates, test changes thoroughly, then merge to main and notify the team to pull updates

💡 Hint

Think about safe updates and communication in shared resources.

Using branches to update the design system allows testing changes without affecting others. After merging, notifying the team ensures everyone uses the latest components safely.