Atomic Design, Design Systems and React. Cool, but...

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.

----

Video #1 - JS Roundabout: https://www.youtube.com/watch?v=UvMmBQgrMSc
Video #2 - Front-End London: https://www.youtube.com/watch?v=oi3lY39wbfA

Transcript

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
6. webdeldn.rocks codemotionworld.com
8. Atomic Design by Brad Frost http://atomicdesign.bradfrost.com
9. The book about Atomic Design http://atomicdesign.bradfrost.com
10. “Atomic” approach to UI design
11. Our Sketch Design Library in Badoo
12. (which is not completely new) www.teehanlax.com/story/medium/
13. Atomic Design in one GIF
15. Components http://atomicdesign.bradfrost.com ATOM MOLECULE ORGANISM TEMPLATE PAGE
16. Component Library LIBRARY COMPONENTS PAGE / APP https://medium.com/@wolframnagel/content-design-and-ui-mapping-in-a-nutshell-7dce5634afff
17. A design system is like a cake… People & Process Documentation UI Components
18. 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 Brand Visual Design Language Design Assets UI Kit Platforms https://blog.producthive.org/anatomy-of-a-design-system-7a6b0677bf5 DESIGN SYSTEM
19. 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
20. 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
21. 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
22. That’s how you feel…
23. 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
25. <body> <h1>I am a title</h1> <my-component theme=“dark”> <another-component/> </my-component> </body> Web “Components”
26. <body> <h1>I am a title</h1> <my-component theme=“dark”> <another-component/> </my-component> </body> Web “Components” COMPOSITION
27. A common ground
28. A common language “card”
29. The advent of React
30. Predominantly React React No frameworks Vanilla Multiple jQuery Angular Vue Other https://adele.uxpin.com/
31. To know more… https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660
33. Demo
36. Codebase
37. Design Tokens { "global": { "type": "token", "category": "bricks" }, "props": { "TOKEN_BRICK_BORDER_RADIUS_CIRCLE": { "value": "50%" }, "TOKEN_BRICK_BORDER_RADIUS_SQUARED": { "value": "11.4%" } } }
38. React
39. CSS +
40. Folders structure DESIGN TOKENS (JSON) UI COMPONENTS (React) STYLE GUIDE
 (React Web App)
41. 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)
42. A simple component
43. A simple component
44. A complex component
45. A complex component
46. Some numbers 10k + 5k 36 + 98 180 70% Lines of JS + CSS code Components (Main + Sub) UI Coverage Visual Regression Tests
47. Visual Regression Testing diff after before https://speakerdeck.com/nikhilverma/visual-regression-testing-from-a-tool-to-a-process
48. The full story https://badootech.badoo.com/from-zero-to-cosmos-part-1-2d080fe35bf2
50. “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)
51. The “atomic” problem Jina Anne, Nathan Curtis, Trent Walton, 
 Adam Morse, and many others “Everything is a component.”
52. Flat navigation structure Flat folder structure Keep everything flat!
53. (We used a “fake” categorisation) quark atom molecule organism layout other QUARK ATOM MOLECULE FEATURE LAYOUT OTHER
54. Two distinct kind of components “Layout” Composition “Content”
55. Web “Components” COMPOSITION <body> <h1>I am a title</h1> <my-component theme=“dark”> <another-component/> </my-component> </body>
56. 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
57. How to look at your components / 2 “Expected” component Component A ➔ (“Layout”) Component B ➔ (“Content”)
58. Gall’s Law on complex systems https://medium.com/@didoo/systemantics-a778c4247cbb
59. 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
60. How much UI coverage? https://twitter.com/nathanacurtis/status/969197119730061313
61. How much coverage? https://twitter.com/resmini/status/912373274323103751
62. Component's average cost https://twitter.com/nathanacurtis/status/971110575114801152
63. Evangelisation https://medium.com/related-works-inc/the-people-part-of-design-systems-a5b54eea24f4
65. Atomic Design is just the beginning Start here End here
66. The complexity is in the connections http://www.didoo.net/2015/07/modules-components-and-systems/
67. "Nothing is particularly hard
 if you divide it in small jobs." HENRY FORD
68. Cristiano Rastelli didoo.net / @areaweb Mobile Web Team
69. 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