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 & wonna.fi

@ Hackeress meetup, August 6th, 2019. Helsinki, Finland

Me

Varya Stepanova

Design Systems Expert

/ varya.me & wonna.fi / mail@varya.me

Design system at Elisa

What is design systems?

Design Systems

See more in the relevant article: What is a design system? And why it is more than just a library or a style guide.

Designers update libs

Technologies = friendly environment and tools

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

See more in the relevant article: What is a design system? And why it is more than just a library or a style guide.

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

Workshops

1. Design systems 101

2. How to build a design system as a team

Workshops

3. Design system in real world

Full description at wonna.fi.

Thank you

A Practical Guide TO BUILDING YOUR Design System Infrastructure

Slides: varya.me/hackeress-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