Overview
Style guides are a pain! As a static collection of css, colours and html patterns, they are hard to maintain and become outdated easily. There are tools that help in the generation of dynamic style guides, but they often fall to neglect. But what if there was a way to build a style guide that was central to the design, development and testing life-cycles?
In this talk Allan and Ned will cover the tools and techniques they use at Nulogy to create a shared design language between designers, developer and testers.
You will see how they use a library of Pure Components, React Storybooks, and CSS Modules to create a portable and reusable toy box of controls that designers can snap together to create UIs.
They’ll show how they synchronize this sticker book of components with their shared Sketch Symbols library. The result is designs that are consistent, predictable and trivial to implement in code.
In the end you’ll have an approach to creating and maintaining a style guide that benefits all members of your product team and accelerates collaboration, allowing you to focus on building great interfaces.
Objective
Share a technique for creating a living style guide that fosters a shared design language between designers, developer and testers.
Target Audience
Front-end developers, designers and testers.
Assumed Audience Knowledge
A basic understanding of React components and CSS. An interest in design and collaboration.
Five Things Audience Members Will Learn
- How to design components for reuse
- How React Storybooks work
- How CSS Modules help build portable components
- Storybook Driven Development
- Collaboration between teams and disciplines using self documenting coding practices
