I recently worked on quite a large and complex web application that required a significant redesign and Design System implementation.
During the product discovery period, I have created a vast number of new features while improving already existing functionality. I have also created a design System that grew exponentially over time.
It was crucial to document all the work I have done and keep track of all the changes and improvements I have made after many rounds of user testing and business requirements adjustments.
I knew I had to have an efficient system of finding my way around those records and, at the same time, making it easy for other members of the team, especially developers, to find what they need.
I wanted to have a system in place where product owners and managers, but also stakeholders were able to look at the history of each feature so that they could understand the progress and evolution of the product. A timeline that would help me in communicating those changes more effectively.
Version control in design is not straightforward. Designers are quite flexible in that field and adopt different, quite open, often convoluted ways of working that suit their environment at that time. I have worked with many teams in larger corporations and smaller startup-style companies, who embraced very flexible, not always practical methodologies for storing and sharing their files. Still, none of them seemed effortless, while the projects grew into an extensive maze of data. Finding your way around those can be a daunting task, consuming valuable time you might not have.
Sharing files on a secure server accessed by all designers is always a sensible place to start, but what is the latest version and who made those recent changes. There’s a lot of useful metadata that is unfortunately lost or very difficult to retrieve.
I have experimented with a few automated version control systems and conclusively opted for Abstract, a version control system that allows designers to work just like developers, keep track of all changes and share their designs with ease.
And here’s how it works:
If you are familiar with GitHub this should be an easy and natural learning process as the concept mimics GitFlow. The only difference is that you are not ‘pushing’ code; instead, you are updating imported Sketch artboards to a specific branch and then merging it with the master file. A master file is the ‘final’ version of your design and the source of truth for all involved.
Being able to see the whole history of your file is arguably the most powerful tool Abstract has to offer.
Each commit is a specific change applied to a Sketch artboard by a designer or multiple designers working on the project. With all the alterations you make over the time, Abstract creates a timeline of changes that are typically labeled with meaningful commit messages (i.e., ‘changed the font size to 14px), displaying the date of change and comments made by anyone with access to the project.
Additionally, front-end engineers have access to ‘inspect view’ where they can select each element of the design and retrieve CSS variables. This valuable feature allows for effective handover and collaboration between designers and developers, especially if they are working in remote locations.
Design System made easy
Another powerful feature is the ease of importing, editing, and sharing a Design System between different projects. Every time a file is modified, Abstract opens Sketch automatically with your Design System already installed, there’s no need to import it to Sketch or use any plugins.
Any changes made to the library are equally recorded and stored on a timeline in Asbtract.
Collections
Surely it’s great for designers to be able to preview all Sketch artboards with such detail (usually you’d have to open the file to be able to view a specific design which can sometimes take quite a lot of time). Still, it’s not always ideal for other colleagues to browse through all those designs; they will be interested in the ‘final,’ ‘signed off’ design. Abstract allows creating collections — carefully curated groups of Artboards that are intentionally put together to share with individuals or a group of stakeholders. They enable designers and other team members, such as developers, product managers, and UX copywriters, to focus attention directly on the work at hand without all the extras a designer is concerned with (i.e., multiple artboards and versions).
To share your designs, you supply everyone with a link only once. Any further changes made to that design will appear under the same link. It’s useful when updating visuals attached to a JIRA task.
There’s also a presentation mode where you can quickly import designs and user journeys you want to share. Again, if you need to make any amends, the prototype will update automatically.
I highly recommend you give it a try Abstract and see how this can make your design workflow and collaboration more comfortable and above all, efficient.
Thanks for stopping by.
