Level up your Design System

with styled-system

@TaleyaMirza

Explorer of Nature,

Art & of course

Technology

TALEY'A MIRZA

@TaleyaMirza

What is this talk about?

* Most common design system challenges
* How styled-system helps to solve them

* The three tenets of styled-system

Two years back

Sastaticket.pk acquired a software consultancy Recurship

Initial Products

A CMS configured at the website

Flight Booking App (in process)

After one year

  • Stable Flights App
  • A new customer management portal
  • Previous CMS
  • Hotels Booking App(in process)
  • Hotel booking management portal (planned)

Design System in Game

Brand Identity

Ensure Consistent UIs

Theming Control

Reduce Development Efforts

Initial Style Guide

Design

Styled Components

React

Custom Theme

Build the base of design system

We started our new product with the Atom Design Approach

Build Atoms

Text, Buttons, Badges, Inputs

Build Storybook

Documentation and visual customization of components

The idea was to

Run a pilot test

We started our new product from scratch

along with our baby design system

We build some molecules with atoms while building features

Dialog boxes, Cards, Accordions, Tables

As we go on...

Customize a bit...

More props, more customizable components

Refactoring often occurs in processes... to build consistent UIs

Build a few one-offs

We cannot handle more customization in a built one, because it can break other UIs

That's OK

We were not that smooth but it's going on...

Not a big deal.. it'll be smooth over time

Product need features fast

We are trying our best!

There comes some pressure!

Fast, Fast .... Fast!

After some time!

Almost over six months

Our new product has evolved really fast..

What about design system?

Three types of cards (visually same)

Two Links, Two Buttons, Two Types of Image Components

Multiple layout usage

Theme was lost

Different spacings

Hard coded values

Different dev practices

Refactoring was taking more time than creating new ones

Thus, Developers losing interest in design systems

as delivering features has to be fast as possible

STOP!

We cannot scale with that !!

Put a break on product

Start listening to design and code

Problems

Inconsistency in design

Product team, designers and developers identified those and started plan for a v2

Problems

Refactoring Efforts

We have to fix our constraints and provide a minimal flexibility

Problems

Responsive styling takes time and increases technical debt

Just theming doesn't work here

What's Next?

STYLED-SYSTEM

We explored

STYLED-SYSTEM

Layer of abstraction for CSS in JS libraries

To build consistent UIs faster

BRENT JACKSON - @jxnblk

Style props that pick up values from a global theme

 Apply styles responsively across breakpoints

STYLED-SYSTEM

To build consistent UIs faster

Style props that pick up values from a global theme

 Apply styles responsively across breakpoints

BRENT JACKSON - @jxnblk

STYLED-SYSTEM

Theme object is centered around the idea of scales

// example fontSizes scale as an array
fontSizes: [12, 14, 16, 20, 24, 32]

// example colors object
colors: {
  blue: '#07c',
  green: '#0fa',
}

// aliases
fontSizes.body = fontSizes[2]
fontSizes.display = fontSizes[5]

STYLED-SYSTEM

To build consistent UIs faster

Style props that pick up values from a global theme

 Apply styles responsively across breakpoints

BRENT JACKSON - @jxnblk

STYLED-SYSTEM

// theme.js
export default {
  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
}


//Box Component
import styled from 'styled-components'
import { space } from 'styled-system'

const Box = styled.div`
  ${space}
`
export default Box


//Usage and flexibility to add custom values
<Box m={2} p={13} >
  Tomato
</Box>

Gives us a minimal flexibility too

STYLED-SYSTEM

To build consistent UIs faster

Style props that pick up values from a global theme

 Apply styles responsively across breakpoints

BRENT JACKSON - @jxnblk

STYLED-SYSTEM

.Box-hash {
  width: 100%;
}

@media screen and (min-width: 40em) {
  .Box-hash {
    width: 50%;
  }
}

@media screen and (min-width: 52em) {
  .Box-hash {
    width: 25%;
  }
}
<Box width={[1, 1 / 2, 1 / 4]} />

// theme.js
const breakpoints = ['40em', '52em', '64em', '80em']

// aliases
breakpoints.sm = breakpoints[0]
breakpoints.md = breakpoints[1]
breakpoints.lg = breakpoints[2]
breakpoints.xl = breakpoints[3]

export default {
  breakpoints,
}
<Box width={{ _: 1, sm: 1, md: 1 / 2, lg: 1 / 4 }} />

STYLED-SYSTEM

To build consistent UIs faster

Style props that pick up values from a global theme

 Apply styles responsively across breakpoints

BRENT JACKSON - @jxnblk

We got a really strong base

Three TENETS of

styled-system

Consistency

Style consistently with a global theme

Flexibility

 

A design system’s value is realized when products ship features using parts from the system.

- Nathan Curtis

Respond to changing requirements quickly

Responsive Scalability

Create mobile-first responsive layouts with ease

Ecosystem

Libraries built with the foundation of styled-system

You can also use them as a base library, the best thing about styled-system is it's not framework specific

Review

styled-system cannot solve all the design system challenges

but it can definitely help us leveling up our design system

by providing a strong base for our design system

 

Here’s the simple truth: you can’t innovate on products without first innovating the way you build them.

- Alex Schleifer, Airbnb

We found styled-system amazing

You can also try it out.. !

References

Thank You

@TaleyaMirza

#design-systems

Level up your design system with styled-system [womenofreact.com conference April 2020]

By Taley'a Mirza (Talia)

Level up your design system with styled-system [womenofreact.com conference April 2020]

  • 1,674