Design System in Figma

Design System in Figma

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.

image
image
image
image

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.

image

A good naming system helps organise the various projects and files.

image
image
Except for the Design System, the project initials are repeated in the file covers.
Except for the Design System, the project initials are repeated in the file covers.

In the design system project, global colours are one of the key elements:

Base colors that define brand, action, focus and status. Each has various tints and shadows.
Base colors that define brand, action, focus and status. Each has various tints and shadows.

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.

Testing brand colour variations on different monitors & colour spaces.
Testing brand colour variations on different monitors & colour spaces.

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.

image

Other global styles include shadows, shapes, corner radius, etc.

image
image
image