At Plus, our design system powers nearly every element within our app. When our first designer started, our product was a browser extension prototype built from a single Figma file. We immediately committed to building a design system in order to make our decisions faster, repeatable, and easier to change. Today, our team of two designers uses our design system to maintain our browser extension, web app, Slack extension, Google Slides add-on, and embeds. We all know why design systems are great for large teams. Here’s why they’re great even if you’re a team of one.
Make small decisions repeatable
Once your wireframing and sketching is done, it’s time to start creating the final interface that will be presented to users and testers. There are hundreds of visual decisions to make for even a simple screen and you can quickly become bogged down in the minutiae of padding, color, dimensions, and typography. How do you make sure that these decisions, once made, don’t need to be made again? Make your work reusable.
A design system reduces the number of small visual decisions you need to make every time you spin up a new screen, extension, or integration for the product. Instead of repeating the design process for an input field a dozen times, you can spend that time focusing on the unique aspects of a user flow. If you can spend most of your time focused on how to provide user value, you’ll end up with a much better outcome than if you spent that time designing multiple one-offs of a simple component. This is even more important when you’re part of a resource constrained early stage company. The time savings from using a design system can lead to faster experimentation for the entire company.
Efficiency of build
Creating a design system can help make design work faster, but it can also make your engineering team’s life easier as well. Being economical with components and variants means that there are fewer things for engineers to build and fewer things for the rest of your team to QA.
If you only ever use a handful of components in your product, there are fewer things for your engineering team to implement. Building an interface can be completed by copying and pasting old code. There are also fewer visual QA issues that pop up. You only have to build each component correctly once. This has a multiplicative effect on the entire team. People spend their time QA’ing complex flows and interactions instead of worrying about minor discrepancies in padding and color.
Adapting to new interfaces is fast and consistent
As a new company, you’re never really sure where your product is headed. You know your core value prop, but that can take a lot of different shapes and evolve over time. We build a lot of extensions and integrations here at Plus, and our design system has helped us quickly create brand new versions of our app in a way that is consistent and repeatable. The rules we’ve created around the use of primary and secondary buttons, popovers, and more have made it so that we’re never really starting from scratch.
Granted, there are times when you have to adapt to the guidelines and constraints of an existing platform. Our new Slack integration required us to rethink our product from the ground up in the context of a messaging app. However, in other instances where the interface is less prescribed, you’ll find that your design system cuts down your design and engineering time by a considerable factor.
Changes are faster and easier
It’s not always worth polishing the visual design of a component to a brilliant luster. Sometimes, you just need to get low fidelity components on the page so that you can start testing and experimenting. It’s tempting to skip componentizing and systematizing work that feels temporary, but you’d be doing future teammates, and a future version of yourself, a disservice.
A design system can make for a great onboarding tool for new designers. Having an organized library of every element makes it easier for others to understand the design patterns that exist within the product. It also makes it easier for new designers, or a future version of you, to improve upon those temporary decisions and quickly circulate their work throughout the rest of the product.
Even when we were a design team of 1, building a reusable system of design components helped us experiment and build quickly. In the space of a year, we’ve built a desktop web app, a mobile web app, a chrome browser extension, a Google Slides extension, embeddable content, and a Slack integration. Our commitment to using and maintaining our design system is a big part of why we’ve been able to design these interfaces so quickly. When we’re ready to grow our team, our investment in a design system will be a great help in doing so.
