Metrics
A guide for calculating design system costs
This guide aims to share helpful guidelines, formulas, spreadsheets, case studies, and tools to measure the pulse and costs of your design system. Plus, remember that survey I ran on design system costs? Stick around till the end of the blog post to see what the data says. Let's dive in!
How to calculate costs of the design system?
Step 1: Gather the data
Step 2: Create a spreadsheet
Step 3: Calculate and analyze
Step 4: Qualitative data
Step 5: Automated metrics, tools
Below, I'll explore each step in-depth.
Step 1: Gather the data
First things first, you need data. Though you may never feel you have "enough" or proper data, you must start somewhere.
↪ Are you already tracking?
Awesome, high five. 🙌 Dive into those numbers.
↪ Not tracking yet?
If you still need to start timing these tasks, you must make some projections and estimates. But don't let that stop you. Use industry averages or consult with team members to make educated guesses. Use Jira, Github, or billable hours for ballpark figures. It's not perfect, but you can refine these estimates as you start collecting actual data.
How long does it take designers to create new components?
How much time do engineers spend on asking designers for details?
How much time is spent on handoffs and change communications?
How long it takes to build a component and then a specific pattern (or user-flow).
The easiest way to make projects is to add number for components that you have a good overview.
Step 2: Create a spreadsheet
Ready to do the math for your setup? Create a spreadsheet, list components, and pull the numbers in.
↪ You can use my Airtable link, add numbers, and compare.
🖩 Also, an interactive calculator from Knapsack might give help you get an idea.
Step 3: Calculations
The aim is to get a clear picture of where your money's going. You can either:
Calculate the cost for the entire design system: This gives you a holistic view, ideal for budgeting and long-term planning.
Break it down per component: Sometimes is easier to estimate smaller pieces and then make estimations based on the number of components.
↪ Breakdown by component
Choose a component and add the average employee cost:
Developer (h)
Designer (h)
Design Technologist (h)
UX Designer (h)
User Testing (h)
UX writing / Copywriting (h)
Training (h)
Documentation (h)
QA / Review (h)
Maintenance (h)
↪ Breakdown by tasks
Example: Date picker
Research: $100 for approximately 1 hour of work
UI/UX Design: $400 for around 4 hours of work
Prototyping: $100 for about 1 hour of work
Front-end Development: $700 for about 7 hours of work
Testing: $100 for about 1 hour of work
Integration: $100 for about 1 hour of work
Technical Documentation: $150 for about 1.5 hours of work
Code Review: $100 for about 1 hour of work
Code Linting: $50 for 0.5 hours
Accessibility: $50 for about 0.5 hours of work
QA Test preparation: $50 for 0.5 hours
Functional Testing: $200 for 2 hours
Regression Testing: $100 for 1 hour
Total Time: 21.5 hours
Total Cost: $2,050
Design system platforms pricing
Remember to add the costs for managing Documentation. You can use third-party solutions like Supernova, Zeroheight, Specify, Backlight, Frontify, and Knapsack or build a custom one. I added all the prices for off-the-shelf solutions on the Airtable so you can compare them. Click here >
Now, to some math.
Formulas
Time Savings for Designers and Developers
Measures the cost-efficiency and time-saving aspects of the design system.
(Reported time savings / 100) x Total Hours x Number of Team Members × Average Hourly Salary
Costs
Get back to your list of billable hours and calculate totals.
Development cost
Q&A costs
Maintenance costs
Design costs (User Experience, User Interface Design)
Savings
Compare it to the time saved using a design system. It shows how many hours the company gets back.
Saved time in hours
Reduced bugs (h)
Reduced support tickets (h)
Onboarding savings (h)
QA Savings
ROI
Evaluates the financial viability of the design system.
(Total Savings / Total Costs) × 100
ROI can be low or negative in the first phases because of the initial investment. But be careful later on if it stays down - you are overengineering the process for your current setup.
Engagement Score
(Number of Active Users / Total Number of Users ) x 100
Frequency of Deliveries
Indicates how the design system affects the speed of product deliveries. Stack this up against your time-to-market metrics. The comparison will give you a fuller picture of your design system's impact on speed and efficiency.
New Frequency − Old Frequency
Delivery Time
It is not connected to money but will give a pulse on how you are doing.
Old Delivery Time − New Delivery Time
Time to market
Shows how fast you can roll out new stuff. You should definitely be able to ship faster.
Time to market before the DS - Time to market with the DS
Time to prototype
Speeds up that crucial first step to get stakeholder buy-in. Faster prototypes can mean faster green lights.
Time to prototype before the DS - Time to prototype with the DS
The most important thing is to align the metrics with the organization's goals. Combination of Time-to-market, idea-to-prototype speed, and profit margins will tell you if you're actually moving faster and killing it. If cost-saving is a priority, focus on efficiency and financial metrics. If improving product quality is the goal, then quality metrics should be at the forefront.
Design system metrics
I already created the list of all the design system metrics as an inspiration what exists. Check them here.
___________
The design system saved us 320,000 hours.
Case study from REA Group
___________
Step 4: Qualitative data
Your design system isn't just numbers; it's about how it vibes with your team. We can measure everything possible, but if the design system is separate from building the product, we didn't do anything. One of the biggest recurring lessons from my conversations is to talk to your coworkers more and more. Tweak your approach. Watch the magic happen.
Assess the overall quality of design and development projects before and after the design system's implementation. Look for improvements in aesthetics, usability, and functionality.
User Satisfaction:
Conduct surveys and interviews. Check the pulse.
How easy is it to find the components or guidelines?
How easy is it to work with components and variants?
Do you know how to set up libraries in Figma?
Do you use prepared components, or do you still start with wireframes?
Do you still get questions like, "What are design tokens and variables 😅"?
How can we make our design system a seamless part of their day-to-day?
Are you aware of our tech stack?
Do you know the guidelines?
Do you feel everything needs to be simplified?
Do you need more guidance?
Consistency in Design:
Review a range of projects to see if the design elements are more consistent across the board after implementing the design system.
Ease of Collaboration:
Talk to team members about whether the design system has made it easier to work together.
How well are we collaborating?
Do we have cross-functional teams?
Are there fewer misunderstandings and smoother handoffs?
How easy is connecting with the design system team and getting feedback?
Code Reviews
Do we have fewer code reviews, bugs, QA tests, …?
Are we leveraging the power of automation? 🤖
Onboarding Experience:
Ask new hires about their experience learning the guidelines.
Is it easier to understand and apply because of the design system? You can also measure (and compare time) that it took you before and after.
___________
Cost Savings after implementing design system
190K per project
$3.5 million across the projects
(June - December 2018)
___________
Now let's check the results of the survey.
Results
Data: 52 survey responses plus six interviews.
Company size
60% Big Leagues (500+)
13% Mid-Size (100-500)
27% Small Crew (50-100)
Do you use an in-house design system or a third-party one?
60% Custom
40% Both (Custom + Off-the-shelf)
How many components does your design system have?
10% Bare Bones (1-10)
20% Mid-Range (50-100)
30% Loaded (100+)
40% Just Right (30-50)
How often are components updated?
50% Weekly
20% Monthly
20% Quarterly
10% Once per year, hopefully
Do you measure the ROI (Return on Investment) of your design system?
66,7% No
33,3% Yes
Small Biz Reality
Most small companies are clueless about design and dev costs. Often, it's a solo act juggling design tokens to branding.
Scale to Save
Multi-brand systems and multiple products are where the real savings kick in.
ROI and Performance Metrics after design system implementation
Organizations with 100-500 Employees:
Cash Savings: average of 46% drop in design and dev costs
Speed: 22-35% faster time to market
Design Efficiency: 31% higher on average
Dev Efficiency: 27% higher on average
Organizations with 10-50 Employees:
Cash Savings: average of 15-30% drop in design and dev costs
Speed: 17-25% faster time to market
Design Efficiency: 26% higher on average
Dev Efficiency: 21% higher on average
Some smaller companies reported having less data, but they still increased conversion rates. Credit? More time to focus on better UX and design.
More reported benefits of having a design system
Savings
Faster design and dev
Faster time-to-market
Optimized design process
Streamlined handoffs
Cost savings for doing the wireframes
Onboarding savings
Improvements
Higher User engagement
Better UX
More prototypes
More launched projects/features per year
Less redundant tasks and busywork
Improved employee productivity
Business
Increased LTV
Increased Gross Income
Increased ROI
Increased Sales
Increased Conversion Rates
___________
"It was easy to convince our stakeholders with the concrete documentation."
Laurent Thiebault, a Tech Lead at Decathlon on
Scaling Decathlon’s design system with zeroheight
___________
Step 5: Tools and apps for tracking design systems
Before we dive into the tool talk, let's get one thing straight: what works for one team might not work for yours. Your tech stack depends on a bunch of stuff:
Platform Count: Web, mobile, or both?
Code Speak: What languages do you use?
Documentation: Custom-made or off-the-shelf?
What you're measuring: Are you tracking design, code, or both? The focus shapes the tools you'll need.
Unfortunately, we can track where the money goes, but we want to monitor the design system to understand where our ship is sailing.
Tracking components in design
Figma
You can measure adoption using Figma Analytics (Figma API). Track how your team's vibing with your published libraries and components.
Image from Figma.com
What you can do with Figma analytics:
Spot MVP components and variants.
Catch detached components.
Uncover the underdogs— under-used components.
Know which teams are library regulars.
Pit two libraries against each other—see who wins.
Find real-world component examples to beef up your docs.
Library metrics:
Team Count: How many teams are diving into your library.
Components: Total main components you've got.
Style Inventory: Count of styles in the library.
This Week's Buzz: Inserts in the last 7 days. Yep, how many times folks pulled components into their files.
Heads up—library analytics have some blind spots. Styles aren't on the radar, and neither is component usage in other people's draft files. Nested components? They don't count as insertions. If you duplicate a file, the initial insertions get a pass.
Tracking adoption in code
Does 100% adoption mean you are the winner? No, things can still be chaotic. However, positive feedback (from qualitative research) and a higher adoption rate are good signs.
Primary metrics for adoption:
Instances of components over time
Instances of deprecated components
Usage of props on React components
Total number of components used in products
Total number of components
Progress of migration (components and custom typography)
Warnings (ESLint, stylelint)
___________
There is clear evidence of how design system helped us.
Cristiano Rastelli
___________
Image from Measuring the impact of a design system
Cristiano made an experiment where he scanned the git. He got the dates, the files changed, and the lines added or removed. He was combining LESS -> Python -> JavaScript -> the list of changes in JSON format. He used this data to make a chart. As you see, there is clear evidence of how design system helped us.
Storybook
Open-source and framework-friendly. It's the sandbox where devs can build and test UI components, minus the headache of the full app. Whether you're into React, Vue, Angular, or something else, Storybook's got your back. Expect hot-reloading, interactive docs, and a flexible API to supercharge your workflow.
omlet.dev
Omlet scans, you see. It scans for components and shows you how they're used. Think of it as an X-ray vision for your codebase with custom charts. Oh, and it's open-source.
React Scanner
React scanner statically analyzes the given code (TypeScript supported) and extracts React components and props usage.
First, it crawls the given directory and compiles a list of files to be scanned. Then, it scans every file and extracts rendered components and their props into a JSON report.
Explore the official repository >
Stylebit (in alpha)
Get a 360-view of your entire design system infrastructure. Track, measure, and decode the real impact. Know what's working, what's not, and where to steer next. It's not just about components; it's about making a meaningful difference.
CSS Analyzer Wallace
Initially built to analyze and track CSS over time, it is a versatile tool for monitoring your design system's real-world use and effectiveness.
Example metrics:
Color Check: Count those unique colors.
Font Metrics: Monitor the variety and usage of fonts
Media Queries: Have an overview of the breakpoints
Historical Data: Track changes over time
File Size: Keep an eye on that CSS file size
Looker
(Formerly Google Data Studio)
Dashboards. Credit: G2 Crowd
You can then use Looker as data analytics tool to process and share the metrics across the company. It's free.
Visual regression testing
Visual regression testing is your safety net for design consistency. Snap before-and-after shots of your UI components when you make changes. Spot the differences. Make sure your code tweaks don't mess up how things look across platforms and devices. For this, you've got solid options like Percy, BackstopJS, and Applitools.
Snapshot tests
Snapshot tests go beyond the visuals. They capture the rendered UI but focus on the data structure and content. Think of them as your guard against sneaky changes in component behavior or state. Jest is a go-to for snapshot tests, especially if you're in the React world.
💥 Warning signs
See these metrics dip? Hit the brakes and reflect what is wrong.
Low Adoption
Detached Components
Bugs, more of them
Wrap-Up: Keep These in Mind
The number of components will rise over time; be careful how many you approve. The higher the number, the higher the cost.
Five-year forecast? Good luck, Sherlock. Start small and stay practical, but with the main goal in mind.
Once you're in, the system's a game-changer. You're not just ticking boxes; you're doing work that matters.
That's it, folks. You're not just surviving the design system game; you're set to own it. Have a productive week 🔥
Additional reads