Whether you are doing it well or have chosen to ignore it, in a world where the gap between design and engineering continues to close in, version control for UX designers is definitely here to stay.
Without version control, you’re playing a game of chance. We’re all guilty of naming our files ‘codename_final_FINAL, or ‘client_project_v2.7 ‘… Relying on file naming conventions, whether strict or loose, creates an increased possibility of overwriting files or duplicating effort. Good version control can keep you and your design team from losing work and precious time.
"Designers still use shockingly manual and even arcane methods of managing versions."
Khoi Vinh, Principal Designer at Adobe
Clouds incoming
We are moving ever further away from the days of having physical files sitting in multiple locations, towards a world where all our files sit exclusively in the cloud. That’s not without it’s dangers, though – until even recently, you might have shouted across the office to make sure no-one opened the same file as you, and then again to say it was safely saved in Dropbox (insert sweating emoji!).
Leading UX design tools such as Figma and Sketch have introduced workflows where all our design files can be accessed via the cloud, allowing us to openly collaborate together in a single file (so cool!).
For UX design teams, staying on top of what is the most recent piece of work or being able to roll back to a previous version are paramount. If you can’t accurately control versions of your work, you open your team up to multiple levels of pain – conflicting files, lack of accountability (‘who edited this…?’), difficulties with communication and feedback, and wasted time.
Version control and design systems
A good design system catalogs and documents all the different elements, components and styles that make up your UX and UI, ensuring consistency across your product. However, if you’re not practising version control, your design system could potentially become useless.
Design systems exist to remove or reduce inconsistencies within a product. If you have multiple designers working collaboratively on the same component without practising version control, those inconsistencies can start to creep back into your product. And when it comes to hand-off, engineers will have mixed views of components and you can end up with differing experiences and variants.
It is crucial to have a defined process, a set of tools, and a clear understanding of roles and responsibilities when it comes to maintaining your UX design system.
Best practices include:
- Establish ownership – a dedicated person, people, or team who is the advocate of the system and oversees changes
- Define your workflow for accepting/rejecting changes – there’s no one way of doing this, so find something that works for your team and your circumstances
- Create a single source of truth – one or more libraries that act as the definitive reference point for your team
Our UX design toolkit
Over the years at 383, we’ve reviewed plenty of design and version control tools and tried out all sorts of conventions and processes. Finding what works for your individual design team requirements inevitably takes a bit of trial and error – here’s some of the options we’ve played with.
In previous years when our primary design tool of choice was Sketch, we tried plugins like Plant and applications like Kactus, but eventually settled on Abstract, providing a full solution for controlling versions and hand-off to engineers. We could work on the same file at once, with the ability to merge changes when finished. The owner or handler of the file could approve changes, check them visually, go back to previous versions if needed, and comment on designs to decide together.
Recently, we’ve switched to Figma as our UX design tool of choice, which solves our version control needs too. Having one product that does it all made our eyes light up for all the obvious reasons – collaboration, productivity, cost savings, etc!
Our organisation licence allows us to use common version control workflows, such as branching. Branches allow contributors to create their own working environment that is isolated from others whilst, at the same time, connected to the single source of truth. Once contributors complete their work, it can be sent for review and then merged with other branches so it becomes available to all contributors.
The close parallels in terminology between this and engineering-led version control enables a positive movement towards engineering and design collaboration, which works really well for us as a digital product studio.
Figma’s version history feature autosaves versions of files, including versions you create when you publish changes to a library. We can see a snapshot in time and jump between them, easily restoring older versions. The flexibility this gives allows UX design teams to easily step back, or even duplicate versions of files to create manual branches for engineering hand-off.
Finding your perfect fit
Getting version control right in UX design offers many gains – in time, creativity, collaboration, quality of output, shared knowledge, and more.
If you are looking for a solution, start by looking at the issues you and your team face, before reviewing the various product solutions that are out there. It will take time to find the right tool and configure it the way you like it, but in the long run it will help you immensely.
