React Round Up

React Round Up


RRU 068: Design Systems with Varya Stepanova

July 02, 2019

Sponsors


Netlify


Sentry use the code “devchat” for 2 months free on Sentry’s small plan


Triplebyte offers a $1000 signing bonus


Panel


David Ceddia


Lucas Reis


Leslie Cohn-Wein


With special guest: Varya Stepanova

Episode Summary

Today’s guest is Varya Stepanova, who started her career in programming as a front end developer in Russia for Yandex. Now she is an independent consultant specializing in design systems. For Varya, a design system is a systematic approach to providing coherent products under the same brand. The necessity of a design system for a company is dependent upon how large it is and how quickly it is developing. Varya talks about how a component library turns into a design system and shares some of her experience. She talks about how the concepts in a design system are influenced and created by the existing interface.

The panel discusses the importance of design system ownership. They all agree that the design system should be owned by either a team or a single person in order to avoid problems. Varya talks about dealing with breaking changes in a design system and the importance of working visual regression tests into a system. She shares a story about a time where broken code was released which ultimately lead her to find a way to automate visual regression tests. The panel discusses some solutions for dealing with the fact that the library is going to be used for multiple different projects and infrastructure technology tools available for a design system. 

Links


CSS


Visual regression test


Cypress


Storybook


Styleguidist


Percy


Gatsby


Metalsmith


Follow DevChat on Facebook and Twitter

Picks

Lucas Reis:


Webpagetest.org


SpeedCurve


David Ceddia:


Captain Marvel


Leslie Cohn-Wein:


Design Systems by Allah Kholmatova


Varya Stepanova:


Learn about service design and design thinking


Follow Varya on Twitter