Download the 2024 How We Document report!

< back to all blog posts

How to measure your design system?

How to measure your design system?

So, you built a design system (or you are about to create one), and that’s great news! You may not be concerned about metrics at first sight, but this is a question you will face sooner or later (probably sooner).

So, why is measuring design work important? You will certainly need to demonstrate the benefits of your design system and provide some answers to these questions from senior leadership: How do you measure design work? How do you measure the success and the impact of a design system? How do you get the numbers in the first place?

Measuring a design system is not an easy task, and it can quickly become time-consuming. So here are some tips and ideas to equip you and get those magic metrics to help you grow your design system.

How to define your KPIs for your design system

Every design system is unique, and so is the way you will measure it. So before searching for data, or any metrics in your design system, let’s make sure we’re doing it correctly. Define your KPIs and what you need to measure for your design system: what are your ambitions? What are you trying to achieve or resolve with this design system? Is it about efficiency, collaboration, consistency, something else? How many projects and/or components to analyze? How many are designers/developers/product teams involved?

If you’re starting your design system, this is an excellent way to kick it off and focus people into building a clear roadmap for a successful design system. If you already have a design system in place, defining your system’s success is still a good idea.

First, invite all the stakeholders, managers, lead designers and developers; all the decision-makers can help you define the roadmap for your design system. The goal is to align everybody’s vision and get them to ask the right questions.
If you want to go deeper into this workshop, I strongly recommend this excellent article by Audrey Hacq about how to define and measure the success of your design system?

It is essential to structure your KPIs today to know what you should be measuring tomorrow. On that note, another suggestion would be to get some initial data before starting your design system, so you can have a benchmark and align people on what progress has been made so far (if any). How much time do your product teams need to deliver? What is the most time-consuming task your designers/developers waste time on? What is the feedback your users regularly suggest?

If you can, run interviews and surveys to understand your teams’ actual needs, issues, and main concerns regarding the design system. It will give you a base to start working on these metrics.

How to get quantitative data measurements?

Now that you know what you have to measure, you will need quantitative data to bring key numbers to your management about your design system’s efficiency.

Fortunately, design tools are on your side. And there are also some good tips you can implement to get accurate numbers from your design system.

Figma

If you use Figma with an Organization plan, well, lucky you! Figma provides some great analytics about the use of your libraries: how many components your product teams use, which components in a library are the most used, how many times components are detached and which ones, how many teams are using them, etc.
If you want to learn more, here is an introduction to the analytics in Figma and some other good tips and tricks.

Figma analytics dashboard
Figma analytics dashboard

A form for your library

If you don’t have a Figma Organization plan, don’t worry, you can still find some metrics. If you share your Figma, Sketch or Adobe XD component library, be sure not to publicly and freely host this file (on a Dropbox, Google Drive, or another cloud). At least not without making users request the file. That way, you can use a form to collect some data, but most of all, you will be able to track how much traction your library is getting.

This trick doesn’t only apply to design libraries. You can also use this technique for your code libraries too.

Google Analytics

Google Analytics is a powerful tool to give you some very rich and detailed information about your design system platform. Whether you have a custom platform or not, it’s excellent to understand the most visited pages, how much time users spend reading your documentation, what works well or not, etc.

If you use zeroheight with an Enterprise plan, well, lucky you again! We provide you with a Google Analytics integration to track your users’ use of your styleguide.

Google analytics dashboard
Google analytics dashboard

Hotjar

As for Google Analytics, HotJar is very powerful if you want more details about how your users look for information and understand their journey, pain points, and everything else to improve your design system. Teams can use Hotjar to track in-context feedback, display surveys, use recordings and heatmaps to understand user behaviour on their styleguides. A step towards treating your design system as a product! You can learn more about Hotjar integration at our help center.

Hotjar integration · Help Center

Hotjar integration on zeroheight

Engage your audience

Another way to get quantitative data is to share your backlog and ask your design system users what components or patterns they want next. Sharing your backlog with your community is an excellent way to visibility the roadmap and team vision. Still, it’s also interesting for you to understand their needs and priorities. Moreover, it will provide you with some key metrics about which area of your design system to focus on.

Coded script

If you already have some “real” coded components, here’s an excellent way to get some key indicators. Just like Figma analytics provides data about library components, you can build a custom script that connects up directly to you. It will help you track which projects use your system’s components, how many times, the most used components throughout projects, the reuse rate, which versions they are based on, etc.

Coded script analytics
A coded script example to get some metrics

One way to achieve this script is to use a prefix on your component’s name. For example, suppose your design system is named Flapjack. In that case, you could use a three-letter acronym and attach it to your component: fpk-button, fpk-input, fpk-footer etc. You can then call this prefix in the projects and clearly understand how your system components are used. A word of caution about this trick: it is not a good practice to use this prefix in React; you may prefer it with Angular.

You already have metrics

If you think you don’t have any metrics so far, you are wrong. You could start measuring right now how much time you and your team spend on designing screens, components, and flows, and the same as for developers. It’ll be a good starting point to compare tomorrow how much you saved designing the same screens, components, and flows thanks to your design system.

How to get qualitative data measurements?

Having quantitative measures is excellent, but adding qualitative data makes your whole narrative more compelling. There’s no ‘wave a magic wand’ way to get these kinds of measures, so, unsurprisingly, surveys and interviews are your best friend

Surveys

One of the key ways to get qualitative data is to ask your design system users directly. Enquire if they know about the design system, if they use it, if they find everything they need or if they feel something’s missing, etc. Valuable everything for improvement, but also highlight the tops and flops of your design system.

If you don’t know how to begin with surveys, we did a template to help you start. Feel free to use it as a basis and adapt it to your needs, organization, and constraints.

Design System Survey Measurement Template
Here’s a survey template you can reuse to measure your design system

As for the frequency, it depends on what you seek to measure:

  • If you’re expecting some progress or evolution, we recommend sending this survey every 6-month. A little tip: try to find a way to collect your design system’s users’ information (email, name, job, etc.), so you can reach out to them more easily to submit this survey. You can use the form for your library to achieve that, for example 😉
  • If you’re just curious about the use, you can directly share this survey on your design system platform as quick feedback. By the way, did you know you could embed a form to zeroheight’s footer to collect this kind of feedback?
Embed form in zeroheight
An example of our embed form 

REX workshop

Surveys are not the only option you have. You could also organize a workshop with your key users (product team, developers, marketing, etc.) to assess the design system. You can use design service methodologies to animate this workshop and collect feedback and ideas from the participants. It is another innovative way to create some adoption around your design system and engage your teams. Our recommendation is to animate these sessions once per year, maybe two, but feel free to adapt it to your needs. You can also use the 6-month survey to feed these workshops and synchronize your frequency with it.

How to use this data?

Collecting lots of data is one thing; knowing how to use it is another thing.

Consider all the metrics you’ll have as the currency for your design system. It will help you convince your management to invest more in your design system, give visibility to your teams, or prove how efficient your system is.

For example, if you measured the time spent on a project before the design system, measure it now to highlight the difference. Then, do the same with components: how much time you spent developing this component before, and how much time you need now to implement it. It can be a full table displaying the time-saving per component, and the same for projects to impress your management and reassure them that your design system is a good investment.

You can also use the data to share best practices with your product teams. Give visibility about how people use components with the Figma analytics. For example, you can create a regular meeting to review the use of the components and share metrics knowledge. Moreover, it’s another good tip to encourage adoption for your design system.

Closing thoughts

Measuring a design system is challenging and requires a lot of time to look for the correct data to analyze afterward, but it will be a true goldmine once you have all the metrics in your pocket. It is one of the essential levers for your design system growth and sustainability. Do not underestimate it; it’s more valuable than you think.

If you want to know more about measuring a design system, you can watch our webinar we hosted last week with our amazing guests Nathan Curtis, Maya Hampton and Gabby Hon.

Deisgn System Discussions Measurement Webinar
Watch the replay of our webinar about measurement