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
   

   View Slide

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

   View Slide

3. View Slide

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

   View Slide

5. team.badoo.com
   

   View Slide

6. webdeldn.rocks codemotionworld.com
   

   View Slide

7. View Slide

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

   View Slide

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

   View Slide

10. “Atomic” approach to UI design
    

    View Slide

11. Our Sketch Design Library in Badoo
    

    View Slide

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

    View Slide

13. Atomic Design in one GIF
    

    View Slide

14. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

22. That’s how you feel…
    

    View Slide

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
    

    View Slide

24. View Slide

25. 
    I am a title
    
    
    
    
    Web “Components”
    

    View Slide

26. 
    I am a title
    
    
    
    
    Web “Components”
    COMPOSITION
    

    View Slide

27. A common ground
    

    View Slide

28. A common language
    “card”
    

    View Slide

29. The advent of React
    

    View Slide

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

    View Slide

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

    View Slide

32. View Slide

33. Demo
    

    View Slide

34. View Slide

35. View Slide

36. Codebase
    

    View Slide

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

    View Slide

38. React
    

    View Slide

39. CSS
    +
    

    View Slide

40. Folders structure
    DESIGN TOKENS
    (JSON)
    UI COMPONENTS
    (React)
    STYLE GUIDE

    (React Web App)
    

    View Slide

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)
    

    View Slide

42. A simple component
    

    View Slide

43. A simple component
    

    View Slide

44. A complex component
    

    View Slide

45. A complex component
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

49. View Slide

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)
    

    View Slide

51. The “atomic” problem
    Jina Anne, Nathan Curtis, Trent Walton, 

    Adam Morse, and many others
    “Everything is a component.”
    

    View Slide

52. Flat navigation structure
    Flat folder structure
    Keep everything flat!
    

    View Slide

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

    View Slide

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

    View Slide

55. Web “Components”
    COMPOSITION
    
    I am a title
    
    
    
    
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

64. View Slide

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

    View Slide

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

    View Slide

67. "Nothing is particularly hard

    if you divide it in small jobs."
    HENRY FORD
    

    View Slide

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

    View Slide

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
    

    View Slide