🏠

Agile Design Systems

Miriam Suzanne | @mirisuzanne | @oddbird

OddBird

Agile Design Systems

Agile Denver — "2018-10-22T00:00:00.000Z"

Devised Theater == Agile Process

OddBird Faces

2008: OddBird

Application Design & Development

US Military, Coast Guard, and NIH

Client: ORCAS, Field: Health Care

Ironman Championships

Client: SRAM, Field: Professional Athletics

Project Manager

UX Designer & Front End Architect

Contract Work

Launch + Handoff

On A Budget & Timeline

Integrated & Agile Process

Design Systems!

Intersection of Design & Code & Documentation

« Nerd

Nerd »

¯\_(ツ)_/¯

Nerd

Design Systems

Style Guides + Toolkits + Pattern Libraries + ???

Design Systems == Integration

Design & Code & process & tools && ???

You are not MailForce or InstaFace

(unless you are)

Similar Problems

Unique Constraints

(Team Size)

(Team Structure)

(Internal vs. Consulting)

(Is it 1970?)

OddBird Faces

“If it doesn’t have tests, it’s legacy code

Patterns must be repeatable

“If it’s not documented, it doesn’t exist

Patterns must be repeated

Since OddBird thinks about handoff from the beginning, maintenance has been super easy. For example, 100% unit test coverage was a given. I never had to ask for it.

—Sara Taillon, CTO at ORCAS

  1. Why Design Systems?
  2. Pattern Audit

  3. Start with Design Tokens
  4. Integrated Agile Process
  5. Define the API

Existing Apps:

What Do We Have?

Take Screenshots

Organize into Groups

Image by Brad Frost

All Apps:

What Do We Need?

  1. Why Design Systems?
  2. Pattern Audit
  3. Start with Design Tokens

  4. Integrated Agile Process
  5. Define the API

3. Start with Design Tokens

3. Start Somewhere, Stay Agile

Normal Triangle by Maslow Miriam

Cascading Style Sheets

Invented to create re-usable patterns

.warning { color: red; }

Design Tokens (Settings)

Color preview screenshot

CSS Custom Properties

:root {
  --color-text-default: rgb(62, 62, 60);
  --color-text-warning: rgb(255, 183, 93);
  --color-text-error: rgb(194, 57, 52);
}

.example {
  background: var(--color-text-error);
}

👍 Browser Support

👎 Not Meaningfully Organized

👎 Encourages One-Offs

👎 Difficult to Automate

Sass Variables

$color-text-default: rgb(62, 62, 60);
$color-text-warning: rgb(255, 183, 93);
$color-text-error: rgb(194, 57, 52);

.example {
  background: $color-text-error;
}

👎 Not Meaningfully Organized

👎 Encourages One-Offs

👎 Difficult to Automate

Sass Maps

$text-colors: (
  'default': rgb(62, 62, 60),
  'warning': rgb(255, 183, 93),
  'error': rgb(194, 57, 52),
);

.example {
  background: color('error');
}

The Map Problem

$colors: (
  'brand-blue': hsl(195, 85%, 35%),
  'gray': desaturate(map-get($colors, 'brand-blue'), 80%),
);

[ERROR] Undefined variable: "$colors".

Map Self-Reference

$colors: (
  '_brand-pink': hsl(330, 85%, 68%),
  'escher': '#_brand-pink',
  'godel': '#escher',
  'bach': '#godel',
  'kevin bacon': '#bach' ('lighten': 20%),
);

color('kevin bacon')

👍 Meaningful Relationships!

👍 Encourages Patterns

👍 Functional Adjustments

👎 Requires Additional Tooling

Even More Layers

Global Settings » Theme Defaults » Component Details

$brand-colors: (
  '_brand-blue': hsl(195, 85%, 35%),
  '_brand-pink': hsl(330, 85%, 48%),
);

$theme-colors: (
  'text': …,
  'border': …,
  // ...
);

$button-colors: (
  'button-text': …,
  'button-border': …,
  // ...
);

“Code is Communication

—Sarah Drasner

.grid-span {
  width: 23.7288136%;
  margin-right: 01.6949153%;
  padding-left: 08.4745763%;
}
.grid-span {
  width: ((3*4em) + (2*1em)) / ((12*4em) + (11*1em)) * 100%; // 23.7288136%
  margin-right: 1em / ((12*4em) + (11*1em)) * 100%; // 01.6949153%
  padding-left: ((1*4em) + (1*1em)) / ((12*4em) + (11*1em)); // 08.4745763%
}

Code Patterns Add Meaning

.grid-span {
  width: span(3);
  margin-right: gutter();
  padding-left: span(1 wide);
}
// Susy Span
// ---------
/// This is the primary function in Susy —
/// used to return the width of a span across one or more columns,
/// and any relevant gutters along the way.
/// With the default settings,
/// `span(3)` will return the width of 3 columns,
/// and the 2 intermediate gutters.
/// This can be used to set the `width` property of grid elements,
/// or `margin` and `padding`
/// to push, pull, and pad your elements.
/// @example scss - span half the grid
///   .foo {
///     width: susy-span(6 of 12);
///   }
@function susy-span(…) {…}

YAML & Theo

props:
  text_default:
    value: "rgb(62, 62, 60)"
  text_warning:
    value: "rgb(255, 183, 93)"
  text_error:
    value: "rgb(194, 57, 52)"

global:
  type: "color"
  category: "brand-colors"
aliases:
  vermilion:
    value: "7, 83%"
props:
  color_vermilion:
    value: "hsla({!vermilion}, 53%, 1)"
  color_vermilion_dark:
    value: "hsla({!vermilion}, 43%, 1)"

👍 Easier to Export from YAML

👎 Not A Style Language

Know The Trade-Offs

adjust to your needs…

  1. Why Design Systems?
  2. Pattern Audit
  3. Start with Design Tokens
  4. Integrated Agile Process

  5. Define the API

“Less Theory, More Practice

Less Mockups, More Code

(Ugly Helps Focus)

Iterate on Features/Epics

sketch » wire-frame » html markup » back-end » design

Test, Test, Test

Tight Feedback Loop

“Move Fast & Fix Things

Everyone is responsible & collaborating

Make Patterns & Documentation

The Lazy Option

Automate from Structured Code

OddBird’s Herman is based on SassDoc syntax

// SLDS Colors
// -----------
/// These are the colors we stole from SLDS system,
/// in order to create a demo.
/// @group color
/// @colors
$slds-colors: (
  'text-default': rgb(62, 62, 60),
  'text-warning': rgb(255, 183, 93),
  'text-error': rgb(194, 57, 52),
);

/// @colors

Herman Colors

/// @sizes

Herman Scale

/// @sizes {ruler}

Herman Ruler

/// @ratios

Herman Ratios

Design System as Artifact

Code is a Single Source of Truth

Up-To-Date > Comprehensive

Start small, make it easy, and expand…

  1. Why Design Systems?
  2. Pattern Audit
  3. Start with Design Tokens
  4. Integrated Agile Process
  5. Define the API

class="slds-icon slds-icon-text-warning slds-icon--x-small"

Related Class Patterns » Data Attributes

icon color and size classes

data-slds-icon-color="<option>"

.slds-icon-text-default | .slds-icon-text-warning | .slds-icon-text-error

HTML Template Logic is Great

pre-processors for your markup!

Example: Vue

<icon :image="isSuccess ? 'checkmark' : 'x'">

Components Provide Meaning

<my-icon name="gear" />

/// @icons templates/icons/

Herman Icons

Consistency & Accessibility*

*If you bake that into the pattern…

Herman Components

/// Navigation items, with inactive and active states.
/// @group nav
/// @example njk
///   {% import 'nav.macros.njk' as nav %}
///   {{ nav.bar(active="dashboard", items=[…]) }}
.nav-bar {
  /* … */
}

Herman Component

¯\_(ツ)_/¯

Sass-First Breaks Down…

Only Nunjucks For Now…

VueDS (with Theo)

Vue Design Systems

VueDS Components

<docs>
  ```jsx
  <nav-bar active="Dashboard" :navItems="[…]"/>
  ```
</docs>

VueDS Component

I Want Both :)

please…

  1. Why Design Systems?
  2. Pattern Audit
  3. Start with Design Tokens
  4. Integrated Agile Process
  5. Define the API

Meaningful & Structured Code

Readable by Humans & Machines

Inline Documentation

Helps the human factors…

Agile & Integrated Process

Everyone shares a single-source…

Stay in touch…