Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design System Ops


Published on

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

Published in: Software

Design System Ops

  1. 1. Improving communication between designers and developers DESIGN SYSTEM OPS ANTON ZVONKOV
  2. 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. 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. 4. TRADITIONAL WAY @QVIK Developer “The design is ready” Designer
  5. 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. 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
  8. 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. 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. 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. 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. 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. 13. @QVIK QVIK.FI - IMAGES (1X, 2X, ICONS, VECTOR, …)
  14. 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. 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. 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. 17. MORE TOOLS ‣ - promising way to drag & drop styles into your project ‣ Sketch & photoshop to Android Studio & Xcode ‣ - helps the handover from photoshop & sketch ‣ generates assets for different platforms ‣ one source for colors etc. @QVIK17
  19. 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. 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. 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. 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. 23. @QVIK23 … OR START SLOWLY ‣ git-sketch-plugin - using git inside sketch ‣ - “Drag and drop assets to Git”
  25. 25. SALESFORCE - LIVING DESIGN SYSTEM ‣ design-system-3ab1f2280ef7#.elup0lhxn ‣ ‣ website that introduces the system ‣ libraries for web/iOS/Android to make use of the design system ‣ the most sophisticated one around @QVIK
  26. 26. OTHER DESIGN SYSTEM - RELATED STUFF ‣ ‣ - very promising looking book on the topic, in progress ‣ AirBnb ‣ language ‣ Spotify ‣ design-doesnt-scale-4d81e12cbc3e#. 5o52cwwuh @QVIK
  27. 27. STYLE GUIDES ‣ ‣ websites/sandstone/ ‣ @QVIK
  28. 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