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