Everyone is talking about the benefits of design systems and how they align teams, save time, and increase brand consistency. Examples people encounter over and over, like IBM’s Carbon or Salesforce’s Lightning Design System, seem to be built with every component you could possibly need in every language: HTML, React, Angular, even Windows Phone OS. These systems answer every need for their teams.
Starting your own design system can understandably seem overwhelming
Getting from where you are today to a gorgeous design system looks like an uphill climb involving a lot of effort and a giant budget. But I’m here to tell you that a small design system is not only achievable … in many ways it might be the preferable way for plucky teams to start.
Advantages of starting small
The biggest advantage of starting small? You can kick off a design system quickly. You shouldn’t need executive approval for budgets or buy-in from multiple teams. Find a tool to house your system — Storybook or our new version of Emulsify come to mind — put in a couple of components, and you’ve got yourself a design system!
What to put into your design system
A couple good candidates for starting your design system are your site’s header and footer. These things rarely change, and having them done can feel like a big win.
Next, define your site’s base typography, including paragraphs, lists, and headers. You don’t need to decide on everything, just whatever you consider the default styles.
Don’t fret about not having enough components to start. One of the goals is to grow over time.
You need to do two things to grow your design system: focus on adding more components and get buy-in from other teams.
Adding components
As your team works on projects, you’ll add components to your library. If you’re updating your team or faculty list page, maybe add a Person Grid component. The next time you need to add a list of people to your site, use that Person Grid. Use the time you save on design and development to tell all the other teams about this success.
Promoting your design system
You might think the value of a design system will sell itself, but that isn’t true. You need to advocate the value — to everyone. It will be up to you and your team to get on people’s radar.
Start by giving the design system a name to help it feel at home within your company. Not sure what to name it? Run a naming contest!
After your system has a name, promote it. You can do this by writing internal blog posts or memos, extolling the value that the system can create. When a new component is added, talk about the cost savings inherent in using that component. For example:
Every new Person Grid we used to deploy took us X effort. But now that we have the grid in the design system, it takes as little as Y effort, freeing the rest of our time to focus on more important parts of the project.
Ensure everyone has access to the design system by using an easy-to-remember URL. When your coworkers visit the site, they should be able to quickly see the value of the system. Don’t be afraid to promote the design system in the design system by talking about how reusing and adapting components saves time, reduces costs, and improves consistency. Show off how the design system helped make other projects a success.
One year later…
By the end of one year, if everything works as expected, you’ll find yourself with a design system that accounts for a large portion of the work you do regularly. You’ll also have shown the value of your system to everyone and gained interest and support from other teams.
When you reach this tipping point, it’s time to present the case for the company to officially adopt — and fund — your growing design system. Congratulations!
Curious about what a simple starter design system looks like? Here’s an example from our website.
Making the web a better place to teach, learn, and advocate starts here...
When you subscribe to our newsletter!