The Design System Guide

Gathering the data

Metrics are the language of stakeholders and the evidence that we are maximizing the usage of our design system. Why and how to start measuring? Let's go step-by-step.

Before losing your mind about choosing between the set of metrics and getting a FOMO, keep in mind that, in the end, you only need to know three simple things.

Is the investment paying off?

Did we increase the component adoption?

Are we providing value with the design system?

Is the investment paying off?

Did we increase the component adoption?

Are we providing value with the design system?

Is the investment paying off?

Did we increase the component adoption?

Are we providing value with the design system?

Based on that, it is much easier to choose metrics that reflect your objectives and the overall KPIs of your business. However, the set of metrics you choose also depends on your stage of maturity, available resources, the type of organization, and system architecture.

This simple exercise is often the main showstopper because teams need to agree on the primary goal. The higher our adoption, the more resources stakeholders will be willing to give us to build the design system.

Don't put in metrics just because it will look fantastic to have many of them on your dashboard. If it's not an actionable metric, it's a vanity metric.

Don't put in metrics just because it will look fantastic to have many of them on your dashboard. If it's not an actionable metric,
it's a vanity metric.

Don't put in metrics just because it will look fantastic to have many of them on your dashboard. If it's not an actionable metric, it's a vanity metric.

It is best to track quantitative and qualitative metrics to get a comprehensive view. Quantitative metrics will give you numerical data on whether you are going toward your goal.
Qualitative metrics will help you understand the subjective side of the design system.

By combining both types of metrics, you will make better decisions.

Mainline coverage

56.12% coverage

+21.77%

Workspace

Add widget

This year

DESIGN SYSTEM XYZ DASHBOARD

objective INSIGHTS

Quantitative data

Quantitative metrics will give you numerical data on whether
you are going toward your goal.

Get overview into the

adoption rate.

Monitor and improve the effectiveness and adoption.

Monitor and improve the
effectiveness and adoption.

Have evidence rather than decisions based on "gut feeling."

Know what's working and what's not?

Know what's working and
what's not?

Measuring adoption in code

Measuring components in code is nothing new, and it is easy to pull out data and compare which UI components are most used. You can use Storybook for this.

Storybook

Measuring adoption in design

Understanding how users interact with UI components is crucial for improving the overall user experience and ensuring that the design system serves its intended purpose. Getting insights in the design phase makes it easier to decide where to steer the wheel in the future.

Figma

Figma offers Library Analytics where you can view detailed analytics on how members are using components. Styles aren't included in library analytics.

Source: Figma.com

The Figma REST API provides several metrics that you can use to track usage in Figma:

File access

You can track how often a Figma file is accessed, including who accessed it and when.

File access

You can track how often a Figma file is accessed, including who accessed it and when.

File access

You can track how often a Figma file is accessed, including who accessed it and when.

Page and component usage

You can track how often pages and components are viewed, edited, or shared.

Page and component usage

You can track how often pages and components are viewed, edited, or shared.

Page and component usage

You can track how often pages and components are viewed, edited, or shared.

User activity

You can track user activity in Figma, including when a user logs in

User activity

You can track user activity in Figma, including when a user logs in

User activity

You can track user activity in Figma, including when a user logs in

File collaboration

Track who is working on it, who is reviewing it, and who is providing feedback

File collaboration

Track who is working on it, who is reviewing it, and who is providing feedback

File collaboration

Track who is working on it, who is reviewing it, and who is providing feedback

Comment activity

You can track comment activity, including who is commenting and when

Comment activity

You can track comment activity, including who is commenting and when

Comment activity

You can track comment activity, including who is commenting and when

Team usage

You can track how often a team uses Figma, including how many files they access, ...

Team usage

You can track how often a team uses Figma, including how many files they access, ...

Team usage

You can track how often a team uses Figma, including how many files they access, ...

Here is an example in Python showing how to connect to the Figma REST API:

import requests

# Replace <YOUR-ACCESS-TOKEN> with your actual Figma API access token

headers = {

"X-Figma-Token": "<YOUR-ACCESS-TOKEN>"

}

# Replace <FILE-KEY> with the actual key of the Figma file you want to access

file_url = f"https://api.figma.com/v1/files/<FILE-KEY>"

# Make the API request to retrieve information about the Figma file

response = requests.get(file_url, headers=headers)

# Check if the request was successful

if response.status_code == 200:

file_data = response.json()

print("Successfully retrieved Figma file data:", file_data)

else:

print("Request failed with status code:", response.status_code)

import requests

# Replace <YOUR-ACCESS-TOKEN> with your actual Figma API access token

headers = {

"X-Figma-Token": "<YOUR-ACCESS-TOKEN>"

}

# Replace <FILE-KEY> with the actual key of the Figma file you want to access

file_url = f"https://api.figma.com/v1/files/<FILE-KEY>"

# Make the API request to retrieve information about the Figma file

response = requests.get(file_url, headers=headers)

# Check if the request was successful

if response.status_code == 200:

file_data = response.json()

print("Successfully retrieved Figma file data:", file_data)

else:

print("Request failed with status code:", response.status_code)

import requests

# Replace <YOUR-ACCESS-TOKEN> with your actual Figma API access token

headers = {

"X-Figma-Token": "<YOUR-ACCESS-TOKEN>"

}

# Replace <FILE-KEY> with the actual key of the Figma file you want to access

file_url = f"https://api.figma.com/v1/files/<FILE-KEY>"

# Make the API request to retrieve information about the Figma file

response = requests.get(file_url, headers=headers)

# Check if the request was successful

if response.status_code == 200:

file_data = response.json()

print("Successfully retrieved Figma file data:", file_data)

else:

print("Request failed with status code:", response.status_code)

Task completion

Task completion means that we want to compare how much time, on average, does each task take with and without a design system. If you are not tracking time without a design system, you will get vague results. Also, I can't imagine comparing my work because so many factors affect the overall. How task completion is measured and analyzed can significantly impact the validity and reliability of the results.

Instead, comparing time to market, time from the idea to prototype, and profit margins are much better indicators that we are faster and more effective.

But don't be fooled!

Numbers alone are not a sign of quality or success; they can't tell you the whole story. Some metrics lag heavily, so you also need to get qualitative data. Combine quantitative and qualitative data. Analyze. Talk to your teammates. Adapt. See the changes.

But don't be fooled!

REACT FAST

Warning signs

When you spot a downward trend for these three metrics, slow down, reflect, and react.

Slow or low adoption

When we notice that there is low adoption of a specific UI component, we have to talk to our team.

Do people know how to use our design system?

How are our current users satisfied with our UI components? What is missing?

How can we help them implement the design system in their workflow?

When the system gets updated, where do people get notified?

You might find out that it is not user-friendly, that code is not accessible, etc. If we still find out that there is no need to keep it, it is time to deprecate it.

Many detached components

Uh la la, someone likes creativity. Well, it is not always like that. If you notice that people detach components too much, it is time to update the component or change it.

A lot of bugs report

When we start getting a lot of bugs, we need more stability. Probably we didn't test our components enough, or some other factors changed. No matter what, react fast.

IT'S TIME TO TALK AND LISTEN

Qualitative data

Besides tracking and comparing, you should also understand the subjective side of the design system.

Feedback

Task completion means that we want to compare how much time, on average, does each task take with and without a design system? If you are not tracking time now, you will get vague results. I can't imagine comparing my work because so many factors affect the overall. How task completion is measured and analyzed can significantly impact the validity and reliability of the results.

Instead, comparing time to market, time from the idea to prototype, and profit margins are much better indicators that we are faster and more effective.

Code reviews

Conduct code reviews of design system components to ensure they are consistent with the design system'ssystem's guidelines and best practices. When you analyze all the data, you will better understand how well your design system (and other parts of the organization) is performing from different perspectives.

All the metrics you
need and more

Explore Design System Metrics

So, what is next?

Start according to your resources, and remember that no single set of metrics works for everyone. By now, you should already know what is essential for your business.