Designing a Design System

"Designing a Design System" is a talk showcasing Gett's story into developing a custom solution to increase reliability and productivity of design hand-off between design and development teams.

Presented in:
- Swift Heroes 2019 (Turin, Italy) - November 15th, 2019
- droidCon Tel Aviv 2019 (Tel Aviv, Israel) - Deccember 19th, 2019

Transcript

1. Designing a Design SYSTEM Shai Mishali | freak4pc@gmail.com
2. iOS Tech Lead @ Gett Open Source ❤ Hackathon fan and winner of some International Speaker @freak4pc About Me
3. Involved in dozens of tutorials and several published books Author & Editor at raywenderlich.com iOS Team @freak4pc About Me
4. Gett is a leading, global, on-demand mobility company
5. We have teams in Israel, Russia, UK and US
6. 7 2 Dozens Hundreds of screens of UI components iOS & Android engineers Designers Rider App Numbers of rides millions Hundreds of
7. What will we talk about today?
8. This is the story of synchronizing design and development teams The challenges, hardships, and solutions
9. Our entire journey starts with … A HUGE MESS
10. Redesign & New Components In 2018 we ramped up working on an entirely new branding and look for the Gett rider app, as well as ramped up our development of existing components and new features
11. As we kept working on the app, we constantly bumped into issues with the design & development cycle Redesign & New Components
12. Problem #1 Hey, can you update the button color to the primary orange? Uhm… the app has 26 different shades of orange. Which do you mean?! Actual design: Communication is hard
13. Problem #1 Hey, can you update the button color to the primary orange? Uhm… the app has 26 different shades of orange. Which do you mean?! Actual design: Communication is hard
14. Problem #2 Color reuse is problematic Design specs: Uhm.. did we ever use this color in the app? Eh, dunno. I’ll just copy-paste this for the 100th time. LGTM!
15. Problem #3 Widespread changes are HARD Hey, can you change all primary orange to red and all titles in the app to 22pt? Sure! let me just manually find and replace the 1000 occurrences of that color and font
16. Problem #3 Widespread changes are HARD Oh, I actually don’t like that red. Could you try a different red please?
17. Problem #4 Style changes are not synchronised across platforms iOS Android Primary color is #FF9300 Hey, can you update the button color to the primary orange? Primary color is #FF8500 Oops! We forgot to update the Android app!
18. Problem #5 Naming across platforms is inconsistent Design: Primary Orange iOS: fancyOrangeThing Android: orange_is_my_jam Web: ??? Design: Helvetica Neue Light, 24pt/sp, Primary Orange color iOS, Android:
19. How can we solve these problems?
20. Clean the MESS!
21. design system A shared set of colors, text styles and components to be used by all teams - Design, iOS, Android, and possibly others. (noun)
22. Start with the designers
23. Sketch Pre-define a well-named library of text styles, colors and symbols so designers constantly reuse them
24. This helps designers…
25. But, what about development teams?
26. What do we want to solve? Keep design and development synchronized Single source of truth for colors and text styles Generate platform-specific code for iOS & Android Designers can push changes to developers easily
27. So we started looking at existing solutions
28. BUT COULDN'T FIND ANYTHING!
29. So, Let’s just BUILD IT OURSELVES!
30. What is a good single source of truth?
32. is actually a great source of truth
33. Named color Named text style Element
34. Style Guide Sorts these and into a project colors text styles
35. Seems like we have everything!
37. No, wait… what about the code?!
38. we need an API To fetch styles from Zeplin some magic
39. Has NO API!
40. Now what?
41. Through some h4ck3ry… We managed to access Zeplin's Private API
42. Through some h4ck3ry… We managed to access Zeplin's Private API
43. We finally have some data to work with!
44. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Data entities Color id name a r g b Text Style id name fontSize fontFace color Project id name colors textStyles
45. Now we can actually build something
46. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Building the tool We started working on a Swift-based command-line tool to generate code for Text Styles and Colors using the private Zeplin API
47. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png And we Called it …
49. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/853px-Swift_logo.svg.png We started with a naive implementation, defining a protocol: Building Prism
50. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png And then made an implementation for the iOS App: Building Prism
51. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Building Prism You could then run the tool, and get a Colors.swift file:
52. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Building Prism As well as a TextStyles.swift file:
53. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png This worked fine, until we wanted to bring the Android team on all that fun as well. Building Prism
54. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png This posed a few issues … 1. Our Android developers would need to learn Swift 5. The style guide files are owned by Prism, instead by the actual apps themselves 4. Long development cycle, having to compile code after each change 3. Changing style guides required deep knowledge of Prism’s code base 2. Every new consumer will need its own new class and requires making actual code changes in Prism
56. Back to the drawing board
57. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Improving Prism We needed a way to define what code will be produced from our Colors and Text Style that’s: Flexible and fast Easy to create No Prism code changes Hosted with each app Synchronized from single source-of-truth
58. Templates!
59. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Templates We introduced a simple stencil-styled template that lets you iterate over colors and text styles and create any output you want using a set of tokens which look like {{%token%}}
60. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Templates When you run prism inside a folder, it looks for a .prism folder and processes any templates in that folder:
61. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Templates You can easily create a Colors.swift.prism file as follows:
62. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Which prism translates into the same Colors.swift: Templates
63. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Templates And a TextStyles.swift.prism file as follows:
64. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Which prism processes into TextStyles.swift: Templates
65. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Templates Now that we have a templating engine, we can easily do the same for Android. For example, a colors.xml.prism template:
66. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Templates Which Prism translates into the following colors.xml file:
67. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Templates You can do the same with styles.xml.prism:
68. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Templates But there's a bit of a problem here:
69. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Templates But there's a bit of a problem here: Actual Output: GraphikGett-Regular Needed Output: graphikgett_regular
70. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Templates As a solution, we've added the ability to pipe various transformations for any token Transformations
71. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Templates This will result in the following styles.xml:
72. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Templates This solves our biggest problem: Hey, can you update the label style to Title M Default Dark? Sure!
73. But why stop there?
74. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Templates Want to create a web page showcasing your style guide? Easy!
75. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Templates This template will result in the following webpage:
76. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png You can make ANYTHING
77. Let's review our goals
78. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Goals (so far) Synchronized from single source-of-truth Communicating and naming over styles and colors Color and Text Style reuse Easy widespread changes Flexible, fast and easy to create No tool code changes needed Hosted with each app Designers can push changes to developers easily
79. Taking it up to 11!
80. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png
81. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Automate all the things We’re missing one crucial point ☝ We’d like to be able to automate the process of generating code using Prism, letting the designers themselves push changes to the development team - closing the entire loop. ↩ Pull Request Styleguide updates
82. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Automate all the things We need a safe environment that: Can host the Zeplin Token, and other secrets Has access to our GitHub repositories Can build and run Prism Can be triggered remotely via an API Continuous Integration Or, in our case …
84. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Custom Bitrise Workflow Run Prism Clone Project Make branch Notify Slack Channel Started Successful No Changes Failed Commit changes Create PR with hub Inject Zeplin Token & Project ID
85. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Custom Bitrise Workflow We then built an app for designers so they can generate style code for iOS & Android, triggering the different Bitrise Workflows separately.
86. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png A quick recap! Updates Styleguide 
 Colors and Text Styles Triggers iOS/Android Bitrise Workflow Bitrise generates code using Prism New PR sent to Slack channel PR Created Reviews and merges code Designer CI Developer
87. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Slack Notifications
88. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Pull Request
89. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Pull Request
90. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Pull Request
91. Dozens of hours of saved work, improved team work and reduced design handoff mistakes ♥ +
92. The Future of Prism
93. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png The Future Except for Text Styles and Colors, Zeplin also has a concept called Components We are currently investigating the possibility of generating entire components based on their Zeplin specification
94. Time for the question you’ve been waiting for
95. Are you going to Prism? Open Source
96. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Open Source Since we’re using Zeplin’s private API, sharing the code with the entire world is tricky. But then, something happened… We were very sad about this as we expected sharing it with the whole world!
97. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Open Source We’ve been in touch with Zeplin, and they let us know they’re working on an API which should be released to private beta by the middle of December ’19! Since then, another thing happened...
98. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Open Source
99. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Open Source With that, we’re happy to announce…
100. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Open Source Yay! We plan on open-sourcing Prism at the beginning of 2020!
101. Let's wrap it up!
102. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Let's wrap it up! When many sources conflict, define a single source of truth If a recurring action wastes time or creates friction, automate it It it doesn't exist, don't be afraid building it yourself Building developer tooling is fun! Working with other teams to find pain points is crucial We can't wait to see how the community uses this!
103. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/870px-Swift_logo.svg.png https:// upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png Special Thanks Adi Inbar Keren Hossy For their assistance as part of Gett’s Design Studio And to the rest of Gett’s Mobile R&D Team!
104. Shai Mishali freak4pc Thank you!