Sketch Brand Library Generator

01. Summary

What was delivered and how

Project info

  • Year: 2020
  • Role: UX Designer

Deliverables

  • Sketch brand library generator
  • Sketch libraries for designers

Outcomes

  • New ways of working
  • New internal tool

02. Background

The problem with previous ways of working and future goals

Problem to solve

In the past, designers and developers at Gametek have not been speaking the same language when it comes to design. This because there hasn’t been a design system in place for both these competencies. Ultimately, this has caused misunderstandings and an inconsistent, heavy user interface for our players that have relied on custom CSS styling.

Project goals

The goal of this project was to align with one of Gametek’s long term goals to have a design system that supports multiple brands. This ongoing initiative had so far resulted in a first version of a design system that was ready for developers to start using, what was missing was a library in Sketch based on the design system for the designers in the company.

Gametek's design system vision

The vision was to build a design system based on a fictive default brand that could be overridden on a brand level with variables such as font family, colors and more. With this in place for developers, the challenge was to create Sketch libraries for multiple brands without doing too much repetitive work and avoiding unnecessary duplication of efforts.

Vision for the design system

03. Design

A flexible and scalable sketch brand library generator

The process

With a design system already in place with brand-specific variables defined in LESS, we started to investigate the possibilities to import the system into Sketch. It was found Sketch only have the capabilities to export CSS styles, not to import them. With further research, we found the Sketch plugin Puzzle Tokens.

Puzzle Tokens

Puzzle Tokens is a Sketch plugin that allows you to specify and apply design tokens (in LESS or SCSS format) to Sketch layers. This was a potential solution for the import restrictions in Sketch, so I downloaded and installed the plugin to see if this could help me import and apply the different brand styles from the design system into Sketch.

Importing brand colors into sketch

Successful importing

The plugin was successful when it came to importing brand colors and with it came lots of other possibilities, making it possible to add typography and UI elements such as buttons, forms, tables, etc. to import. With the plugin, a Sketch library was created for the Default brand which was aligned with the design system by applying the same styling.

Applying styling from the design system into sketch components

04. Final Result

When the Sketch library for the Default brand was finished we successfully imported our brand-specific variables into the library. When importing a brands variables, all colors and font styles got updates to all UI elements in the library, making the task of changing brand styling as easy as changing the imported file.

Applying brand variables to the sketch library

05. Outcomes

A more seamless workflow between designers & developers

Sketch brand library generator

With this project, Gametek now has a flexible and scalable Sketch brand library generator to use when designing for different brands. It also enables a more seamless workflow between designers and developers.

Common vision, one source of truth

Designers and developers are thanks to this project working with the same design system. Both competences can make requests to follow the design system which is now the same across the different tools used, which will lead to a more consistent user interface for our customers that will not have to rely on custom CSS changes.

Previous project