A practical guide to building your design system infrastructure {#Cover}

Varya Stepanova

A practical guide to building your design system infrastructure

line line line line line line line line line line

Varya Stepanova, Design Systems Expert / varya.me

@ Patterns Day, June 28th, 2019. Brighton, England

Me

Varya Stepanova

Expert in Design Systems
Frontend enginner, service designer

Contacts

Areas of expertise

Design systems: production and governance,
pattern libraries, style guides, UI/UX, front end.

Design system at Elisa

What is design systems?

Design Systems

To react or not to react?

Living style guides

💁

Only for React libraries or..?

How to document?

brand-button.scss

// Brand button
//
// markup:
// <button
//   class="brand-button">
//     Click here!
// </button>

BrandButton.md

# Brand button
```
<button
  className="brand-button">
    Click here!
</button>
```

How to document?

brand-button.scss

// Brand button
//
// markup:
// <button
//   class="brand-button">
//     Click here!
// </button>

BrandButton.md

# Brand button
```
<button
  className="brand-button">
    Click here!
</button>
```

React for non-React

Designers update libs

React = friendly environment and tools

This is CSS

Visual regression tests

Visual regression tests

with Styleguidist or Storybook

Get visual tests with one npm install

Style Guide vs Design System

Design systems - connecting people

Design systems

Connecting People

Single point of truth

What is it for me?

  • Release notes
  • Documentation

  • Tone of voice
  • Design specs

  • Strategy
  • Roadmap

  • Money spent
  • Money saved

Design system website

How Gatsby works

Credits: Robert Ngo, Decoupling Drupal with Gatsby

Design system website

example of structure

content/
  pages/
    docs/
    about/
      team/index.md
      workflow/index.md
      index.md
  posts/
    welcome-to-new-ds-website/
      index.md
      thumb.png
  • Home
  • Docs
  • Style Guide
  • Blog
  • About

Use your superpowers

React components in texts

components/BodyText.js

const renderAst = new rehypeReact({
  createElement: React.createElement,
  components: {
    'comp-my-button': MyButton,
  },
}).Compiler;

pages/my-page/index.md

title: Title of your page
---
Page text and living
<comp-my-button></comp-my-button>.

React components in texts, v2

gatsby-config.js

resolve: `gatsby-mdx`,
options: {
  globalScope: `
    import { MyBrandButton }
      from "./button.js";
    export default { MyBrandButton };
  `
	}

button.mdx

# Documentation for button

Look Ma, here is my button!

<MyBrandButton />

Inside some custom text docs :-)

Custom React components

Interactive changelog?

Get plain data from GitHub
and represent it with a friendly interface!

One single point of truth

Extract info from packages and repos

Make your design system website a place where all the info can be found at any time.
Display markdown from libraries, tools and related repositories on the website pages.

Do more together

Welcome to contribute

Input

<input placeholder="Placeholder Text"
    class="input" type="text" value="" />

Text inputs are accompanied by a label and wrapped inside a fieldset. The :hover and :focus styles follow our brand colors.

Edit this page on GitHub

Reward the contributors

Input

25.04.2019 · Contributors

<input placeholder="Placeholder Text"
    class="input" type="text" value="" />

Text inputs are accompanied by a label and wrapped inside a fieldset. The :hover and :focus styles follow our brand colors.

Edit this page on GitHub

Share information

Blogging

Cherish in-house blogging

Give familiar interface

People are not used to writing markdown and edit files on GitHub? Offer them Wordpress as a source for your design system website blog.

Show meta data

What is our design system

Get the data

  • Crawl repositories
  • Inject scripts on production
  • Grab data from task managers

Show the data

  • Numbers
  • Links
  • Charts

Design systems as a service

Thank you

A Practical Guide TO BUILDING YOUR Design System Infrastructure

Slides: varya.me/patterns-day-2019

by Varya Stepanova

Credits

This pressentation used icons made by Freepik and Eucalyp from www.flaticon.com. They are licensed by CC 3.0 BY.

Fork me on Github