This week’s topic was Version Control and why it is essential for development. While reading this week’s material, mostly around developers, it got me thinking, how about designers?
The evolution of design tools
For Version Control, Git is a popular choice among developers to save their code in versions and branch out for other projects or experiments. How about designers? In my journey to interaction design, I switched my primary design application at least three times. Each of the switches provided some new functionality and accommodated the collaborative work culture evolving over the past few years.
The early web, bitmap design
I began designing with Adobe Photoshop back in early 2000. I used Photoshop and Fireworks to convert pixel-perfect screens to multiple images and create animated GIFs. With the whole Creative Suite, I could also import the design into Flash to create dynamic UIs. I recalled manually saving the PSD files from time to time because the Mac would crash randomly due to the lack of memory. I also needed to keep the design in multiple files for branching out some standard components to import them into other screens. The process was time-consuming. The main issue was that each PSD file would only contain one screen at a time, and you would easily reach fifty to hundreds of files quickly. That made file management extremely manual. Overriding files to the wrong screens happened a lot as well.
Responsive and vector-based design
With the introduction of mobile devices, a.k.a. iPhone, responsive design started to kick off. Designing screens for various screen sizes became a standard. That was when bitmap-based design applications became obsolete (also Flash – RIP). Imagine an already crowded folder, now you multiple the files two or three times because of the screens you needed for mobile in landscape and portrait sizes. A vector-based design application could let you quickly duplicate and transform the dimensions of the screens to become a lot easier to use. Illustrator became my go-to tool to replace Photoshop. It supported multiple artboards that also reduced the number of files. It also maintained many features like layers and integration with Fireworks, so not all the design processes had to be changed. One bonus was the rise of SVG format, which you could quickly export from Illustrator to use on the web. I no longer needed to provide multiple icon files. By that time, the only issues were growing file size, and you still needed to manually save the file into different versions if you wanted to reverse back or retrieve some older design. The first problem demands significant powerful computers, and the latter, still, until today, has not been fixed by Adobe by adopting macOS’ Version Control feature.
A new native application built for the web, and UX designers
Sketch quickly became popular among the UX design community. Sketch used native macOS APIs with fantastic performance. The developer seemed to tickle all the pain points I mentioned earlier. The switch to Sketch was not as smooth as the switch from Photoshop to Illustration, as a lot of new shortcuts and workflow had to get used to. But the learning curve was bearable, and there were a lot of tutorial videos available. I also paired Zeplin with Sketch as it provided easy versioning and online storage. It was so much easier to share the design files with other designers. However, multiple designers would not be able to edit the file simultaneously, so many branching and merging still had to be done.
Collaboration and branching
Working in a large design team at Indeed with over 360 members meant we had to do file management differently. As the design team grows, designers are now focusing on different portions of our websites, apps, emails, and design system. We made our switch to Figma, albeit over three years ago. Figma allowed us to publish a design system to use across thousands of files. There are so many benefits of using Figma, and one of them is the collaboration feature. We have about five design team members and three PMs working together in the same file in my project team. We can instantly see what others create, add a comment, or jam quickly during our meetings. The branching feature in Figma also allows me to base swiftly some designs of the others to iterate on some A/B tests. We could also directly create sharable prototypes for our researchers or upload them to usertesting.com for some quick research sessions.
In conclusion to version control, I think design tools have now evolved. Although we don’t use Git to manage our files, our tools directly provide the designers with all the necessary functionalities to create a great workflow with version control, branching, and collaboration.