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

A34bc430e87a74eba5d92719ea92cfdc?s=128

Cristiano Rastelli

July 19, 2018
Tweet

Transcript

  1. 2.

    What we are going to talk about i. Atomic Design

    ii. Design Systems iii. React iv. Cosmos v. But… vi. Conclusions
  2. 3.
  3. 7.
  4. 14.
  5. 17.
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 24.
  12. 32.
  13. 33.
  14. 34.
  15. 35.
  16. 36.
  17. 37.

    Design Tokens { "global": { "type": "token", "category": "bricks" },

    "props": { "TOKEN_BRICK_BORDER_RADIUS_CIRCLE": { "value": "50%" }, "TOKEN_BRICK_BORDER_RADIUS_SQUARED": { "value": "11.4%" } } }
  18. 38.
  19. 39.
  20. 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)
  21. 46.

    Some numbers 10k + 5k 36 + 98 180 70%

    Lines of JS + CSS code Components (Main + Sub) UI Coverage Visual Regression Tests
  22. 49.
  23. 51.

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


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

    (We used a “fake” categorisation) quark atom molecule organism layout

    other QUARK ATOM MOLECULE FEATURE LAYOUT OTHER
  25. 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
  26. 57.

    How to look at your components / 2 “Expected” component

    Component A ➔ (“Layout”) Component B ➔ (“Content”)
  27. 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
  28. 64.
  29. 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