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

The technical perspective of communicating design with a design system Javazone 2021

By Alexander Vassbotn Røyne-Helgesen

The technical perspective of communicating design with a design system Javazone 2021

Today, more and more development is done in tight relation with designers and UX-designer, triggering the need for a design system that is tightly coupled with both design and code. Up until recent years, the design communication has gone one way, from the designers to the developers. This talk covers the process I came up with on securing design/develop communication both ways when building a design system. We will cover generation of preprocessor styles with design tokens and how we generate our design systems continuously. I will also cover the importance of a design system and on how we make sure the documentation is clear, understandable and how we emphasize the end user AND the user of the design system. With weight on accessibility for the end user, how we create documentation examples and the technical aspects tied into the design system.

  • 58
Loading comments...

More from Alexander Vassbotn Røyne-Helgesen