Version Control

Timeline

June 2023

Team

Designer

Role

File Management

Example of an app's version changelog

Example of a version changelog within a Figma file for CMT’s flagship app, DriveWell Go.

Overview

In June of 2023, I created a versioning system within Figma that would maintain different versions of design files and manage the branching and merging of those versions in order to facilitate collaboration and track changes effectively.

This system is used across all 30+ of our white label customers, CMT’s flagship app (DriveWell Go), the redesign project of DriveWell Go, and the design systems that contribute to the projects listed.

Slack message describing a customer's problem with their Figma file

Background

In 2021, we transitioned from Sketch and Zeplin to Figma, which became a one-stop shop for design, development handoff, and customer collaboration.

This shift provided our customers with more transparency and access to their apps, leading to increased inquiries about previous app versions and and how updates compared to in-production screens are managed.

However, we lacked an organized system for saving past app versions and tracking updates against in-production screens, making it challenging to fulfill customer requests. We needed a streamlined solution to track and communicate app changes effectively.

Execution

Showing the branches window in Figma

I began by researching methods to effectively showcase both in-production app screens and WIP screens planned for future updates. Figma's branching feature proved ideal for this.

Branching enables us to keep the main file up to date with current production screens while simultaneously working on future updates in a separate branch. Once an app update is released, merging the branch back into the main file seamlessly incorporates the new screens and ensures the file accurately reflects the latest app version.


Branching offered an added advantage by enabling our design team to efficiently work on exploratory features. Instead of creating a separate file and manually copying screens from the main file, branching allowed us to duplicate the main file within a branch, ensuring we always worked with the most current screens.

Showing version history log in Figma

Purple circles are showing changes made to mockups in the main file after an app release.

The next step was to leverage Figma's version history feature to help both us and our customers easily access and navigate previous versions of the app.

Branching integrates seamlessly with version history, making the only manual task the documentation of changes made to the in-production (main) file.

This process is especially important after merging a branch back into the main file, as it allows us to address ongoing updates and revisions.
For example, when a customer requests a copy change or a designer needs to fix a missed detail like an icon color error, version history helps track these changes and their purposes for easy reference.

Showing inspiration for changelog idea

We established a process to track and document app changes, but our switch in design software left some customers unfamiliar with navigating and using Figma effectively. To address this, I needed to develop a clear and simple method of summarizing app release changes for our customers.


Before this, my coworker shared a Tweet from Figma (credit to Clara Ujiie), which inspired me to tailor Clara's approach to meet our customers' needs. I created a Figma page called "Version Changelog," where I log all UI-related changes for each app update, including release dates and associated version numbers.

This page enables our customers to easily access the current production and previous app version information without searching through Figma's Version History. It also provides internal team members with a quick overview of project updates.

The Impact


Addressing the customer’s needs led to a much needed reorganization of our company’s files. This project was long overdue, but now it positions us for a more structured and collaborative approach to work.

As a result of this project, I created training materials and documentation that I shared with my team, serving as a resource for both current and future designers. Designers working on DriveWell Go or White Label apps now consistently use branches and version history.

Training materials created for designers

Training materials on Version History and Branching

Previous
Previous

Accessibility

Next
Next

Gig Research