Cristiano Rastelli - Atomic Design, Design Systems and React. Cool, but... - Codemotion Berlin 2018
1 like•428 views
Cristiano Rastelli gave a presentation about design systems and component-based design. He discussed Atomic Design, React, Cosmos, and examples from Badoo's design system. He emphasized that design systems provide consistency, efficiency, and collaboration benefits. Complex systems work best when evolved from simple, working systems rather than designed entirely from scratch.
Cristiano Rastelli - Atomic Design, Design Systems and React. Cool, but... - Codemotion Berlin 2018
- 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
- 7. Atomic Design by Brad Frost http://atomicdesign.bradfrost.com
- 8. The book about Atomic Design http://atomicdesign.bradfrost.com
- 9. “Atomic” approach to UI design
- 10. Our Sketch Design Library in Badoo
- 11. (which is not completely new) www.teehanlax.com/story/medium/
- 12. Atomic Design in one GIF
- 14. Components http://atomicdesign.bradfrost.com ATOM MOLECULE ORGANISM TEMPLATE PAGE
- 15. Component Library LIBRARY COMPONENTS PAGE / APP https://medium.com/@wolframnagel/content-design-and-ui-mapping-in-a-nutshell-7dce5634afff
- 16. A design system is like a cake… People & Process Documentation UI Components
- 17. 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 BrandVisual Design Language Design Assets UI Kit Platforms https://blog.producthive.org/anatomy-of-a-design-system-7a6b0677bf5 DESIGN SYSTEM
- 18. 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
- 19. 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
- 20. 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
- 21. That’s how you feel…
- 22. 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
- 24. <body> <h1>I am a title</h1> <my-component theme=“dark”> <another-component/> </my-component> </body> Web “Components”
- 25. <body> <h1>I am a title</h1> <my-component theme=“dark”> <another-component/> </my-component> </body> Web “Components” COMPOSITION
- 26. A common ground
- 28. The advent of React
- 32. Demo
- 35. Codebase
- 36. Design Tokens { "global": { "type": "token", "category": "bricks" }, "props": { "TOKEN_BRICK_BORDER_RADIUS_CIRCLE": { "value": "50%" }, "TOKEN_BRICK_BORDER_RADIUS_SQUARED": { "value": "11.4%" } } }
- 37. React
- 38. CSS +
- 39. Folders structure DESIGN TOKENS (JSON) UI COMPONENTS (React) STYLE GUIDE (React Web App)
- 40. 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)
- 45. Some numbers 10k + 5k 36 + 98 180 70% Lines of JS + CSS code Components (Main + Sub) UI CoverageVisual Regression Tests
- 46. Visual Regression Testing diff afterbefore https://speakerdeck.com/nikhilverma/visual-regression-testing-from-a-tool-to-a-process
- 49. “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)
- 50. The “atomic” problem Jina Anne, Nathan Curtis, Trent Walton, Adam Morse, and many others “Everything is a component.”
- 51. Flat navigation structureFlat folder structure Keep everything flat!
- 52. (We used a “fake” categorisation) quark atom molecule organism layout other QUARK ATOM MOLECULE FEATURE LAYOUT OTHER
- 53. Two distinct kind of components “Layout” Composition “Content”
- 54. Web “Components” COMPOSITION<body> <h1>I am a title</h1> <my-component theme=“dark”> <another-component/> </my-component> </body>
- 55. 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
- 56. How to look at your components / 2 “Expected” component Component A ➔ (“Layout”) Component B ➔ (“Content”)
- 57. Gall’s Law on complex systems https://medium.com/@didoo/systemantics-a778c4247cbb
- 58. 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
- 59. How much UI coverage? https://twitter.com/resmini/status/912373274323103751
- 60. How much UI coverage? https://twitter.com/nathanacurtis/status/969197119730061313
- 64. Atomic Design is just the beginning Start here End here
- 65. The complexity is in the connections http://www.didoo.net/2015/07/modules-components-and-systems/
- 66. "Nothing is particularly hard if you divide it in small jobs." HENRY FORD
- 67. Cristiano Rastelli didoo.net / @areaweb Mobile Web Team
- 68. 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