Design Systems 2.0
Creating Consistent User Experiences
Micah Godbolt - @micahgodbolt
Micah Godbolt
Twitter: @micahgodbolt
Book: fea.pub
Slides: bit.ly/designsys2
Where We Left Off
What is a Design System?
This Worked �In Isolation
bit.ly/designsys2
This Worked �In Isolation
bit.ly/designsys2
And Then I Joined Microsoft
Many Sites
bit.ly/designsys2
Many Themes
bit.ly/designsys2
Many Ways of Communication
bit.ly/designsys2
Making Design Systems Scale
A Story in Two Slides
CSS is easy!
CSS is HARD!!!
bit.ly/designsys2
All Situations
bit.ly/designsys2
One System Multiple Platforms
Values in CSS
.my-button {
background: #0078d7;
color: #fff;
font-size: 16px;
}
.my-button:hover {
background: #004578;
}
Values in Tokens
// Tokens.json
{
"BUTTON_BG_COLOR": "#0078D7",
"BUTTON_TEXT_COLOR": "#FFFFFF",
"BUTTON_FONT_SIZE": "16",
"BUTTON_HOVER_BG_COLOR": "#004578"
}
Values in Tokens
.my-button {
background: $BUTTON_BG_COLOR;
color: $BUTTON_TEXT_COLOR;
font-size: $BUTTON_FONT_SIZE;
}
.my-button:hover {
background: $BUTTON_HOVER_BG_COLOR;
}
One Platform Multiple Systems
Version 5 Component
Version 6 Component
Scoped Styles in Parent Class
Scopes Styles in Parent Class
// v5/my-styles.scss
.cat:after { content: "🐶" }
// v6/my-styles.scss
.cat:after { content: "😻" }
Scoped Styles in Parent Class
// main.scss
.v6 { @import 'v6/my-styles'}
.v5 { @import 'v5/my-styles'}
Scoped Styles in Parent Class
// main.css
.v6 .cat:after { content: "😻" }
.v5 .cat:after { content: "🐶" }
Scoped Styles in Parent Class
<!-- html -->
<div class="v5">
<div class="cat">🐶</div>
</div>
<div class="v6">
<div class="cat">😻</div>
</div>
Scoped Styles in Parent Class
<!-- html -->
<div class="v5">
<div class="cat">🐶</div>
</div>
<div class="v6">
<div class="cat">😻</div>
</div>
Scoped Styles in Parent Class
<!-- html -->
<div class="v5">
<div class="cat">🐶</div>
<div class="v6">
<div class="cat">🐶</div>
<div>
<div>
Class Suffix
Class Suffixes
// v6/my-styles.scss
.cat_v6:after { content: "😻" }
// v5/my-styles.scss
.cat_v5:after { content: "🐶" }
Class Suffixes
<!-- html -->
<div class="v5-component">
<div class="cat_v5">🐶</div>
</div>
<div class="v6-component">
<div class="cat_v6">😻</div>
</div>
Class Suffixes
<!-- html -->
<div class="v5-component">
<div class="cat_v5">🐶</div>
<div class="v6-component">
<div class="cat_v6">😻</div>
</div>
</div>
CSS Modules
bit.ly/designsys2
CSS Modules
// v6/my-styles.scss
.cat:after { content: "😻" }
// v5/my-styles.scss
.cat:after { content: "🐶" }
CSS Modules
// main.js
import v6styles from "./v6/my-styles.scss";
import v5styles from "./v5/my-styles.scss";
CSS Modules
v6Styles = {
'cat': 'cat_9xjso1h'
}
CSS Modules
v6Styles = {
'cat': 'cat_9xjso1h'
}
CSS Modules
document.body.innerHTML = `
<div class=${v6styles.cat}></div>
<div class=${v5styles.cat}></div>
`;
CSS Modules
<!-- html -->
<style>
.cat_9xjso1h:after { content: "😻" }
</style>
<div class="cat_9xjso1h">😻</div>
CSS Modules
<!-- html -->
<style>
.cat_9xjso1h:after { content: "😻" }
.cat_l2n5lh2:after { content: "🐶" }
</style>
<div class="cat_9xjso1h">😻</div>
<div class="cat_l2n5lh2">🐶</div>
All People
bit.ly/designsys2
One Platform Many Themes
CSS Variables
bit.ly/designsys2
CSS Variables
// my-styles.css
:root { --cat: "😻"; }
CSS Variables
// my-styles.css
:root { --cat: "😻"; }
.cat:after { content: var(--cat) }
CSS Variables
document.documentElement.style.setProperty(
'--cat', '"🐶"'
);
CSS Variables
<div class="cat">🐶</div>
CSS Variables
// my-styles.css
.cat:after {
content: "[token:cat, default: 😻]"
}
One Page Many Themes
CSS in JS
bit.ly/designsys2
bit.ly/designsys2
Incoming Pseudo Code!
CSS in JS
let styles= {
background: 'blue',
color: 'white'
}
const Button = <button css={{styles}}>
CSS in JS
<Button>
Click Me
</Button>
CSS in JS
.sjo2hs9 {
background: blue;
color: white;
}
CSS in JS
<button class="sjo2hs9">
Click Me
</button>
CSS in JS
const Button = <button css={{styles, custom}}>
CSS in JS
<Button
custom={background: green}
>
Click Me
</Button>
CSS in JS
.u3lj1uy {
background: green;
color: white;
}
CSS in JS
<button class="sjo2hs9">
Click Me
</button>
<button class="u3lj1uy">
Click Me
</button>
All Sites
bit.ly/designsys2
Some Sites
Like To Talk
bit.ly/designsys2
Some Sites
Like To Talk With You
bit.ly/designsys2
Making Design Systems Conversational
bit.ly/designsys2
Buttons !== Links
bit.ly/designsys2
Links Take You To Other Pages
Buttons Perform Actions On The Page
Buttons Perform Actions On The Page
Buttons Perform Actions On The Page
Buttons Perform Actions On The Page
// Pseudo Code
Buttons Perform Actions On The Page
onSelect:
add(name)
onDeselect:
remove(name)
Buttons Perform Actions On The Page
items = [
email,
notebooks,
themeing
]
Buttons Perform Actions On The Page
onClick:
download(items)
Buttons Perform Actions On The Page
let items=[];
<Button onClick=download(items)>
<ListItem
onSelect = add(item)
onDeselect = remove(item)
>
Interfaces need to be designed
bit.ly/designsys2
My History with Interfaces
My History with Interfaces
ListItem
title
date
quantity
shared
onSelect
onDeselect
My History with Interfaces
Hey Backend Team
Here’s the stuff for the List Item: Title, Date, quantity, shared, onSelect, onDeselect.
I’m on vacation next week. Have fun!
My History with Interfaces
ListItem Docs
title is a string and required
date is a date and required
quantity is a number and not required
shared is either true or false
onSelect is a function that takes…
onDeselect is a function that takes…
My History with Interfaces
ListItem.json (partial list)
props: {
title: { type: string, required: true },
quantity: { type: number, required: false },
shared: { type: boolean, required: false }
}
My History with Interfaces
// TypeScript
interface Item = {
title: string;
quantity?: number;
shared?: boolean;
}
My History with Interfaces
// TypeScript
interface Item = {
title: string;
quantity?: number;
shared?: boolean;
onSelect?: (item: Item, items: Item[]) => void;
}
My History with Interfaces
My History with Interfaces
The Future of Design Systems
bit.ly/designsys2
Is JavaScript
bit.ly/designsys2
Does this mean I need to become a JavaScript Ninja/Rockstar/Unicorn/Pirate/Circus Performer?
bit.ly/designsys2
Interface Design
CSS in JS - Runtime CSS
JavaScript isn’t replacing �HTML and CSS
JavaScript isn’t replacing �HTML and CSS
It’s making the HTML and CSS in our Design Systems �more powerful
We don’t have to quit doing what we love to learn JavaScript
We don’t have to quit doing what we love to learn JavaScript
We need to the find ways that JavaScript can power the things we love
We don’t need more JavaScript Devs
We don’t need more JavaScript Devs
We need more JavaScript empowered
Front-end Devs
Thankyou!
bit.ly/designsys2