Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Scaling Skyscanner's design system
Search
Tim von Oldenburg
April 05, 2017
Technology
0
440
Scaling Skyscanner's design system
Talk given at the React Edinburgh meetup on 5th April 2017.
Image credits on second last slide.
Tim von Oldenburg
April 05, 2017
Tweet
Share
More Decks by Tim von Oldenburg
See All by Tim von Oldenburg
No more excuses - Getting the first 30% of accessibility issues
tvooo
0
450
Other Decks in Technology
See All in Technology
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.2k
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
270
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.3k
Lambda Web Adapterについて自分なりに理解してみた
smt7174
3
110
Agentic Workflowという選択肢を考える
tkikuchi1002
1
510
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
200
250627 関西Ruby会議08 前夜祭 RejectKaigi「DJ on Ruby Ver.0.1」
msykd
PRO
2
290
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
440
Delegating the chores of authenticating users to Keycloak
ahus1
0
120
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
170
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
220
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
iotcomjpadmin
0
150
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Bash Introduction
62gerente
614
210k
How GitHub (no longer) Works
holman
314
140k
Speed Design
sergeychernyshev
32
1k
Agile that works and the tools we love
rasmusluckow
329
21k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Building an army of robots
kneath
306
45k
Transcript
Scaling Skyscanner’s Design System React Edinburgh, 2017-04-05 How we use
the React ecosystem for fun and profit. 1
! Tim von Oldenburg twitter.com/sweeneytimm github.com/tvooo tvooo.de Skyscanner skyscanner.net Backpack
Design System 2
What we’re going to talk about —Design systems —Practices we
apply —Obstacles we encounter(ed) —Lego 3
Design systems “Backpack is a collection of design resources, reusable
components and guidelines for creating Skyscanner products.” 4
Design systems Atomic design React components are on the atoms
and molecules level. 5
6
7
8
Design systems Getting the level of abstraction just right. 9
Practices & Approaches —Encapsulation —Choice —Composition 10
Encapsulation Every component in its own NPM package. bpk-component-button bpk-component-datepicker
bpk-component-input … Each contains: —Markup —JavaScript —Styles 11
Encapsulation (contd.) Keyboard and screenreader accessible Right-to-left support and i18n
12
Encapsulation (contd.) Themeing Build-time themeing through design tokens 13
Choice Leave details to the consumer Most of our components
are stateless. But we ship stateful containers for common use cases, too. Accordion AccordionContainer Calendar Datepicker 14
Composition Composing common patterns Button + Icon + Spinner <Button
disabled={this.state.isLoading}> Search { this.state.isLoading ? <Spinner fill="grey" /> : <SearchIcon fill="white" /> } </Button> 15
Composition (contd.) Composing common patterns Button + Icon + Spinner
= Loading button <LoadingButton loading={this.state.isLoading}> Search </LoadingButton> 16
17
Obstacles But not all is great in component land… 18
Obstacles Teams use all kinds of technology stacks: Angular, Backbone,
Coffeescript. —No prioritisation from Product Owners —The design system does not provide everything needed —Rewrites are too expensive —Risky investment at scale 19
Upgrade paths: Sass Provide easy-to-adopt Sass mixins and variables ➡
Achieve visual consistency fast and cheap. 20
21
Upgrade paths: Other libraries/frameworks But what about molecules? ➡ Embed
individual (complex) components using ReactDOM. - Angular? ngReact, react2angular - Anything else? This amazing PR 22
Provide common tools For consistency and to get started: —ESLint
config —Stylelint config —Webpack config ➡ create-react-app template create-react-app my-app --scripts-version=backpack-react-scripts 23
Get your hands dirty Take your time to dig into
product teams’ code bases and find ways to help them transition easily. 24
Conflicting styles One page, one component, many versions. ➡ CSS-in-JS
(such as styled-jsx) ➡ CSS Modules 25
26
Thanks! Oh btw, we’re hiring a Senior Front End Engineer
to help us build the Backpack design system ! ➡ Get in touch! 27
Images: —Tiny toy Lego plane: Sebastian Wahl —Design systems diagram:
Stu Robson —Detailed Lego planes: Flickr —Colorful Lego plane: Flickr —Lego “Just Right”: Reddit 28
Further links: —Backpack Design System —Atomic Design principles by Brad
Frost —Ryan Florence - Don't Rewrite, React! 29