Meet Omlet: Component Analytics for Developers
Product News
Zeplin Crew
Oct 2022@zeplin
It was somewhere around this time last year, we were thinking how we can further help developers using Zeplin. “OK, let’s dive deeper into their workflows.” we said, and kicked off our research.
But what started out as a plan to find a new feature for Zeplin unexpectedly changed. We started hearing the same pain points again and again from the dozens of developers we were talking to.
Starting today, you can request early access to Omlet, a component analytics tool for developers and design system teams. Check out our website https://omlet.dev/ to learn more about our latest standalone product.
“With Omlet we have a better idea of where and how components are used, without going into the codebase or terminal, which makes collaboration with our designers much more efficient.”
Hoshi’ki,Software Engineer — Design System at Optimizely
This is what we heard from one of our early adopters Hoshi’ki — an engineer working on Optimizely’s design system.
During our research, we met with so many teams like Hoshi’ki’s who are building a library of components, a design system. Their goal is to drive adoption for these component libraries, but they were struggling from not having any visibility on their existing usage. We kept hearing the same questions from different teams:
“How is my component adopted over time?”
“What new components are emerging and which ones are being used?”
“If I update or deprecate this component, how would that affect my team?”
“Am I making the right improvements?”
All of these questions reflect the need for usage insights that can guide a team to improve their components, and then measure if these changes were effective.
So that’s what we focused on; gathering component usage insights directly from the codebase. Sure enough, great product teams like Segment and Productboard were already on to this. Yet, even if you are committed to collecting data or have an in-house solution, it requires engineering resources and maintenance which takes away focus from the core problem.
The result is that less than 16% of teams track metrics even though measurement is highly correlated with success. Omlet is here to solve that.
Introducing Omlet
Omlet enables developers to measure component adoption across all their projects and identify opportunities to improve them. It does so by scanning your codebase to detect components and their usage. Omlet then surfaces that data as customizable charts and generates a catalog of searchable components with their dependency details.
With this first iteration, Omlet is set out to help teams:
Measure component success: simple out-of-the-box charts to immediately track adoption. No custom scripts or visualizations.
Identify emerging patterns: find out which specific components are being created and used over time. Drill into which projects and teams are using them.
Make updates with more confidence: component dependency visualization provides a detailed view of where components are used so you can understand how a change can impact projects.
Here’s what Andre from Primer said after they started using Omlet internally:
“Having built a similar tool in the past in order to prove a design system’s worth to stakeholders, I’m happy I can simply use Omlet now and spend more time building components instead.”
Andre,Sr. Frontend Engineer at Primer.io
This is just the beginning. Thanks to the feedback we got from our very first users, we already have great ideas in mind:
Expand tracking to design tokens and component properties
Omlet currently only supports React — expand support to more frameworks
Go beyond usage analytics to support component-driven development
Let’s build great products with successful components, until next time. 🙋♀️
Fin
