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

Style Guide Driven Development

861e71f9f52486eb8bba75261a923004?s=47 Azizi Yazit
August 28, 2019

Style Guide Driven Development

Style guide driven development starts from developing Living Style Guide from the earliest stages of development. The living style guide is a prototype that shows how user interface (UI) components will appear throughout the website or web application

KL JS meetup


Azizi Yazit

August 28, 2019


  1. Style Guide Driven Development

  2. And let the words fall out

  3. I’m Azizi Yazit UI Developer at esri Specialised in Component

    Library Angular & React developer Married and father of two beautiful daughters
  4. The GAP between designer and developer Photoshop illustrator sketch Axure

    Zeplin JavaScript HTML5 CSS3 Angular ReactJS CSS-in-JS
  5. Design-Dev collaboration Style Guide as IMAGE https://www.freepngimg.com

  6. Design-Dev collaboration Style Guide as PDF

  7. Design-Dev collaboration Style Guide as Wireframe

  8. Design-Dev collaboration evolution of the Style Guide as IMAGE as

    PDF as Wireframe
  9. Design-Dev collaboration Living Style Guide Source of truth for styles

    and guidelines Live in code, so it evolves with the apps Collaboration tool for developer and designer +
  10. Sample Living Style Guide https://seek-oss.github.io/seek-style-guide/

  11. Sample Living Style Guide https://polaris.shopify.com/

  12. Sample Living Style Guide https://primer.style/css

  13. Sample Living Style Guide http://styleguides.io/

  14. Living Style Guide Mark Dalgleish - design system journey At

    SEEK, we’ve been working on our living style guide for over a year now, with an ever-growing suite of React components. As you might expect, this has introduced a radical shift in how we think about visual design. Suddenly, we had a single source of truth, in code, easily installable, defining how our brand appears across dozens of disparate projects.
  15. Living Style Guide Diana Mounter - design system at Github

    Design systems have become core to the way we design and build at GitHub. Since 2011 GitHub designers have documented UI patterns and shared common styles. In 2012, CSS and other assets were packaged up into a Ruby Gem for use in GitHub websites — this package was named Primer.
  16. Style Guide Driven Development - SGDD "We are not designing

    pages, we are designing systems of components." - Stephen Hay - SGDD is about developing the components and documenting them into Living Style Guide from the earliest stages of Front End development. developing components Atom & Molecules documenting Storybook implementing Applications
  17. Atomic Design "Atomic design is methodology for creating design systems”

    ~ Brad Frost
  18. Atomic Design

  19. Recap At this point we already know about Gap between

    designer and developer Evolution of style guide Living Style Guide using Storybook Atomic Design
  20. SGDD Process SGDD provides a playground and a framework for

    development, isolated from the application’s implementation. This isolation encourages creating components in an abstract way, making them more reusable.
  21. Discover At this stage the LSG serves as a reference

    when creating designs. Designer would refer to LSG and considering to reusing or extending the atoms components or create the new atom component.
  22. Abstract Once the designs are ready to be implemented, designers

    and developers can use the style guide to discuss how the new features should be broken down into separate components. These is where activity like recomposing the molecules and introducing new component variants happened.
  23. Documenting & Integration Documenting This is the process where the

    component development started. With SGDD in mind the development is all about creating the component and documenting it in LSG. End of results, the LSG becomes both a framework and a playground. Integration Application developer (library implementor) uses the the atoms and molecules components by referring the LSG for code sample and implementation guide to come up with templates and pages. Its "plug and play" game.
  24. Live Demo Setup Angular Storybook - walkthrough tutorial Create a

    Component Create a Story Create a multiple applications Implement components
  25. Summary Serves as the Storefront that showcases all of the

    design system’s ingredients It helps everyone visualise the eventual outcome Single truth source for design and components It helps everyone integrate the style guide into their workflows The style guide can serve as a road map It serves as a marketing and education tool
  26. Resources Angular-storybook source code http://https://github.com/abumuawiyah/ng-playground/tree/kljs-sgdd Sample Living Style Guide using

    Angular-storybook http://https://ngdesignsystem.netlify.com