Design Systems with React and Storybook

Disclamier

What component can you use to do this?

How does the component work? What props does it get?

I wasn't aware that this component even existed

Design Systems?

react-

A Development and Testing environment that displays your components

Installation (React.js)

Write stories

When

to use it?

Visual test cases

Living styleguide to improve consistency

Allow your product owner to validate design

Advantages over a home-made solution

  • 10min installation from zero to a component exposed
  • Ecosystem of addons

knob

Edit props dynamically

storyshots

Snapshot testing of your stories for free

time

DEMO

@khriztianmoreno

Thanks 🙇🏼 🙏🏼 👨🏼‍💻

Introduction to react-storybook

By Khriztian Moreno

Made with Slides.com

Introduction to react-storybook

Internal demo at Mattersupply. A design system is a series of components that can be reused in different combinations.

  • 910

More from Khriztian Moreno