Presentation by Anton Zvonkov, Software Engineer at Qvik. Presented at Qvik's Pizza&Beers, September 15, and at Fraktio's Perjantaipresis, October 7.

1. Improving communication between
designers and developers
DESIGN SYSTEM OPS
ANTON ZVONKOV

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

3. 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

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

5. 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

6. CHALLENGES
‣ Lack of single source of truth
‣ Mismatching information between multiple
design files
‣ Manual work exporting assets
‣ sprites for web, iOS/Android images for
different 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

7. A DESIGN SYSTEM
INTRODUCING
@QVIK

8. DESIGN SYSTEM TOKENS
FONTS
Font files
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

9. 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

10. 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 define your font
usage, button styles, colors etc.
‣ it can be sketch page, pdf, json file, 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

11. @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

12. @QVIK
links online,
special highlights offline
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

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

14. 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

15. 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

16. BRAND.AI - DESIGN SYSTEM
CLOUD
‣ Your design system tokens in cloud
‣ sketch plugin to use the design system
in your sketch files
‣ 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

17. 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 different
platforms
‣ one source for colors etc.
@QVIK17

18. THE THERMONUCLEAR LEVEL
DESIGN SYSTEMS
@QVIK

19. 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

20. @QVIK20
AUTOMATE TASKS
‣ Use scripts to generate platform specific 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 files & proper images
‣ proper image sizes for iOS + generated
class to use colors in code

21. @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?

22. @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 find/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 effective, not
just playing around with cool tools

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

24. LIVE WORLD EXAMPLES
DESIGN SYSTEMS IN THE WILD
@QVIK

25. 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

26. 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

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

28. 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

29. THANKS! QUESTIONS?
THAT’S IT
@QVIK