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.

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.

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.

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.

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.

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.


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.

objective INSIGHTS

objective INSIGHTS

objective INSIGHTS

Quantitative data

Quantitative data

Quantitative data

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

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

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.

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.

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.

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 offers Library Analytics where you can view detailed analytics on how members are using components. Styles aren't included in library analytics.

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

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

Source: Figma.com

Source: Figma.com

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

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

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.
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
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
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:

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

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.

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.

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!


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!


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.

REACT FAST

REACT FAST

REACT FAST

Warning signs

Warning signs

Warning signs

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

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

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.

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

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.

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.

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.

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.

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.

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.

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

IT'S TIME TO TALK AND LISTEN

IT'S TIME TO TALK AND LISTEN

Qualitative data

Qualitative data

Qualitative data

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

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

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.

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.

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.

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.

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


All the metrics you
need and more


All the metrics you
need and more


Business

Return on Investment (ROI)
Clearly tied to financial value.
Return on Investment (ROI)
Clearly tied to financial value.
Return on Investment (ROI)
Clearly tied to financial value.
Company Scalability
How much did your company's capacity for workload increase after having the Design System?
Company Scalability
How much did your company's capacity for workload increase after having the Design System?
Company Scalability
How much did your company's capacity for workload increase after having the Design System?
Brand Reputation Improvement
People start to recognize your brand and learn how to use your products when you communicate with consistent visual language.
Brand Reputation Improvement
People start to recognize your brand and learn how to use your products when you communicate with consistent visual language.
Brand Reputation Improvement
People start to recognize your brand and learn how to use your products when you communicate with consistent visual language.
Brand Consistency Improvement
With a strong foundationDesign System), there will be less work to fix visual differences.The goal is to Increase familiarity with product design and drive repeat usage.
Brand Consistency Improvement
With a strong foundationDesign System), there will be less work to fix visual differences.The goal is to Increase familiarity with product design and drive repeat usage.
Brand Consistency Improvement
With a strong foundationDesign System), there will be less work to fix visual differences.The goal is to Increase familiarity with product design and drive repeat usage.

Product

Amount of Libraries / Library usage
How many libraries do you have? How many of them are in use? Figma offers Library usage trends.
Amount of Libraries / Library usage
How many libraries do you have? How many of them are in use? Figma offers Library usage trends.
Amount of Libraries / Library usage
How many libraries do you have? How many of them are in use? Figma offers Library usage trends.
The Total Number of Components
This one is easy at the beginning, when you need to track the progress of growing the design system. Later on, you don’t need more components, you need to improve the important ones.
The Total Number of Components
This one is easy at the beginning, when you need to track the progress of growing the design system. Later on, you don’t need more components, you need to improve the important ones.
The Total Number of Components
This one is easy at the beginning, when you need to track the progress of growing the design system. Later on, you don’t need more components, you need to improve the important ones.
The Total Number Component is Used Across Products.
This one is connected to the adoption rate. You want to reuse the component as many times as possible because you can start saving time.
The Total Number Component is Used Across Products.
This one is connected to the adoption rate. You want to reuse the component as many times as possible because you can start saving time.
The Total Number Component is Used Across Products.
This one is connected to the adoption rate. You want to reuse the component as many times as possible because you can start saving time.
Amount of Products Using Different Libraries
Design systems are challenging to build and maintain without understanding how designers use them. Figma offers a lot of insights into components and library usage. This helps you measure design system adoption before the product development process. Figma analytics.
Amount of Products Using Different Libraries
Design systems are challenging to build and maintain without understanding how designers use them. Figma offers a lot of insights into components and library usage. This helps you measure design system adoption before the product development process. Figma analytics.
Amount of Products Using Different Libraries
Design systems are challenging to build and maintain without understanding how designers use them. Figma offers a lot of insights into components and library usage. This helps you measure design system adoption before the product development process. Figma analytics.
Adoption Rate
What % of products use the design system? Compare by departments and teams. The more the design system it's used, the more days are saved.
Adoption Rate
What % of products use the design system? Compare by departments and teams. The more the design system it's used, the more days are saved.
Adoption Rate
What % of products use the design system? Compare by departments and teams. The more the design system it's used, the more days are saved.
Usage Statistics
Compare components usage in Figma, Github, your libraries.
Usage Statistics
Compare components usage in Figma, Github, your libraries.
Usage Statistics
Compare components usage in Figma, Github, your libraries.
Number of Component Detachments (Figma)
If some components are often detached, some user flows/scenarios are missing. Think about improvements.
Number of Component Detachments (Figma)
If some components are often detached, some user flows/scenarios are missing. Think about improvements.
Number of Component Detachments (Figma)
If some components are often detached, some user flows/scenarios are missing. Think about improvements.
Number of Snowflakes
Do components exist just because the designer had time to do them?
Number of Snowflakes
Do components exist just because the designer had time to do them?
Number of Snowflakes
Do components exist just because the designer had time to do them?
Average Task Completion Time
The time employees spend on completing the task (for example designing a new component). Try to compare before/after the Design System. How much did the time improve?
Average Task Completion Time
The time employees spend on completing the task (for example designing a new component). Try to compare before/after the Design System. How much did the time improve?
Average Task Completion Time
The time employees spend on completing the task (for example designing a new component). Try to compare before/after the Design System. How much did the time improve?
Average Time (from an idea) to Market
The time employees spend on completing the user flow. Try to compare before/after the Design System. How much did the time improve?
Average Time (from an idea) to Market
The time employees spend on completing the user flow. Try to compare before/after the Design System. How much did the time improve?
Average Time (from an idea) to Market
The time employees spend on completing the user flow. Try to compare before/after the Design System. How much did the time improve?
User Interface Design Consistency
With a strong foundation (Design System), there is less work for fixing visual differences.
User Interface Design Consistency
With a strong foundation (Design System), there is less work for fixing visual differences.
User Interface Design Consistency
With a strong foundation (Design System), there is less work for fixing visual differences.
Documentation Updates/Syncs
Update documentation regularly (as automated as possible); otherwise, a lot of info is lost.
Documentation Updates/Syncs
Update documentation regularly (as automated as possible); otherwise, a lot of info is lost.
Documentation Updates/Syncs
Update documentation regularly (as automated as possible); otherwise, a lot of info is lost.
Documentation Visits
Are your employees even reading your Documentation?
Documentation Visits
Are your employees even reading your Documentation?
Documentation Visits
Are your employees even reading your Documentation?
Amount of Products Using Different Libraries
This one is important. Imagine having a Design System in place, but no one would use it. This KPI shows how many products use the coded components (or libraries in Figma). You want to achieve the highest possible %.
Amount of Products Using Different Libraries
This one is important. Imagine having a Design System in place, but no one would use it. This KPI shows how many products use the coded components (or libraries in Figma). You want to achieve the highest possible %.
Amount of Products Using Different Libraries
This one is important. Imagine having a Design System in place, but no one would use it. This KPI shows how many products use the coded components (or libraries in Figma). You want to achieve the highest possible %.
Team Efficiency Improvement
Try to compare workflow before the design system and find out how much time it takes to complete the task/user-flow/app design now.
Team Efficiency Improvement
Try to compare workflow before the design system and find out how much time it takes to complete the task/user-flow/app design now.
Team Efficiency Improvement
Try to compare workflow before the design system and find out how much time it takes to complete the task/user-flow/app design now.
Conversion rate
How much did the conversion rate improve? Analyze what works and what doesn’t.
Conversion rate
How much did the conversion rate improve? Analyze what works and what doesn’t.
Conversion rate
How much did the conversion rate improve? Analyze what works and what doesn’t.
Accessibility Score
Create an accessible design, so users of diverse abilities can navigate, understand, and use your UI successfully.
Accessibility Score
Create an accessible design, so users of diverse abilities can navigate, understand, and use your UI successfully.

Qualitative metrics

User Interviews with Employees, Stakeholders
Find out how employees work right now. How do they communicate? Where do they find out about design updates? Who would use the Design System? Why and how would the Design System help them? Do this kind of interview again once you have the Design System in place.
User Interviews with Employees, Stakeholders
Find out how employees work right now. How do they communicate? Where do they find out about design updates? Who would use the Design System? Why and how would the Design System help them? Do this kind of interview again once you have the Design System in place.
User Interviews with Employees, Stakeholders
Find out how employees work right now. How do they communicate? Where do they find out about design updates? Who would use the Design System? Why and how would the Design System help them? Do this kind of interview again once you have the Design System in place.
Team Efficiency and Productivity Improvement Survey
Don't just compare numbers; send a survey. Do employees have more time for focused work, thinking about flows, etc.?
Team Efficiency and Productivity Improvement Survey
Don't just compare numbers; send a survey. Do employees have more time for focused work, thinking about flows, etc.?
Team Efficiency and Productivity Improvement Survey
Don't just compare numbers; send a survey. Do employees have more time for focused work, thinking about flows, etc.?
Tech Debt
After having the Design System in place, there should be less tech debt.
Tech Debt
After having the Design System in place, there should be less tech debt.
Tech Debt
After having the Design System in place, there should be less tech debt.
Design Debt
After having the Design System in place, there should be way less UX and Design debt.
Design Debt
After having the Design System in place, there should be way less UX and Design debt.
Design Debt
After having the Design System in place, there should be way less UX and Design debt.

Development

Design to Development Time (Handoff)
The goal is to speed up the process from design to handoff.
Design to Development Time (Handoff)
The goal is to speed up the process from design to handoff.
Design to Development Time (Handoff)
The goal is to speed up the process from design to handoff.
Average Task Completion Time
The time developers spend on completing the task. Try to compare before/after the Design System. How much did the time improve?
Average Task Completion Time
The time developers spend on completing the task. Try to compare before/after the Design System. How much did the time improve?
Average Task Completion Time
The time developers spend on completing the task. Try to compare before/after the Design System. How much did the time improve?
Linter Warnings
Number should be much lower.
Linter Warnings
Number should be much lower.
Linter Warnings
Number should be much lower.
Code Complexity
The goal should be to reuse the code from the Design System and decrease the cost of refactoring.
Code Complexity
The goal should be to reuse the code from the Design System and decrease the cost of refactoring.
Code Complexity
The goal should be to reuse the code from the Design System and decrease the cost of refactoring.

Adoption

Satisfaction Survey
Check reviews from different teams. How positive are they? How can you optimize workflows even more?
Satisfaction Survey
Check reviews from different teams. How positive are they? How can you optimize workflows even more?
Satisfaction Survey
Check reviews from different teams. How positive are they? How can you optimize workflows even more?
Contributions to the Design System
Design System gets more valuable with a collaborative team.
Contributions to the Design System
Design System gets more valuable with a collaborative team.
Contributions to the Design System
Design System gets more valuable with a collaborative team.
Participation in Meetings
Who is coming to the Design System “office hours”? Are people interested in participating?
Participation in Meetings
Who is coming to the Design System “office hours”? Are people interested in participating?
Participation in Meetings
Who is coming to the Design System “office hours”? Are people interested in participating?
Adoption Rate
What % of products use the design system? Compare by departments and teams.
Adoption Rate
What % of products use the design system? Compare by departments and teams.
Adoption Rate
What % of products use the design system? Compare by departments and teams.
Mainline coverage
56.12% coverage
+21.77%

Workspace

Add widget

This year

DESIGN SYSTEM XYZ DASHBOARD

What's your plan?

What's your plan?

What's your plan?

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.

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.

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.

Design System Metrics
Figma Community File

Grab the file ->