Design Systems & Why They Matter

[00:00:00]
>> Well, what is a design system? There's no industry definition for a design system. But if you hear a designer talking about a design system, they're most likely talking about the UI kit, the foundational elements like color and typography, grid, iconography, things like that. And when you hear an engineer discuss design systems, they're probably referring to the component library in the style guide.

[00:00:22]
But really a design system is kinda all these things. It incorporates pieces from design, pieces from engineering all wrapped up. So why do design systems matter? Why are they important? Why are we all here today? So everyone, regardless of circumstance, needs to be able to achieve the same results from your application.

[00:00:43]
They don't necessarily have to be able to do it in the same exact way, but you have to provide the means for them to accomplish their tasks. And design systems are gonna ensure that you have an accessible color palette, that your type scale is appropriate enough where people can actually go and zoom in on the browser and actually see your content.

[00:01:01]
And they have to be able to navigate your application with a keyboard and use it with assistive technology. So design systems help with those. Design systems facilitate consistency. So we live in a time when it's really common for large enterprise companies to own multiple products. If we think of Google, you could think of G Suite.

[00:01:21]
If you think of Gmail, Google Flights, all of those interfaces kind of all look the same. You can look at that and say, that's a Google product. And that's because they're using material design which is a design system. So having a system really allows your company to unify your different products and their brand identity.

[00:01:40]
Updating is no longer a pain in the butt when you have multiple products. You can update a style or an interaction in one place in your system. And then, it'll propagate out to every package or every products that's using it with just a simple update to your package.

[00:01:57]
Responsiveness ,so mobile devices account for about half of all web traffic worldwide, and so we need to make sure that our interfaces and our components account for different screen sizes. This one's a fun one, this isn't something I can just thought of before, but this is two fold.

[00:02:14]
So when you onboard new hires, having a design system that's well documented is really a great way to get them onboarded. It gives them an intro to all the technologies and all of the processes for getting up and running, essentially. But if you have multiple teams working on different products, and you're all using the same design system, you can take a developer from squad A, put them on squad B and there is zero time to get up and going.

[00:02:37]
So that's really, really useful. You're probably confused why flexibility is on here because I just said consistency is very important. And flexibility, I mean that's in terms of setting parameters on the different types of components that our engineers and our designers can use. So you can't just provide one button and that is it, right?

[00:02:58]
We need to provide different sizes maybe, or buttons that have status colors and things like that. So by providing boundaries on the flexibility, we're not restricting our designers or engineers, but we are giving them a set of tools that they can use. And then lastly is speed. So once you actually have your first big release, your stable release, to actually build new features and design new features is so much faster.