Design System Ops

Improving communication between
designers and developers
DESIGN SYSTEM OPS
ANTON ZVONKOV

ABOUT MEANTON ZVONKOV
@QVIK
‣ Graduated from Aalto University 2013
‣ Media technology & content production
‣ Software developer @ Qvik since 2011
‣ Doing all kinds of stuﬀ…
‣ 65% iOS developer
‣ 25% Front-end developer
‣ 7% backend developer
‣ 3% UI designer

AGENDA
‣ It is about improving collaboration
between designers and developers
‣ What is a design system?
‣ How that would help you improve the
collaboration?
‣ Advanced design systems
‣ What is design system ops?
‣ Examples, more sources
@QVIK3

TRADITIONAL WAY
@QVIK
Developer
“The design is ready”
Designer

TRADITIONAL WAY
‣ Design files or screenshots are used as
reference on what to implement
‣ Designer communicates verbally when
something is done
‣ Designer/developer extracts the needed
bits from the design files
‣ fonts, images, icons, colors
‣ different export may be needed for
different platforms (web, iOS, native,
keynote, …)
@QVIK5

CHALLENGES
‣ Lack of single source of truth
‣ Mismatching information between multiple
design ﬁles
‣ Manual work exporting assets
‣ sprites for web, iOS/Android images for
diﬀerent resolutions, …
‣ Manual work transferring assets
‣ Files duplicated in cloud (Google Drive) and
project version control (Git)
‣ “When things are ready to be implemented?”
‣ Change management not trivial
@QVIK6

A DESIGN SYSTEM
INTRODUCING
@QVIK

DESIGN SYSTEM TOKENS
FONTS
Font ﬁles
Font sizes
Font colors
IMAGES
Images
Icons
Screenshots
COLORS
A set of colors
used in the app
OTHER ELEMENTS
Marginals
padding
line sizes
animation durations
@QVIK

A DESIGN SYSTEM
‣ Single source of truth for your brand &
images
‣ Not only images, but all the tokens
necessary, for all platforms
‣ Helps you centralize your design
information
‣ Helps you share it to people who may
want to use it
‣ Nicely introduced by Salesforce UX team
in a blog post
@QVIK9

THE FIRST STEP TO YOUR OWN
DESIGN SYSTEM
‣ Move all the tokens into one place
‣ platform images and fonts into appropriate
folders
‣ add one place when you deﬁne your font
usage, button styles, colors etc.
‣ it can be sketch page, pdf, json ﬁle, web
page
‣ keep it up to date!
‣ This will help you to communicate your
brand to all the people who needs to use it
@QVIK10

@QVIK
H1: OPEN SANS
COND. BOLD 63/60
#3B343A, ALL CAPS
H2: OPEN SANS COND. BOLD
39/39, #3B343A, ALL CAPS
Ingressi: Open Sans Light 21/38, #4E434C.
This text is used for descriptive paragraph, accompanying
the main headline or H2 title.
Paragraph: Open Sans Regular 14/22. Space after paragraph: 22
link in paragraph: #FC2580
Bolded text with Open Sans Semibold and #4E434C
italic with Open Sans Italic
H3 Open Sans Reg 19/21 #4E434C
Subheader for paragraph text, used inbetween paragraphs
Highlight-caption: Open Sans 13/20.
Used in small special paragraphs or
image captions.
H4 HIGHLIGHTS: OPEN SANS BOLD 13/17, ALL CAPS, CHARACTER SPACING +1
CTA-BUTTON TEXT: OPEN SANS CONDENSED 14/15,
#FC2580, WITH »-MARK AT THE END
PRIMARY: #FC2580
PRIMARY ACTIVE #C72368
SECONDARY: #FC2580 LINE 1
SECONDARY: #FC2580 LINE 3
QVIK.FI - FONTS

@QVIK
links online,
special highlights oﬄine
H1, H2,H3, H4, ingressiparagraphs
only links, special
highlights such as
badges etc to grasp
attention
main pink for
most occasions
special purple
for very special
occasions
main background secondary
background
special
background
special
background,
highlight texts
TYPOGRAPHY COLOURS
BRANDING MAIN COLOURS
TIGHT MAIN PALETTE
#FC2580
#FC2580
#FC2580
#DF2774#5E4175#3B343A
#3B343A
#3B343A#4E434C#6F686D
#4E434C
#ECECEC
#ECECEC#FFFFFF
#FFFFFF
#FFFFFF
QVIK.FI - COLORS

@QVIK
QVIK.FI - IMAGES
(1X, 2X, ICONS, VECTOR, …)

AUTOMATE ASSET EXPORTS
‣ Find out how your design tools can make
exporting easier for you
‣ Style Inventory - collect colors & styles &
fonts from the design to a Sketch sheet
‣ Photoshop can export assets for you,
when you name your layers
appropriately
@QVIK14

SAVE STYLES DIRECTLY TO THE
PROJECT
‣ Teach your designers how you can add/
modify assets of your project(s)
‣ Makes the communication easier; assets
are ready to use when the project is updated
‣ Pretty demanding for designers, especially if
you develop multiple platforms
‣ Will still need a single source of truth, if
multiple projects (imagine scale of companies
as Yle, Spotify, Salesforce, …)
@QVIK15

BRAND.AI - DESIGN SYSTEM
CLOUD
‣ Your design system tokens in cloud
‣ sketch plugin to use the design system
in your sketch ﬁles
‣ can be edited online
‣ can export iOS, Android, SASS, LESS
etc.
‣ not versioned; devs need to download
zip archives…
‣ pretty limited exports at least for iOS
@QVIK16

MORE TOOLS
‣ https://sympli.io/ - promising way to drag
& drop styles into your project
‣ Sketch & photoshop to Android Studio
& Xcode
‣ https://zeplin.io - helps the handover
from photoshop & sketch
‣ generates assets for diﬀerent
platforms
‣ one source for colors etc.
@QVIK17

THE THERMONUCLEAR LEVEL
DESIGN SYSTEMS
@QVIK

DUMP THE CLOUD; ENTER GIT
‣ Use json to store color values, font values etc.
‣ robust version control; users will easily see if
updates are available
‣ branches can be used for trying out new things
by designers
‣ can make your design system living
‣ Make it single source of truth
‣ Can use scripts etc. for repeated tasks
‣ Git is hard for devs, even harder for designers
@QVIK19

@QVIK20
AUTOMATE TASKS
‣ Use scripts to generate platform speciﬁc assets
after the changes are committed to Git
‣ ie. generate image sprite from all the images.
‣ salesforce open sourced Theo to do some of
the work
‣ css/sass/less for web development
‣ Android style ﬁles & proper images
‣ proper image sizes for iOS + generated
class to use colors in code

@QVIK21
AUTOMATE TASKS #2
‣ Generate your style guide each time the
system has changed
‣ re-generate your keynote/powerpoint
templates
‣ Notify your users easily when changes are
available
‣ Generate npm module (javascript) / pod
version (iOS) for every system
‣ Automatic UI testing
‣ is the design system applied properly?

@QVIK22
INTRODUCE DESIGN SYSTEM OPS
‣ If you want to do this seriously, introduce
this role in your organization
‣ It should be a person or a team who have
understanding of both, designers and
developers world
‣ The design system ops will ﬁnd/develop the
best tools, and teaches the organization to
make best use of ‘em
‣ remember: it is all about making the design
system communication more eﬀective, not
just playing around with cool tools

@QVIK23
… OR START SLOWLY
‣ git-sketch-plugin - using git inside sketch
‣ gemba.io - “Drag and drop assets to Git”

LIVE WORLD EXAMPLES
DESIGN SYSTEMS IN THE WILD
@QVIK

SALESFORCE - LIVING
DESIGN SYSTEM
‣ https://medium.com/salesforce-ux/living-
design-system-3ab1f2280ef7#.elup0lhxn
‣ https://www.lightningdesignsystem.com/
‣ website that introduces the system
‣ libraries for web/iOS/Android to make use
of the design system
‣ the most sophisticated one around
@QVIK

OTHER DESIGN SYSTEM -
RELATED STUFF
‣ http://atomicdesign.bradfrost.com/
‣ - very promising looking book on the
topic, in progress
‣ AirBnb
‣ http://airbnb.design/building-a-visual-
language
‣ Spotify
‣ https://medium.com/@hellostanley/
design-doesnt-scale-4d81e12cbc3e#.
5o52cwwuh
@QVIK

STYLE GUIDES
‣ https://disqus.com/pages/style-guide/
‣ https://www.mozilla.org/en-US/styleguide/
websites/sandstone/
‣ https://www.yelp.com/styleguide
@QVIK

SUMMARY
‣ Design system is a collection of your
design tokens
‣ LVL1: Create one location for the design
system to act as single source of truth
for your brand & designs
‣ LVL2: Automate your asset exports /
imports
‣ LVL3: Ditch your cloud in favour of Git
‣ LVL4: Introduce Design system ops and
start using Git; automate even more with
Git hooks
@QVIK

THANKS! QUESTIONS?
THAT’S IT
@QVIK

Design System Ops

More Related Content

What's hot (19)

Viewers also liked (9)

Similar to Design System Ops (20)

More from Qvik (7)

Recently uploaded (20)

Design System Ops