The technical perspective of communicating design with a design system

Alexander Vassbotn Røyne-Helgesen

Manager, Front-end Developer @ Bekk

If Design System

What is a design system?

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

Why do we have a design system?

Increase brand trust

Reduce redundancy

Single source of truth

Speed of delivery

Shared language with devs/designers

Consistency

What we deliver

Code

Documentation

Design

Patterns

@if-design-system

@if-design-components-react

@if-design-components-javascript

Repositories

if-boilerplates

if-design-components-react

if-design-components-javascript

if-design-system

if-design-system-site

if-design-components-swift

if-design-components-<your framework here>

Monorepo

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.”

With design tokens, you can capture low-level values and then use them to create the styles for your product or app. You can maintain a scalable and consistent visual system for UI development.”

props:
  - blue:
    value: 'rgb(0,84,240)'
    hex: '#0054f0'
    realName: 'megamanHelmet'
    name: 'color-blue-accent'
    stylus: '$color-blue-accent'
    scss: '$color-blue-accent'
    less: '$color-blue-accent'
    versionName: 'blue'
    boldName: BL 1
    rgb: 'rgb(0,84,240)'
global:
  type: color
  category: accent
  • SCSS
  • LESS
  • Stylus
  • JS modules
  • XML
  • JSON
@import '@if-design-system/color/accent.less';

a {
  color: @color-blue-accent; /* #0054f0 */
}
import React from 'react';
import accentColor from '@if-design-system/color/src/accent.js'

const Button = ({...props}) => (
  <button
    type="button"
    onClick={...}
    onKeyPress={...}
    style={{
      backgroundColor: accentColor.blue.rgb
    }}
  >
    {title}
  </button>
)

Documentation

Clear examples

$ratio = 7

getCorrectContrastColor($bgcolor)
  if(contrast($bgcolor, $white).ratio > $ratio){
    color $white
  } else if(contrast($bgcolor, $darkerGrey).ratio > $ratio){
    color $darkerGrey
  } else {
    color $darkerSlate
  }

Accessibility

Design

UI Kits for XD and Sketch