Bringing Quality Design Systems to Life with Storybook & Applitools
•Download as PPTX, PDF•
0 likes•838 views
** Full webinar recording: https://youtu.be/R6WnEzlMHac ** Bringing design systems and component libraries to life can be a large, challenging process without the right tools. On top of that, maintaining a high level of quality throughout those systems brings its own challenge. While there’s no shortage of ways to manually create a design system from scratch, doing so can be time consuming and can lead to technical debt when the system itself isn’t itself in a structure. Storybook is a tool for developers that helps bring design systems and component libraries to life, providing structured tooling and a web dashboard. It gives those developers, and even designers, a way to focus on each individual component while being able to see the system from a higher perspective. On top of that, Applitools is an automated Visual Testing solution that easily stacks right on top of Storybook with the Storybook Eyes SDK. With a single command, Applitools provides full test coverage for each component of your design system. Join Developer Advocate, Colby Fayock, as he walks through: How to take advantage of using Storybook to build scalable design systems How Applitools makes automating the testing of those components easy How to focus on building great experiences while automating quality checks with visual testing
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Bringing Quality Design Systems to Life with Storybook & Applitools
Similar to Bringing Quality Design Systems to Life with Storybook & Applitools (20)
More from Applitools
More from Applitools (20)
Recently uploaded
Recently uploaded (20)
Bringing Quality Design Systems to Life with Storybook & Applitools
- 1. Storybook & Applitools @colbyfayock Bringing Quality Design Systems to Life with
- 9. What are design systems?
- 10. Components
- 11. Images
- 15. How do design systems help?
- 16. Consistency
- 17. Focus
- 18. Efficiency
- 19. How do I get started?
- 20. Storybook
- 22. Easy to Set Up
- 23. Easy to Set Up
- 25. Documentation
- 30. How to maintain quality?
- 31. Challenges of Design Systems Maintenance
- 32. Challenges of Design Systems Maintenance User Experience
- 33. Applitools
- 44. Demo
- 45. Demo Create a React application Install and set up Storybook Install and set up Applitools Run tests!
- 46. Demo ✅ Create a React application ✅ Install and set up Storybook ✅ Install and set up Applitools ✅ Run tests!
- 50. Colby Fayock Developer Advocate @colbyfayock Thank You colbyfayock.com/applitools-storybook-webinar
- 52. Sign up for a free account! applitools.com
Editor's Notes
- Hey everyone We’re going to talk about design systems And how we can bring them to life While maintaining a high level of quality
- So who am I? I’m Colby Fayock. I’m the one hugging BB8 and Kylo Renn over there I work with the dev community as a Developer Advocate at Applitools You can find me pretty much anywhere on the web by just googling my name As I’m the only one in the world
- Let’s start off by browsing the web a little bit Here we have Airbnb The site is driven by a minimal UI that relies heavily on photography
- We can see that throughout their site We generally get the same look and feel While it’s hard to keep user generated photos consistent Any curated imagery from Airbnb all has the same style Any UI elements get the same treatment and color scheme
- Maybe you’ve used Airbnb to book your last trip Or maybe you’ve never heard of it before I would imagine you’re all pretty familiar with this page But you may or may not have noticed Any time you visit a Google owned page It looks like it was from the exact same team
- This goes for both their marketing pages Where you can get a peak at how tools like Photos and their marketing platform work
- To the actual UI of their applications Like checking up on my Google account Or using Google Drive to access documents
- But what both Airbnb and google are doing As well as a lot of other companies around the world Is they’re using design systems to create consistent experiences But what exactly is a design system?
- There’s not really a single thing that makes up a system But rather a collection of things And ideas that ultimately build a system Let’s break down a few pieces of what makes up a design system
- One common way people typically see design systems is through components If you’re not familiar with the concept of a component Each little building block of a website or application is typically created as a component So each piece you see here The search bar, the buttons, the inputs They’re all created as components You can even have components inside of components Like how the banner and the search bar have buttons inside of them But these are going to be the building blocks of a system
- It also includes the imagery used If you look at Airbnb’s marketing pages Meaning the images that aren’t from hosts uploading their photos They have a consistent look and feel They all have a sort of peacefulness to it that carry the same vibe and stylistic effects They all feel inviting making you want to go there and take a relaxing trip
- And all of these pieces generally build on top of a style guide The style guide can include really as much or as little as you want Sometimes people include components and images as part of a style guide Which is okay But typically a style guide focuses on design fundamentals Like typography - or making sure you’re using the same fonts everywhere Or colors - to make sure the colors all match and work well together This guide ultimately defines a set of guidelines Or loosely a set of rules That are used throughout the project
- And typically You’ll see these style guides, images, and components used to reflect a brand In this instance, we’ve been looking at Airbnb Where you can see these exact colors and components represented on their site
- I say usually because this isn’t always the case Where if you’re using an open source component library Like here I’m showing Bootstrap The styles are specific to the bootstrap theme Not a particular brand
- So components, images, styles... why is this even important?
- The first thing is consistency The hope and goal is that wherever you use airbnb You’re going to get the same look and feel You’re going to get the airbnb colors The same Airbnb font And the same style of images You know what to expect whenever you’re using their apps or websites And it’s connected to their brand
- By leveraging the design system You’re also allowing designers and developers to focus on bigger problems Because they don’t have to worry about what colors to use Or because they can pick out a component from a library They’re now able to spend more time on how to solve particular problems If it makes the most sense to add a date picker to the application They don’t need to solve the date picker They have one available They can think about where it makes the most sense to add it And how it’s incorporated into a user’s flow
- And with both that consistency and focus You pretty much by default get improved efficiency While you get more time to focus on bigger challenges You’re also able to more quickly iterate and get new work out You might not have to wait for a completely new custom design Giving the ability to rapidly get out new pages using existing systems This also helps when working with larger teams at scale Where there could be different teams working on different parts But rather spending that time with design review bottle necks You have pre-approved components that developers can use
- Now hopefully you found that as compelling as i do There are a lot of benefits to setting up design systems But how does one get started?
- As you might have guessed That’s where storybook comes in
- If you’re not quite familiar with Storybook yet It’s a JavaScript-based tool for developers to build UI components It supports a variety of UI frameworks like React, Vue, and Angular… the popular ones And provides a way to create and organize a library of components
- One of the cool parts about Storybook is they make it really easy to set up
- Let’s zoom in on that It’s just that simple command If you already have a project started Like if you use Create REact App Like we’ll see later Or Next.js You can run this init command And Storybook will first detect what kind of project you have Then install Storybook based on that configuration Like I said, we’ll dig into this more in a little bit here
- As you start building out your components in Storybook You begin to create a library of components This is useful for all stakeholders of a project Of course for developers, this is going to provide a focused environment to work in Designers can also work closely with the developers, or even in the code, to make everything perfect And testers also get a focused environment to work in And while integration is still incredibly important to that process It provides a great way With automated ways - wink That can help maintain quality with each focused component But like we talked about a bit earlier This gives you a great way to rapidly build new projects
- Which leads to this doubling as a form of documentation Storybook supports adding source code right into the project So you can hop in here And find which component makes the most sense It also has standard documentation formats allowing you to let others know how to use those components
- So this seems pretty cool right? Let’s see a few examples of who else is using Storybook
- Here’s an example of The Guardian Which is a popular news and media platform who needs their UI to be easy to read So people can easily digest current events
- Or Shopify The ecommerce platform Who’s design system is called Polaris They need to make sure they’re providing a reliable experience for both customers and shop owners
- And IBM Who’s design system is called Carbon They need to provide a consistent ui For their cloud services
- So as you could imagine Products like Shopify have a ton of different components And those components are critical for shop owners to be able to work on their site Or for people to actually go through and make purchases on those sites How can we make sure that when we’re building our components We can maintain a high level of quality?
- As great as it is to have the ability to easily add new components That number of components can quickly balloon Leaving you with a huge library Without enough developer time to maintain all of those How can you make sure things aren’t breaking before customers tell you?
- This also lends itself to user experience Often time you have dependencies between different components Or simply package updates That might change how a component looks If you’re not careful to check each component You might upgrade your CSS library And accidentally break a critical component When that component breaks That’s going to be broken *everywhere* that component is used Severely hurting the usability of your app Realistically, every developer shouldnt have to be responsible for every time a component is used
- This is where Applitools comes in
- Applitools is an automated visual testing platform Powered by AI might I add That automatically ensures you’re maintaining a high level of quality for your apps
- By running Applitools eyes on your project You’re using real images that show what the users of your website or app are actually seeing This is critical Where a broken image might not show up in a failed test But by using visual testing You can make sure you’re catching all user-facing bugs
- In our context, we’re talking about storybook of course But Applitools supports a wide variety of SDKs From web based testing frameworks like Cypress and Selenium To native platforms like Appium and Espresso Whatever testing framework you’re using Applitools likely supports And will help you get immediately productive
- But in our particular use case with Storybook It’s maintaining that quality for our library of components
- The way it works Is when you run applitools locally on your machine Or in a CI/CD process Applitools will first suck in all of your components from Storybook
- Once that happens It will use Puppeteer under the hood To render out all of those components
- Including taking DOM snapshots of all of those components Or the Document Object Model Which is the underlying tree of elements Inside of the browser
- But with those snapshots Applitools will use it’s Visual Grid Depending on your configuration To generate screenshots
- Where finally Applitools Eyes will use machine learning To compare those images And intelligently look for differences Where it will then show those differences In the UI
- So do to this You can use the Applitools Eyes Storybook It’s an npm package That makes it easy to install right inside to your node project
- And to see how that all works Let’s run through a demo of adding Storybook to a new React project from scratch
- So here’s what we’re going to go through We’re going to first set up a new React application We’ll use Create React app We’ll then install Storybook Where we’ll see what that actually looks like Then we’ll install Applitools for our automated visual testing Where we’ll run some tests and see how it works
- So let’s recap quick about what we achieved here We first successfully set up a new React app Where we installed and set up Storybook We also installed and set up Applitools Where we were able to run our first automated visual test Which was able to catch our UI bugs
- If you want to add Applitools Eyes to your project You can find the Applitools Eyes SDK on npm
- If you want to check out how this works We have a tutorial for Storybook right on applitools.com/tutorials
- You can also check out my tutorial on the Applitools blog Where I show you how to add Storybook like we did today To an existing project
- And that’s it If you want to learn more or chat about the talk You can find me everywhere at colbyfayock You can find all of the links I talked about today at the link here I’ll also tweet out this link so you can easily find it Thanks everyone