How do you prove the value of your design system to leadership?
How do you track adoption in a way that actually reflects what users experience?

At Into Design Systems Conference 2025, Stefano Magni, Tech Lead at Preply Design System, shared one of the most advanced and thoughtful answers I’ve seen: Visual Coverage.

It’s not just about counting components in Figma
It’s about measuring how much of your product, as seen by real users, is actually built with design system components.

What is Visual Coverage?

Visual Coverage is a browser-based algorithm that runs directly on your users’ devices. It calculates how much of a given page is built with design system components. Not by counting DOM nodes or scanning codebases, but by analyzing rendered pixels.

Imagine coloring every component on the screen green if it comes from your system, and red if it doesn't. Then counting those pixels to get a percentage.
That’s the core idea.

This makes the metric:

• Product-oriented

• Real-time

• User-perspective driven
  

Why Preply Built It

Stefano explained the core problem like this:

“Design system metrics like token usage or static analysis are great — but they don’t speak the same language as product teams.”

Leadership cares about product data: conversion rates, engagement, usage trends. Preply’s platform teams needed something similarly tangible. Something to show where the system is used, how much, and where it's not helping enough.

So they built their own metric and made it open source.

How It Works

Here’s what makes Visual Coverage unique:

• Pixel-based analysis: Calculates how much screen real estate is taken by system components

• Component weighting: Not all components are equal. A primary button matters more than a layout div. Stefano built a scoring system using UI impact, interactivity, and accessibility

• Team-level breakdowns: Tracks system usage by product team, so support and follow-up can be targeted

• Live dashboards: Collected from 300,000+ measurements per day across Preply’s web and mobile apps

It’s implemented in pure JavaScript and works across frameworks. They even built a spreadsheet and a Figma file to help others get started.

What It Enables

• Clear visual dashboards to show system usage to stakeholders

• Insight into which teams are fully adopting the system — and which aren’t

• Strategic conversations: Do we need more components? Or better ones?

• A framework to support OKRs and adoption goals

• A way to surface whether your system is supporting the most important business initiatives

And because it runs on user devices, it scales across the entire product footprint — without depending on product teams to integrate tracking code.

What You Can Do Next

Here are some concrete steps if you want to try this approach:

1. Explore the open source visual coverage library

2. Build a component weighting model for your system

3. Start testing the metric on key flows

4. Visualize adoption across teams or areas of the product

5. Use insights to inform your roadmap and stakeholder communication

“Visual Coverage is not a judgment metric. It’s a success metric.” – Stefano

It’s not about blaming teams with low adoption.

It’s about understanding where your system helps and where it doesn’t (yet).

Get the Resources, Templates, and Miro Access

After his talk, Stefano shared even more resources in the official Into Design Systems Miro board, available to everyone who purchases access to the recordings.

Stefano also answered key follow-up questions from the community, including:

• What if we design products where we don't have easy or any access to user data?

• What is the definition of “impact” in the case of Preply’s design system? What exactly are you measuring?

• How do you track visual coverage on mobile apps?

• How are you using the visual coverage percentage to drive adoption? Is it part of product team goals or your own team's goals?

💡 Want to go deeper and see everything Stefano shared?

You’ll get access to:

• All recordings from the conference

• The shared Miro board

• Slides, templates, links and code examples

• Resources from 20+ other expert sessions

Learn about Design Systems, Design Tokens, Accessibility, Documentation, and more
👉 Get instant access to all recordings and resources

Don’t miss out!
The resources are exclusive to attendees and are packed with real-world examples and tools you can use right away.