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.
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?
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.
Workspace
Add widget
This year
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
Measure production component usage to optimize your codebase and drive design system adoption. You can do that with Omlet.dev. It's pretty easy to set up your dashboard and customize it. You can start for free on their website.
Measure production component usage to optimize your codebase and drive design system adoption. You can do that with Omlet.dev. It's pretty easy to set up your dashboard and customize it. You can start for free on their website.
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.
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:
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:
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.
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
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.
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.
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.
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.
IT'S TIME TO TALK AND LISTEN
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.
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.
Component analytics and insights for React with Omlet.dev
Easily get instant usage analytics for your components. Understand how components across projects are adopted over time using ready to use charts.
All the metrics you
need and more
All the metrics you
need and more
All the metrics you
need and more
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.
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.
The Design System Guide Newsletter
Get new design system tips, tutorials, and insights in your inbox. No ads, no fluff.
© 2022 - 2025 The Design System Guide by Romina Kavcic
The DSG Newsletter
Get new design system tips, tutorials, and insights in your inbox. No ads, no fluff.
© 2022 - 2025 The Design System Guide by Romina Kavcic
The Design System Guide Newsletter
Get new design system tips, tutorials, and insights in your inbox.
No ads, no fluff.
© 2022 - 2025 The Design System Guide by Romina Kavcic