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

From Zero to Cosmos

From Zero to Cosmos

The unabridged story of how a small style guide that was first introduced under the radar, became so appreciated by both developers and designers that it made its way to become a complex project of unification - a design system called Cosmos.

## This talk has been presented at Konect Design System meetup in London ##

Read the full transcript here:
- Part #1: https://badootech.badoo.com/from-zero-to-cosmos-part-1-2d080fe35bf2
- Part #2: https://badootech.badoo.com/from-zero-to-cosmos-part-2-97929e13f839
- Part #3
: https://badootech.badoo.com/from-zero-to-cosmos-part-3-95e2c98c45a6

Cristiano Rastelli

October 27, 2017
Tweet

More Decks by Cristiano Rastelli

Other Decks in Design

Transcript

  1. ... but Don't make it your* tool ! * let

    other people help and contribute, even if they will “break” it
  2. visible/tangible improvements • modularisation of components • reusability of code

    & components • speed of development • better visual consistency & overall quality
  3. problems we're trying to solve • Copy & Paste •

    code duplication & non re-usability • Small differences & inconsistencies • Obsolescence • No holistic view
  4. I have not been able
 to communicate
 the value, the

    importance &
 the real potential of a style guide
  5. he wasn't building a wall to protect his territory, saying

    
 "this is design, stay out of here !"
  6. Cosmos from Latinized form of Greek kosmos
 "order, good order,

    orderly arrangement" A complex orderly self-inclusive system,
 an orderly harmonious systematic universe.
  7. !

  8. design tokens { "global": { "type": "token", "category": "bricks" },

    "props": { "TOKEN_BRICK_BORDER_RADIUS_CIRCLE": { "value": "50%" }, "TOKEN_BRICK_BORDER_RADIUS_SQUARED": { "value": "11.4%" } } }
  9. +

  10. when in doubt, break down
 a component * Don't go

    “up” (using inheritance), or “sideways” (trying to cover too much)
  11. next steps • more and more coverage of the User-interface

    • From “zombie” to living, resuscitating the code • involve + onboard all the other developers • documentation, communication channels, etc.
  12. Components Jul 2017 Oct 2017 extrasmall 2 2 small 1

    5 medium 2 7 large 1 3 extralarge 0 2 overall* 9 61 * components + subcomponents LOC - components/jsx 204 2479 LOC - components/SCSS 529 1865 LOC - WEBSITE/jsx 479 2657
  13. next challenges • tracking, A/B Testing, animations (where? how?) •

    Define a more “formal” team structure and process • Integration with the other native platforms (how?) • Business/Management involvement (when? how?)