How Pinterest’s design systems team measures adoption | Figma Blog (opens in new tab)
Pinterest’s Gestalt design systems team created a “design adoption” metric to understand how widely its components are used during the design phase, not just after implementation. Code-based adoption metrics were limited to web components and often lagged behind design activity, while raw Figma instance counts lacked context. Using Figma’s REST API, the team built FigStats to measure Gestalt usage relative to all content in Pinterest design files.
Why Code Adoption Wasn’t Enough
- Gestalt’s existing adoption metric tracked component usage in code.
- Code provided concrete data about which components shipped and whether teams modified them.
- However, it had two limitations:
- It only covered web components, not Gestalt’s iOS and Android components.
- It took time for newly designed components to reach production code.
- Measuring adoption in Figma provided earlier insight into whether designers knew about and used Gestalt components across all platforms.
Defining a More Meaningful Adoption Metric
- Figma’s built-in library analytics reported:
- Component instances
- Component insertions
- Usage by team
- These were useful counts but did not indicate whether usage was significant.
- For example, 10 Gestalt components in a 1,000-node design represent only 1% adoption, even though the raw usage count is nonzero.
- Pinterest therefore defined adoption relatively: Gestalt usage compared with the total content in a design file or page.
- This approach helped distinguish isolated component use from meaningful reliance on the design system.
Building FigStats with the Figma REST API
- The Gestalt team used Figma’s REST API to inspect design files and identify layers originating from Gestalt libraries.
- FigStats aggregated this information into a dashboard for visualizing component usage.
- The dashboard enabled the team to explore adoption across Pinterest’s design work rather than relying only on manually selected examples.
- Measuring actual file content also helped reveal whether designers were using complete Gestalt components or recreating and modifying patterns themselves.
Using Adoption Data to Guide the Design System
- Design adoption became a way to evaluate the value and reach of Gestalt.
- Higher usage could demonstrate that investment in corresponding engineering components was justified.
- Low adoption could indicate that:
- Designers were unaware of an existing component.
- The component did not meet their needs.
- Documentation or discoverability needed improvement.
- A component required redesign or better cross-platform support.
- Because design precedes implementation, Figma usage could serve as an earlier signal than production code adoption.
Figma’s native analytics provide a useful starting point, but meaningful adoption measurement requires context. Teams should compare design-system usage with the total design surface, use the data to identify gaps, and treat Figma adoption as a complementary metric to code adoption.