Enabling developers and designers to speak the same language

- Using design system and design tokens to work together

Alexander Vassbotn Røyne-Helgesen

Principal Engineer, Knowit Objectnet, Oslo - Norway
alexander.royne-helgesen@knowit.no | @phun_ky | @phun-ky

  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

👋

🍺

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

Principal Engineer, Knowit Objectnet, Oslo - Norway
alexander.royne-helgesen@knowit.no | @phun_ky | @phun-ky