In Figma, How do we maintain design version control with the least effort?
Designers can make radical changes to design files during the product development process. Making changes is important, but it can also be quite annoying. People often describe the design process as messy.
You may think that comprehensive documentation can solve all these problems. Most of the time, that’s not feasible for a small team.
With Figma, we have improved communications and streamlined our documents. We take advantage of every feature it has to offer. As our project grew, new needs arose among the team members. Despite our best efforts, our teammates have complained about the design versions being untraceable and disorganized. This motivated us to explore new methods of design version control.
I keep coming back to this question: how do we maintain design version control in Figma with the least amount of effort?
The first step towards managing your Design Versions is to develop a good Design System. As with other systems, our design system consists of Organisms > Molecules > Atoms.
You can explore this resource to learn more about the design system.
We divided our redesign process into three parts:
1. The Style Guide & Core Components:
If no changes are necessary, we will leave it alone. 😎
The Style Guide and Core Components can only be changed by the Backend Lead, Frontend Lead, and Product Design Lead jointly.
⚠️ Changes in the system and design are made simultaneously.
2. Libraries:
Our library contains molecular components made from atomic structures, such as message cards, date pickers, and tables.
Step 1: Every change, no matter how small or large, must be added to the Version History in Figma. Thus, team members can see how the component has changed over time.
More information: Figma Version History
Step 2: We use two types of tags are announce and changes. One is for announcements, and the other is for status updates.
If there are any changes on component, frame tagged as “New Version Avaible!”
When “New Version” tag is matched with “Approved” tag, developer starts codding. “Aproved” tag is turned “Develop” tag.
Status Tag transformed into “Complete” tag, “New Version” tag changes to “Transformed” tag.
We use Status Annotations and A11y-Focus Orderer for frame tagging. There is a problem with A11y. It adds a supergroup to the frame, which changes the spacing settings displayed during the inspection. I hope this problem is going to be solved as soon as.
3. Files:
The file contains organisms that combine molecules. For example, login or payment pages.
Each file has tags and version history. Each version is also kept on a new Figma page for easy comparison.
Conclusion
- TRACK STAGE BY TAGS
- GET FILE CHANGES TO VERSION HISTORY
- COMPLETE THE DEVELOPMENT AND COMPARE FIGMA DOCS
