Design System Checklist

[00:00:00]
>> Once you prioritize your components, we're gonna start designing them, we're gonna start building them. And before we add them to our design kit, we wanna actually make sure that they meet certain criteria, right? The whole point of a system is to do things the right way, to be accessible to have everything we need to know before we develop them.

[00:00:19]
So, in terms of a checklist, I like having a checklist to say, hey, can all users, regardless of circumstance, use this component? How should a user, or how should a component respond when a user actually interacts with it? How can they interact with it? When and where should this component be used?

[00:00:35]
Where would I use a link versus a tertiary button which looks just like a link? What's the differentiation here? Are all of the different states, like the default or neutral state, the hover, focus, disabled, or all of those defined? Does this component rely upon any content? If so, you might wanna talk to like a content editor.

[00:00:54]
How about customization? If you have different products under a brand identity, you might have different colors maybe for each product, what aspects of our components can be customized? And then what happens if I resize a browser, or if I'm on a mobile device? What are the differentiating characteristics on those different resolutions.

[00:01:13]
And once it gets through design checklist, we've then got to build it. And this is pretty similar accessibility is gonna be the same. We have to make sure that it's keyboard accessible, I work with assistive technology. It has to be responsive, so we need to make sure we implement those designs.

[00:01:27]
Completion, does actually account for all aspects of design. We often get high fidelity designs from our designers and maybe it's not pixel perfect, that's a huge problem. If you think about it, all these little pixels, they add up and they can make a big difference. Error handling and prop validation.

[00:01:45]
So, what happens if someone passes around prop we're using TypeScript or we're using prop types? How do we validate the data coming into our components and what happens if someone passes the wrong kind of data? Also, do all of these work across all the supported browsers or do we need to include polyfills somewhere.

[00:02:01]
This is gonna vary depending upon your company. You probably have some set of browsers that you have to be compatible with. So just check on them.