I’ve built a few design systems now in Figma, but I keep running into the same problem: version control.
Design system libraries are a single source of truth. In Figma, one library file contains a core set of components and styles that can be applied to many design files. For each design file, a designer can opt to accept any updates made in the original library file.
Problems have entered the group chat…
A lot of the time, all versions of a design are in the same file, and they all use the same components. Components help you avoid copy pasta-ing a bazillion times to make sure designs stay consistent.
To boil it down:
- Updating a library component to a newer version updates all instances of this component, even in older designs.
- This creates a lot of confusion and complexity in handoff, when some parts of a design have advanced past where implementation is (fairly normal in feature development).
- It also makes it difficult to freeze a snapshot of a design for development to build tickets from.
- Lastly, historical designs break when updates are made to components, which makes it hard to go back and reference prior versions.
Below is how our current design system library functions. Not all components really would require version control. They are stable and don’t change frequently.
Our current distribution model
I use our Design System library as the single source of truth for all components, and then apply it to multiple files.
The model looks like this:
As mentioned earlier, this makes controlling and isolating versions of a design quite difficult, and a confusing handoff process.
What are some solutions?
After some research (handy links in References if you’re curious) and brainstorming, here’s what I’ve come up with:
Solution 1: Separate versions of designs into unique files
One solution is to separate each version of a feature into its own design file, and then don’t push library updates to older files. However, this becomes unwieldy the more features and versions of features that are introduced. It’s also difficult to get a sense of the full app when designs are stored in multiple files, and not one source of truth.
Solution 2: Detach components in older designs
Another solution is to detach components on a given artboard. However, even with a plug-in, this is time-consuming, manual, and imperfect due to nested component instances.
Solution 3: Separate variable components into their own library
Another potential solution is to version components within the design library, and then use a particular component version in designs. This could get confusing, and there is an upfront time cost to set this up.
Solution 4: Branching!
The solution we ultimately landed on: branching. Figma introduced branching on Organization level plans as a feature in 2021. I wanted this feature to be like Github, but on Figma. It sortof delivers on this premise, with some hacking. For my use case, we’ve settled on making feature pages within a file, then opening a branch for any iterations on that feature. Then it works like GH where we have a period for review, edits, and approval, and then once approved it’s merged into the main file.
This solved our problem. Now we had a way to snapshot and isolate designs for dev/design handoff! When in a branch, the design is isolated from updates from the library and to the main file. Now, for the work of overhauling the design file… 😅
I’m curious!
How have other designers handled this problem? Let me know in the comments or reach out to me on Twitter!
References
Whitson, Nate. (2017). “Versioning the entire system vs. versioning by module.” Design Systems Handbook. URL
Rojčyk, Denis. “Versioning design system with Figma, take two.” URL
