Cristiano Rastelli - Atomic Design, Design Systems and React. Cool, but... - Codemotion Berlin 2018
- 2. What we are going to talk about
i. Atomic Design
ii. Design Systems
iii. React
iv. Cosmos
v. But…
vi. Conclusions
- 11. (which is not completely new)
www.teehanlax.com/story/medium/
- 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
- 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
- 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
- 36. Design Tokens
{
"global": {
"type": "token",
"category": "bricks"
},
"props": {
"TOKEN_BRICK_BORDER_RADIUS_CIRCLE": {
"value": "50%"
},
"TOKEN_BRICK_BORDER_RADIUS_SQUARED": {
"value": "11.4%"
}
}
}
- 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
- 52. (We used a “fake” categorisation)
quark atom molecule organism layout other
QUARK ATOM MOLECULE FEATURE LAYOUT OTHER
- 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
- 65. The complexity is in the connections
http://www.didoo.net/2015/07/modules-components-and-systems/
- 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