Where should the source of truth lie in a Design System?

Alexander Vassbotn Røyne-Helgesen

@phun-ky/@phun_ky | consultant@bekk

  1. Introduction - Brief history of web design
  2. The issue with one way design communication
  3. How to enable communcation both ways with design systems and design tokens

Agenda

A brief history of web design

Enabling developers and designers to speak the same language JavaZone 2020.12.02
Enabling developers and designers to speak the same language

1990

Adobe Photoshop 1.0

The first browser

1991

HTML

1992

BBEdit HTML and text editor

Les Horribles Cernettes, one of the first image on the Web

1994

The first web banner

Geocities

1995

The term User Experience

Adobe PageMill 1.0

JavaScript

Frontpage 1.0

1996

CSS 1.0

Macromedia Flash

1997

Web Accessibility Initiative

DHTML

Macromedia Dreamweaver

1998

Macromedia Fireworks

CSS2

Adobe ImageReady 1.0

Google

1999

Web 2.0

WCAG 1.0

Adobe Photoshop 5.5

2000

XHTML 1.0

FWA - Favorite Website Awards

DeviantArt

2001

Media Queries

SVG

Audi.com - First "reponsive" website

2003

CSS Zen Garden

MySpace

2004

CSS Sprites

2006

jQuery

Sass

2007

iPhone

CSS Grid

2008

Chrome

WCAG 2.0

2009

LESS 1.0

CSS Flexbox

Node

2011

Stylus 0.0.1

Twitter Bootstrap

2012

CSS3, Media Queries

2013

React

2014

Material Design

HTML 5

2010

Responsive Web Design

Sketch 1.0

Web 0.5

Web 1.0

Web 1.5

Web 2.5

Web 2

Web 3

Web 3.5

Enabling developers and designers to speak the same language

1999

1997

2000

2007

2012

1998

1991

1994

2001

2011

Macromedia Fireworks

CSS2

Adobe ImageReady 1.0

Google

1992

BBEdit HTML and text editor

Les Horribles Cernettes, one of the first image on the Web

The first web banner

Geocities

Web 2.0

WCAG 1.0

Adobe Photoshop 5.5

XHTML 1.0

FWA - Favorite Website Awards

DeviantArt

CSS Zen Garden

MySpace

CSS Sprites

iPhone

CSS Grid

2009

LESS 1.0

CSS Flexbox

Stylus 0.0.1

Twitter Bootstrap

CSS3, Media Queries

Web Accessibility Initiative

DHTML

Macromedia Dreamweaver

1995

The term User Experience

Adobe PageMill 1.0

JavaScript

Frontpage 1.0

Media Queries

SVG

Audi.com - First "reponsive" website

2013

React

2014

Material Design

HTML 5

2010

Responsive Web Design

Sketch 1.0

1996

CSS 1.0

Macromedia Flash

2006

jQuery

Sass

2008

Chrome

WCAG 2.0

1990

Adobe Photoshop 1.0

The first browser

HTML

2004

2003

Node

👋

🍺

Enabling developers and designers to speak the same language JavaZone 2020.12.02

Development is done in tight relationship with designers

Enabling developers and designers to speak the same language JavaZone 2020.12.02

Communication is a one way street

// Two figures with speech bubbles

Designer: Do this
Developer: OK!
...

Developers treats design as  a single truth, they just trust this. [They] do not question it.

Enabling developers and designers to speak the same language JavaZone 2020.12.02

Developers are left to their own devices

// A reference to the classical "What the client really wanted" strip

1: "What the designer sketched..."
2: "How the developer implemented it.."

😟

Enabling developers and designers to speak the same language JavaZone 2020.12.02

Designs are not updated with changes from implementation

Enabling developers and designers to speak the same language JavaZone 2020.12.02

Design changes needs to be communicated both ways

Enabling developers and designers to speak the same language JavaZone 2020.12.02

Developers and designers often speak different languages

// Two figures with speech bubbles

1: Parlez vouz REM?
2: Que?
Enabling developers and designers to speak the same language JavaZone 2020.12.02
Enabling developers and designers to speak the same language JavaZone 2020.12.02

They come from different professions*

Enabling developers and designers to speak the same language JavaZone 2020.12.02

We want them to speak the same language (and use the same context)

// Two figures with speech bubbles, a reference to the "Dirty Hungarian 
// Phrasebook" sketch by Monty Python

1: My hovercraft is full of eels
2: What?
Enabling developers and designers to speak the same language JavaZone 2020.12.02

How do we enable designers and developers to speak the same language?

🤔

Enabling developers and designers to speak the same language JavaZone 2020.12.02

Design system

  1. Provides consistency in the visual design
  2. Acts like a single source of truth
  3. Enables quick onboarding
  4. Increases brand trust through unified brand experiences
  5. Increases speed of delivery from idea to production
  6. Creates a shared language between developers and designers
  7. Reduces redundancy
  8. Increases internal sharing
Enabling developers and designers to speak the same language JavaZone 2020.12.02

Use the same naming conventions*

// Reference to the Red Dward episode "Camille", where Lister
// tries to teach Kryten to lie

1: What is this? (Holding up an apple)
2: It's the Bolivian Navy on manoeuvres in the South Pacific!
Enabling developers and designers to speak the same language JavaZone 2020.12.02

Get to know the tools

Enabling developers and designers to speak the same language JavaZone 2020.12.02

Get to know the domain

Enabling developers and designers to speak the same language JavaZone 2020.12.02

Design tokens

... is a central location to store design related information such as colors, fonts, animations and so on. These raw values can then be transformed and be formatted to fit the needs of any platform.

Enabling developers and designers to speak the same language JavaZone 2020.12.02

Serve all plattforms, and use design tokens in tools

Enabling developers and designers to speak the same language JavaZone 2020.12.02

Talk about the same thing, with the same wording

1: We use the $color-infographic-red here
2: Здесь мы используем $color-infographic-red
3: Vi bruker $color-infographic-red her
4: Šeit tiek izmantota $color-red
Enabling developers and designers to speak the same language JavaZone 2020.12.02

Add context to ensure a common language

Enabling developers and designers to speak the same language JavaZone 2020.12.02

Increases meaning to communication

Enabling developers and designers to speak the same language JavaZone 2020.12.02
  1. We have a design system
  2. We talk the same language
  3. And we have design tokens

The process, an example

Enabling developers and designers to speak the same language JavaZone 2020.12.02

Task: Change focus color for a11y reasons

Enabling developers and designers to speak the same language JavaZone 2020.12.02

Current color information  is in the token

$color-base-orange-100
|-$color-states-focus
Enabling developers and designers to speak the same language JavaZone 2020.12.02
$color-base-blue-100
|-$color-states-focus
Enabling developers and designers to speak the same language JavaZone 2020.12.02

Edit raw values

{
  "color": {
    "states": {
      …
      "focus": { "value": "{color.base.blue.100.value}" }
    }
  }
}
Enabling developers and designers to speak the same language JavaZone 2020.12.02

Build and release

  1. Stylus
  2. LESS
  3. Sass/SCSS
  4. Android
  5. Flutter
  6. iOS (+ swift)
  7. Js
  8. JSON
  9. Sketch
Enabling developers and designers to speak the same language JavaZone 2020.12.02

Figma Tokens

Enabling developers and designers to speak the same language JavaZone 2020.12.02

Design change is communicated both ways

Enabling developers and designers to speak the same language JavaZone 2020.12.02

The fantasy

  1. Developer updates design related code from other sources than the sketch
  2. When released, the design is also updated in the design sketches
  1. The designer updates design in the sketch
  2. The design update triggers a PR to be evaluated into the code

API

Enabling developers and designers to speak the same language JavaZone 2020.12.02

I'm not a developer, I am a facilitator

Enabling developers and designers to speak the same language JavaZone 2020.12.02

Thank you for listening!

Enabling developers and designers to speak the same language JavaZone 2020.12.02

Alexander Vassbotn Røyne-Helgesen

@phun-ky/@phun_ky | consultant@bekk