RRU 068: Design Systems with Varya Stepanova




React Round Up show

Summary: <h2 dir="ltr"><strong>Sponsors</strong></h2> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.netlify.com/">Netlify</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="http://sentry.io/">Sentry</a> use the code “devchat” for 2 months free on Sentry’s small plan</strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://triplebyte.com/react">Triplebyte</a> offers a $1000 signing bonus</strong></p> </li> </ul> <h3 dir="ltr"><strong>Panel</strong></h3> <ul> <li dir="ltr"> <p dir="ltr"><strong>David Ceddia</strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong>Lucas Reis</strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong>Leslie Cohn-Wein</strong></p> </li> </ul> <p dir="ltr"><strong>With special guest: Varya Stepanova</strong></p> <h3 dir="ltr"><strong>Episode Summary</strong></h3> <p dir="ltr"><strong>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.</strong></p> <p dir="ltr"><strong>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. </strong></p> <p dir="ltr"><strong>Links</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.w3schools.com/css/">CSS</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://medium.com/front-end-weekly/4-steps-to-visual-regression-testing-fe656d668ad9">Visual regression test</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.cypress.io/">Cypress</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/topics/storybook">Storybook</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://react-styleguidist.js.org/">Styleguidist</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://percy.io/">Percy</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.gatsbyjs.org/">Gatsby</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://metalsmith.io/">Metalsmith</a></strong></p> </li> </ul> <p dir="ltr"><strong>Follow DevChat on <a href="https://www.facebook.com/DevChattv/?__tn__=%2Cd%2CP-R&amp;eid=ARDBDrBnK71PDmx_8gE_IeIEo5SnM7cyzylVBjAwfaOo1ck_6q3GXuRBfaUQZaWVvFGyEVjrhDwnS_tV">Facebook</a> and <a href="https://twitter.com/devchattv?lang=en">Twitter</a></strong></p> <h3 dir="ltr"><strong>Picks</strong></h3> <p dir="ltr"><strong>Lucas Reis:</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.webpagetest.org/">Webpagetest.org</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://speedcurve.com/">SpeedCurve</a></strong></p> </li> </ul> <p dir="ltr"><strong>David Ceddia:</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.imdb.com/title/tt4154664/">Captain Marvel</a></strong></p> </li> </ul> <p dir="ltr"><strong>Leslie Cohn-Wein:</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.smashingmagazine.com/design-systems-book/">Design Systems by Allah Kholmatova</a></strong></p> </li> </ul> <p dir="ltr"><strong>Varya Stepanova:</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong>Learn about service design and design thinking</strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong>Follow <a href="https://varya.me/">Varya</a> on <a href="https://twitter.com/varya_en?lang=en">Twitter </a></strong></p> </li> </ul> <p dir="ltr"><strong> </strong></p> <p dir="ltr"><strong> </strong></p> <p dir="ltr"><strong> </strong></p> <p><br>  </p>