Goals: to improve consistency between various designs, reduce time to deliver standard designs, simplify hand-off between designers and engineers, document patterns & usages.
Who: Hackages, a tech edu startup in Brussels, Belgium
When: Spring 2019 - now (in progress)
When I joined Hackages in September 2018, the team was relying on Sketch & Illustrator for design. All design and assets were grouped in just a handful of files. As I was the second designer in the team, collaboration on these heavy files quickly became an issue.
I introduced Abstract (git versioning for design files) to my colleague. It allowed us to work simultaneously on the same files, and also offered a nice inspect view for hand-off to engineers. After a while we started moving components into global libraries, but even with just 2 designers the whole process started to feel clumsy and complicated.
Meanwhile I experimented with Figma, as it promises a streamlined workflow for teams. We soon realised that the various advantages outweighed the few shortcomings. Collaboration was so much easier: seeing what your colleague is working on is just a click away. No checkout process of branches and downloading or syncing Sketch files.
A few weeks before the team headed to Tokyo, we started preliminary work for the design system. I was reading up on various companies' road towards a working design system, and documenting this in Notion. My colleague created an inventory of every possible design element in our current websites.
We also reconsidered our options for design tools. In the end we started working with Figma as the learning path from Sketch was minimal: it operates in a very similar way.
A good naming system helps organise the various projects and files.
In the design system project, global colours are one of the key elements:
A lot of experimentation has been done for each individual colour, so that it fits with the others in terms of saturation, lightness and contrast.
A lot of time was spent on typography, which is arguably as important as the colouring system. We decided on two fonts with different weights based on light or dark background.
Other global styles include shadows, shapes, corner radius, etc.