The principles of Atomic Design have transformed (probably forever) the way we look at UI components and code modularization. Pattern Libraries and Design Systems – predominantly built in React – have become widespread across many companies. No doubts, these are cool tools and approaches, and we have all fallen in love with them. But... In this talk, I'll share not only the learnings but also all the "buts" that we have found in our exciting journey developing (in React, of course) a Design System for Badoo.

1. MOBILE WEB TEAM
Cristiano Rastelli
didoo.net / @areaweb

2. What we are going to talk about
i. Atomic Design
ii. Design Systems
iii. React
iv. Cosmos
v. But…
vi. Conclusions

4. Cristiano Rastelli
didoo.net / @areaweb
Mobile Web Team

5. team.badoo.com

7. Atomic Design by Brad Frost
http://atomicdesign.bradfrost.com

8. The book about Atomic Design
http://atomicdesign.bradfrost.com

9. “Atomic” approach to UI design

10. Our Sketch Design Library in Badoo

11. (which is not completely new)
www.teehanlax.com/story/medium/

12. Atomic Design in one GIF

14. Components
http://atomicdesign.bradfrost.com
ATOM MOLECULE ORGANISM TEMPLATE PAGE

15. Component Library
LIBRARY
COMPONENTS
PAGE / APP
https://medium.com/@wolframnagel/content-design-and-ui-mapping-in-a-nutshell-7dce5634afff

16. A design system is like a cake…
People & Process
Documentation
UI Components

17. It’s a complex system!
Design System
Processes
Components
Dev Standards
UI Presentation Layer
Web
Native
Documentation
Style Guide
Voice &
Tone
Testing
Content
Strategy
Design
Principles
BrandVisual Design
Language
Design Assets
UI Kit
Platforms
https://blog.producthive.org/anatomy-of-a-design-system-7a6b0677bf5
DESIGN SYSTEM

18. The golden definition
medium.com/eightshapes-llc/a-design-system-isn-t-a-project-it-s-a-product-serving-products-74dcfffef935
“A style guide is an artifact of a design
process. A design system is a living,
funded product with a roadmap
and backlog, serving an ecosystem ”
design system
serving an ecosystem
product
Nathan Curtis

19. Companies with a Design System
ACL - Airbnb - Alberta Government - Altinn - Ant Financial - Appear Here - Atlassian - Audi - Auth0 -
Automattic/WordPress - Badoo - British Airways - Barnard Levit - Barricade - BBC - Bookatable - Bristol
City Council - Buffer - Buzzfeed - CA Technologies - Carnegie Mellon - Channel 4 - City of Philadelphia -
Clearleft - CloudFlare - CMS.gov - Co-Op - Code For America - DC Comics - Dell - Disqus -
DoSomething.org - Dropbox - Drupal - Dubizzle - Duolingo - eBay - Editorially - edX - Envato - Estonia -
Eurostar GLU - Facebook - Financial Times - Fontshop - Frontify - FutureLearn - GE Digital - GitHub -
Google - GOV.uk - Greenpeace - Hailo - Harmony - Healthcare.gov - Help Scout - Heroku - Homify - HP
Enterprise - IBM - Instacart - Khan Academy - Lasse Diercks - Liferay - Lonely Planet - Lost My Name -
Mailchimp - Mapbox - Marvel - Mass.gov - Microsoft Office - Mixpanel - Money Advice Service -
Morningstar - Mozilla/Firefox - NASA - National Geographic - National Instruments - Next - Nordnet -
OpenTable - Oracle - Ordnance Survey - Pega Systems - Perch - Pivotal - Pluralsight - Priceline - Quicken
Loans - Rackspace - Relais & Châteaux - Royal Canin - Salesforce - SAP - Seek - Shopify - Sky - Skype -
Skyscanner - Snyk - South Tees Hospital - Spotify - Starbucks - Swiss Confederation - Texas State - The
Guardian - The Times - ThermoFisher - ThinkUp - Time Warner Cable - Tourism Whistler - Tradeshift - Trello
- Tuts+ - U.S. Design Standards - Uber - Ubuntu - University of Edinburgh - University of Manchester -
University of Oxford - USAJobs - Ushahidi - uSwitch - VMware - Walmart - Weight Watchers - West Virginia
University - Westpac GEL - WeWork - WhatsApp - Winstrap - WooCommerce - Yelp - 18F U.S.
…and many, many, many more!
Badoo

20. The benefits of a design system
consistent/cohesive design language USERS
alignment of processes DESIGN & ENGINEERING
efficiency PRODUCT DESIGN & DEVELOPMENT
living documentation VISUAL & TECHNICAL
communication/collaboration ENTIRE COMPANY
marketing/branding/hiring PR & COMMUNITIES

21. That’s how you feel…

22. To know more…
Style Guides,Pattern Libraries,
Design Systems and other
amenities.
Cristiano Rastelli
Mobile Web Team
https://speakerdeck.com/didoo/style-guides-pattern-libraries-design-systems-and-other-amenities

24. <body>
<h1>I am a title</h1>
<my-component theme=“dark”>
<another-component/>
</my-component>
</body>
Web “Components”

25. <body>
<h1>I am a title</h1>
<my-component theme=“dark”>
<another-component/>
</my-component>
</body>
Web “Components”
COMPOSITION

26. A common ground

27. A common language
“card”

28. The advent of React

29. Predominantly React
React
No frameworks
Vanilla
Multiple
jQuery
Angular
Vue
Other
https://adele.uxpin.com/

30. To know more…
https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660

32. Demo

35. Codebase

36. Design Tokens
{
"global": {
"type": "token",
"category": "bricks"
},
"props": {
"TOKEN_BRICK_BORDER_RADIUS_CIRCLE": {
"value": "50%"
},
"TOKEN_BRICK_BORDER_RADIUS_SQUARED": {
"value": "11.4%"
}
}
}

37. React

38. CSS
+

39. Folders structure
DESIGN TOKENS
(JSON)
UI COMPONENTS
(React)
STYLE GUIDE
(React Web App)

40. Things to notice
React
• we generally have only pure components (this is a UI library)
• we split components is sub-components (our files are generally
quite small, and if they’re not then is a “code smell” for us)
• we use prop-types for type checking (and documentation)
CSS
• we use BEM notation for the classnames
• classnames are “name-spaced” to avoid conflicts
• extensive use of design tokens as Sass variables (when appropriate)

41. A simple component

42. A simple component

43. A complex component

44. A complex component

45. Some numbers
10k + 5k 36 + 98
180 70%
Lines of JS + CSS code Components (Main + Sub)
UI CoverageVisual Regression Tests

46. Visual Regression Testing
diff afterbefore
https://speakerdeck.com/nikhilverma/visual-regression-testing-from-a-tool-to-a-process

47. The full story
https://badootech.badoo.com/from-zero-to-cosmos-part-1-2d080fe35bf2

49. “Direction” of componentization
https://medium.com/ge-design/ges-predix-design-system-8236d47b0891
ATOM MOLECULE ORGANISM TEMPLATE PAGE
Atomic Design by Brad Frost
Atomic Design at GE (Predix Design System)

50. The “atomic” problem
Jina Anne, Nathan Curtis, Trent Walton,
Adam Morse, and many others
“Everything is a component.”

51. Flat navigation structureFlat folder structure
Keep everything flat!

52. (We used a “fake” categorisation)
quark atom molecule organism layout other
QUARK ATOM MOLECULE FEATURE LAYOUT OTHER

53. Two distinct kind of components
“Layout”
Composition
“Content”

54. Web “Components”
COMPOSITION<body>
<h1>I am a title</h1>
<my-component theme=“dark”>
<another-component/>
</my-component>
</body>

55. How to look at your components /1
When in doubt,
break down a component
* but not too much, or you’ll end up with “dust” of components
break down

56. How to look at your components / 2
“Expected” component
Component A ➔ (“Layout”) Component B ➔ (“Content”)

57. Gall’s Law on complex systems
https://medium.com/@didoo/systemantics-a778c4247cbb

58. Gall’s Law on complex systems
“A complex system that works is invariably found to
have evolved from a simple system that worked.
A complex system designed from scratch never works
and cannot be patched up to make it work.
You have to start over with a working simple system. ”
complex system
evolved from a simple system
from scratch never works
working simple system
cannot be patched up

59. How much UI coverage?
https://twitter.com/resmini/status/912373274323103751

60. How much UI coverage?
https://twitter.com/nathanacurtis/status/969197119730061313

61. Component's average cost
https://twitter.com/nathanacurtis/status/971110575114801152

62. Evangelisation
https://medium.com/related-works-inc/the-people-part-of-design-systems-a5b54eea24f4

64. Atomic Design is just the beginning
Start here End here

65. The complexity is in the connections
http://www.didoo.net/2015/07/modules-components-and-systems/

66. "Nothing is particularly hard
if you divide it in small jobs."
HENRY FORD

67. Cristiano Rastelli
didoo.net / @areaweb
Mobile Web Team

68. The theme used for these slides it’s been heavily inspired by the amazing, refreshing, superlative work done
by Maria Arenas (Tandem Design NYC) for the campaign of Alexandria Ocasio Cortez.
See: www.maaarenas.com
CREDITS