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 full-size slide

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

    View full-size slide

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

    View full-size slide

  4. team.badoo.com

    View full-size slide

  5. webdeldn.rocks codemotionworld.com

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. “Atomic” approach to UI design

    View full-size slide

  9. Our Sketch Design Library in Badoo

    View full-size slide

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

    View full-size slide

  11. Atomic Design in one GIF

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. 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 full-size slide

  16. 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 full-size slide

  17. 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 full-size slide

  18. 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 full-size slide

  19. That’s how you feel…

    View full-size slide

  20. 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 full-size slide


  21. I am a title




    Web “Components”

    View full-size slide


  22. I am a title




    Web “Components”
    COMPOSITION

    View full-size slide

  23. A common ground

    View full-size slide

  24. A common language
    “card”

    View full-size slide

  25. The advent of React

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    (React Web App)

    View full-size slide

  30. 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 full-size slide

  31. A simple component

    View full-size slide

  32. A simple component

    View full-size slide

  33. A complex component

    View full-size slide

  34. A complex component

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. “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 full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. Web “Components”
    COMPOSITION

    I am a title




    View full-size slide

  44. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  47. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. "Nothing is particularly hard

    if you divide it in small jobs."
    HENRY FORD

    View full-size slide

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

    View full-size slide

  56. 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 full-size slide