From nothing to state of the art

- How we build design systems, for all!

Alexander Vassbotn Røyne-Helgesen

@phun-ky | @phun_ky | https://no.linkedin.com/in/alexanderroyne/en | Manager@Bekk

4

24

15

38

10

A zero dependency package to show specifications on components in your design system documentation

A tool to visualize design token relations and inheritance

Responsive Documentation Examples (rde) enables you to fake and display your responsive components in real life media queries

With Demo, you can preview and update your component in real time

#hailtothechefbaby

Disclaimer*

Thank you for listening!

👋

The most developed design systems are the ideal of what we want our products to be — holistic, systematic and well-documented wonders.

Enabling developers and designers to speak the same language JavaZone 2020.12.02

What is a 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

A whole lotta moving parts

Botox

1

10+

50+

10+

8

10

50+

900+

100+

Different cultures and siloes

Majority of developers are backend developers

Majority of designers are interaction designers

Most teams do not have a dedicated frontend or designer

All preprocessor techs are used, including vanilla CSS

A plethora of frameworks and CMSes

But some teams just stick with the basics

Who would consume the design system?

Plattform/framework agnostic

Support all preprocessors

Framework agnostic JS

Start with the basics

@ids-core

@ids-js

@ids-wc

@ids-react

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

Serve all

ALL

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 $ids-color-blue-100 here
2: Здесь мы используем $ids-color-blue-100
3: Vi bruker $ids-color-blue-100 her
4: Šeit tiek izmantota $ids-color-blue-100
Enabling developers and designers to speak the same language JavaZone 2020.12.02
import { DesignToken } from '@microsoft/fast-foundation';
import {IDS_COLOR_BLUE_100} from '@ids-core/color/src/variables/js/variables.js'

export const accentColor = DesignToken.create<string>('accent-color');

const primaryButton = document.querySelector('my-element') as FASTElement;

accentColor.setValueFor(primaryButton, IDS_COLOR_BLUE_100);
import React from 'react';
import {IDS_COLOR_BLUE_100} from '@ids-core/color/src/variables/js/variables.js'

const Button = ({...props}) => (
  <button
    …
    style={{
      backgroundColor: IDS_COLOR_BLUE_100
    }}
  >…</button>
)
Enabling developers and designers to speak the same language JavaZone 2020.12.02
@import '@ids-core/color/src/variables/less/variables.less';

a {
  color: @ids-color-accent; /* #0054f0 */
}
@import '@ids-core/color/src/variables/scss/variables.scss';

a {
  color: $ids-color-accent; /* #0054f0 */
}
@require '@ids-core/color/src/variables/stylus/variables.styl'

a
  color $ids-color-accent /* #0054f0 */
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

Microcopy

Enabling developers and designers to speak the same language JavaZone 2020.12.02
{
  "ids": {
    "copy": {
      "personalia": {
        "gender": {
          "en": {
            "value": "gender"
          },
          "no": {
            "value": "kjønn"
          },
          "sv": {
            "value": "kön"
          },
          "da": {
            "value": "køn"
          },
          "fi": {
            "value": "sukupuoli"
          },
          "et": {
            "value": "sugu"
          },
          "lv": {
            "value": "dzimums"
          },
          "lt": {
            "value": "lytis"
          },
          "ru": {
            "value": "пол"
          },
          "kl": {
            "value": ""
          }
        }
      }
    }
  }
}
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

What about the non-tech consumers?

Enabling developers and designers to speak the same language JavaZone 2020.12.02

Copy and content guidelines derived from brand

Enabling developers and designers to speak the same language JavaZone 2020.12.02

Accessibility

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
A website is not necessarily universally designed, even though it is in line with the current requirements and guidelines
Enabling developers and designers to speak the same language JavaZone 2020.12.02
$ratio = 7

getCorrectContrastColor($bgcolor)
  if(contrast($bgcolor, $white).ratio > $ratio){
    color $white
  } else if(contrast($bgcolor, $darkerGrey).ratio > $ratio){
    color $darkerGrey
  } else {
    color $darkerSlate
  }
Enabling developers and designers to speak the same language JavaZone 2020.12.02

Documentation

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
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
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 | https://no.linkedin.com/in/alexanderroyne/en | Manager@Bekk