Designing a Design System - Shai Mishali, Gett

Designing a
Design SYSTEM👨💻 Shai Mishali | freak4pc@gmail.com

iOS Tech Lead
@ Gett
Open Source
❤
Hackathon fan and winner of some
International Speaker
@freak4pc
About Me

Involved in dozens of tutorials and
several published books
Author & Editor at
raywenderlich.com iOS Team
@freak4pc
About Me

Gett is a leading, global,
on-demand mobility company

We have teams in
Israel, Russia,
UK and US

7 2 Dozens Hundreds
of screens of UI componentsiOS & Android
engineers
Designers
🤓 📱 🧩
Rider App Numbers
🚕
of rides
millions
Hundreds of
👩🎨👨🎨

What will we talk
about today?
📣

This is the story of synchronizing
design and development teams 🎨
The challenges, hardships, and
solutions 🥳

Our entire journey starts with …
A HUGE MESS
🤯

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

As we kept working on the app, we constantly bumped into
issues with the design & development cycle
🔄💥
Redesign &New Components

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

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
😭

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!

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 ﬁnd and replace the
1000 occurrences of that
color and font

Problem #3
Widespread changes are HARD
👨🎨
Oh, I actually don’t like that
red. Could you try a different
red please?

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!

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: 🤷🤷
🎨 🔤

How can we solve
these problems?

design system
A shared set of colors, text styles and components to be used by all teams -
Design, iOS, Android, and possibly others.
(noun)

Sketch
Pre-deﬁne a well-named library of text styles, colors and
symbols so designers constantly reuse them

This helps designers…
👩🎨👨🎨

But, what about
🤓
development teams?

What do we want to solve?
🔄 Keep design and development synchronized
🎨 Single source of truth for colors and text styles
📱🤖 Generate platform-speciﬁc code for iOS & Android
👨🎨👩🎨 Designers can push changes to developers easily

So we started looking
at existing solutions
🔍

So, Let’s just
BUILD IT
OURSELVES!

What is a good single
source of truth?
🤔

is actually a great
source of truth

Named color
Named text style
Element

Style
Guide
🎨
Sorts these
and
into a project
colors
text styles

Seems like we have
everything!
🥳

No, wait…
what about the code?!
💻

we need an API
To fetch styles from Zeplin
🧙
some magic

Through some
h4ck3ry…
We managed to access
Zeplin's Private API
🤫

We finally have some
🧮
data to work with!

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

Now we can actually
🛠
build something

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

And we
Called it …

upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Swift_logo.svg/1138px-Swift_logo.svg.png https://
We started with a naive implementation, deﬁning a protocol:
Building Prism

And then made an implementation for the iOS App:
Building Prism

Building Prism
You could then run the tool, and get a Colors.swift ﬁle:

Building Prism
As well as a TextStyles.swift ﬁle:

This worked ﬁne, until we wanted to bring the Android team
on all that fun as well.
Building Prism
🤖
💡

🔥 This posed a few issues …
1. Our Android developers would need to learn Swift
5. The style guide ﬁles 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

Back to the
😰
drawing board

Improving Prism
We needed a way to deﬁne 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

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%}}

Templates
When you run prism inside a folder, it looks for a .prism folder and
processes any templates in that folder:

Templates
You can easily create a Colors.swift.prism ﬁle as follows:

Which prism translates into the same Colors.swift:
Templates

Templates
And a TextStyles.swift.prism ﬁle as follows:

Which prism processes into TextStyles.swift:
Templates

Templates
Now that we have a templating engine, we can easily do the same
for Android. For example, a colors.xml.prism template:

Templates
Which Prism translates into the following colors.xml ﬁle:

Templates
You can do the same with styles.xml.prism:

Templates
But there's a bit of a problem here:

Templates
But there's a bit of a problem here:
Actual Output: GraphikGett-Regular
Needed Output: graphikgett_regular

Templates
As a solution, we've added the ability to pipe various transformations for any token
Transformations

Templates
This will result in the following styles.xml:

Templates
This solves our biggest problem:
📱🤖
👩🎨
Hey, can you update
the label style to Title M
Default Dark?
Sure!

Templates
Want to create a web page showcasing your style guide? Easy!

Templates
This template will result in the following webpage:

🌈
You can make
ANYTHING

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

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

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 …

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

Custom Bitrise Workflow
We then built an app for designers so they can generate style code for
iOS & Android, triggering the different Bitrise Workﬂows separately.

A quick recap!
Updates Styleguide  
Colors and Text Styles
Triggers iOS/Android
Bitrise Workﬂow
Bitrise generates
code using Prism
New PR sent to
Slack channel
PR Created
Reviews and
merges code
Designer CI
Developer

Slack Notifications

Pull Request

🎨📱🤖
Dozens of hours of saved work, improved team work
and reduced design handoff mistakes ♥
+

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 speciﬁcation 💫

Time for the question
😯
you’ve been waiting for

Are you going to
🤩
Prism?Open Source

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!

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

Open Source

Open Source
With that, we’re happy to announce…
😍

Open Source
🥳 Yay!
We plan on open-sourcing Prism at the
beginning of 2020!

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!

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! 📱

Shai Mishali
freak4pc
Thank you!

Designing a Design System - Shai Mishali, Gett

Recommended

Recommended

More Related Content

Similar to Designing a Design System - Shai Mishali, Gett

Similar to Designing a Design System - Shai Mishali, Gett (20)

More from DroidConTLV

More from DroidConTLV (20)

Recently uploaded

Recently uploaded (20)

Designing a Design System - Shai Mishali, Gett