Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Cristiano Rastelli

July 19, 2018
Tweet

More Decks by Cristiano Rastelli

Other Decks in Design

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