The Basics of Design Systems
Miranda Koenig
So you're curious about Design Systems, or maybe you've never heard of this term before. No problem, but before diving into what a design system is, what does a product designer who works on a Design System do?! 🥴 Let's take a big leap back for a minute.
Product designers, also known as Digital Product Designers or UX Designers, think about the steps a user takes to achieve their goal or just navigate through a site. This is also called a User Flow or User Journey. Along with this, a designer creates the visuals of a web or mobile page; in some forms, you could even call us an artist 🤡. In short, they design web or mobile pages in tools like Sketch, Figma, or whatever works best for them and their team to then hand-off to front-end engineers and managers who will code, build, and launch said page. But designers do more than just make something look pretty, even though it seems that way sometimes.
Designers work with a Product team from the beginning to the end of a project, landing it right in front of you! This includes early research phases, collaborating with engineers, and more. The real question I want you to think about right now is where does a Designer pull their ideas from? How does a designer know that it is standard practice to always put a 'Close' button on the top right when you want to close a modal on a web page? 🤔
Side note: In the most simple description, a modal is a box that will pop up over the content of a page, asking you to take action. You see this a lot when arriving on pages that ask you to sign up for their newsletter (annoying, right?)Well, this is a standardization known in the industry after many years of errors, probably. While standardizations in design might have known common patterns, you also see consistent patterns unique to brands. This comes from that brand's Design Systems 🤩 so what is a Design System?
A Design System is a library of styled components tailored to product needs. Components, for example, are buttons, inputs, and more that are used consistently throughout a product or company. Design systems also include documentation and code assets that front-end engineers use to build the products. The whole team uses these components like lego's to put together a web or mobile page.
📝 The documentation is a crucial part of the system that helps clarify how-to's, things to avoid when using a component, and more.
💻 The code that matches the components' design allows front-end engineers to use those components within the page quickly.
Diving into how a design system functions, let's think about that modal again. Pretend you work at a big company, and you are asked to create a popup on a page and need a user to fill out an input field with their email. Then they'll need to hit submit. That, my friend, is thinking about the user flow. But to create this, we'll need to use that modal, an input field for users to type their email into, and a button to hit submit. Where do we start?
These components can be found in your Design System's library (yay!) You'll need to go through the library to find these. The beauty of having the library is you can focus on building this modal faster and not have to worry about the details. (There's more? Yes, there always is.) With the components from this library, you can worry less about how much spacing you need in the modal, the text style, color, and icons you would have to use. These are usually pre-defined in the component library (Oh geez, thanks! BUT not all libraries are the same or as detailed. Uhg!) Luckily, let's say your library is! 🙌
Once you find the modal, input field, and button that you'll need to use, you're on your way to building that annoying newsletter popup that everyone loves so much.
Some companies have public sites to view their design systems, but it may take a bit of knowledge to navigate as you'll need to know what to look for and what will work best for your needs!
So do you think you can recognize consistent patterns, buttons, and other usages in brands or companies' websites that might be part of their design system? Try taking a close look next time! 😏
ABOUT THE AUTHOR
Miranda is a Berlin based UX Product Designer at Wayfair. She’s worked on a variety of products within Wayfair and now focuses on the core design systems. She’s been at Wayfair for over two years and in Berlin for three. Originally from the San Francisco Bay Area, she moved to Germany for more experience and adventure. Check out her past work and adventures at @miranda.koenig on Instagram