Chapter 7
Metrics
Metrics
Metrics
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:
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
Product
Qualitative metrics
Development
Adoption
Workspace
Add widget
This year
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 ->