Design system adoption measurement
Find out which of your design system components are actually in the product, and where the drift is.
ProductLayers reads your codebase and design files to show where design system components are used, copied or detached, for design system and front-end platform teams at companies with 20 or more front-end engineers.
No account. No card. No sales call.
- Reads both the codebase and design files
- Names where components diverge
- Adoption measured by product area
The problem
Companies invest heavily in design systems and cannot tell whether they are being used. Engineers copy a component and modify it, and designers detach instances.
Before long the product holds far more button variants than anyone believes. Nobody can quantify adoption, so the design system team cannot justify its existence or prioritise its work.
Who it is for
Design system teams
Teams who need to show whether the system is adopted, and decide what to work on next.
Front-end platform teams
Teams at companies with 20 or more front-end engineers who need to see where components are being copied and modified.
Design leaders
Leaders responsible for a design system that is supposed to be adopted, who need to see how far it actually is.
How much of your product actually uses the design system?
Put in where a component is used from the design system and where local copies are used instead, plus the variants you have found. See the adoption percentage, the extra variants and their upkeep. Runs in your browser. No account, no card, no call.
How it adds up
- Places the element is used
- 550
- Upkeep hours for extra variants a month
- 16.0 hours
Take this with you
No email required. It is your result.
ProductLayers — component adoption calculator · 73% of usages come from the design system · 12 variants in the product against 4 defined · Extra variants cost $18,240 a year to keep Run it yourself: https://productlayers.com
Method: adoption = design system usages divided by all usages of the element. Extra variants = variants found minus variants defined. Upkeep = extra variants x your hours per variant x your hourly cost, over a year. The counts and the upkeep time are yours, so the result is only as good as they are.
The design system as it really is in the product
ProductLayers reconciles code and design files so each component's true state is visible, with the divergences named.
Imports found in code
It analyses the codebase to find where design system components are imported.
Local reimplementations found
It finds where teams have reimplemented a component locally instead of using the design system version.
Detached design instances
It analyses design files to find detached and modified instances.
Design and code reconciled
See each component as defined in design, implemented in code and actually used in production, with the divergences named.
Adoption by product area
Adoption is quantified by product area, with the components most often forked and why.
Accessibility and token checks
It tracks whether accessibility and token compliance hold in real usage.
Pricing
The adoption report is free. Paid plans are priced per front-end engineer.
Adoption Report
Adoption percentage and variant counts.
- Most reimplemented components
- Unique variants of buttons and inputs
Per engineerRecommended
Adoption measurement across design and code.
- Divergences named
- Adoption by product area
- Accessibility and token compliance
Above 200 engineers
For large front-end organisations.
- Multi-repository analysis
- Design tool integration
Enterprise
For companies that will not send code externally.
- Self-hosted analysis
Prices in USD.
How it works
ProductLayers, from the first step to the result.
- 1
Connect a repository and a design file
That is all the free adoption report needs.
- 2
Get the adoption report
Adoption percentage, top local reimplementations and variant counts.
- 3
Reconcile design and code
Every component's true state, with the divergences named.
- 4
Track adoption by area
Including accessibility and token compliance in real usage.
Questions people actually ask
What is in the free adoption report?
From one repository and one design file, it returns the adoption percentage, the components most frequently reimplemented locally, and the count of unique variants of common elements such as buttons and inputs.
How does it find local copies of components?
It analyses the codebase to find where design system components are imported and where local reimplementations exist.
Does it look at design files too?
Yes. It finds detached and modified instances in design files and reconciles them with what is in the code.
Does it show why components are forked?
Yes. It identifies the components most often forked and why.
Can it check accessibility?
It tracks whether accessibility and token compliance hold in real usage.
What does it cost?
12 dollars per front-end engineer per month. Above 200 engineers it is 8 dollars per engineer, with multi-repository and design tool integration.
Can we run it without sending code outside the company?
Yes. The enterprise plan offers self-hosted analysis for companies that will not send code externally.
Why should I trust the component adoption calculator?
It is arithmetic on counts you take from a code search or a design file, worked out in your browser. It does not read your code; the free Design System Adoption Report finds imports, local reimplementations and variants from one repository and one design file.
How much of your product actually uses the design system?
Put in where a component is used from the design system and where local copies are used instead, plus the variants you have found. See the adoption percentage, the extra variants and their upkeep. Runs in your browser. No account, no card, no call.
Open the free toolIt runs in your browser. ProductLayers never sees your inputs.