Figma
HomeProductEngineeringEditorial
Figma

Measuring the value of design systems

Clancy Slack
Clancy Slack

As a Data Scientist at Figma, I dig into customer data everyday to help our team make informed product decisions. Figma’s cloud-based platform gives us a unique advantage to rapidly learn through data and share those insights back to our customers. For example, we recently opened up the data around design system usage to our customers on the Figma Organization plan.

We wanted to make design system analytics accessible to our customers for two key reasons:

  1. Design systems are critical to helping teams unite around a single source of truth for assets that are used repeatedly within a product (in fact, 3/4ths of Figma’s enterprise customers are currently leveraging design systems across their entire org).

  2. Design systems are difficult to build and maintain without quantitative insight into how they are actually being used by designers.

We believe that with the right data, design systems teams are able to make better decisions about their shared libraries and components, resulting in more useful and relevant design systems.

As we worked towards releasing this feature, I found myself asking if there was a way to quantify the benefit of maintaining up-to-date and relevant design systems. We knew Design System Analytics would help customers work towards this end state, but was there something more we could measure about the value they’d be gaining? As someone who’s background involves designing experiments, I was excited by the prospect of doing some analysis working with our own design team to understand the impact of design systems.

I built the following experiment to quantify the amount of time a relevant design system can save designers.

Our hypothesis: A well-maintained design system means time savings for your designers

Each time a designer leverages an asset from a design system, they save themselves time by avoiding the following tasks:

  • Recreating something from scratch
  • Searching through old design files to look for an asset they know exists
  • Making micro-decisions around text style, placement, etc.

The time saved from avoiding these tasks can add up to a huge benefit for designers, allowing them to have more focus time on strategically impactful work.

The experiment: How we quantitatively measured a creative process

I created a scenario where designers were asked to design a screen that allows users to accomplish two different tasks within the context of a bank account aggregator app. Both tasks were tested to make sure they take an individual the same amount of time to complete, so while one person may complete both tasks in 8 minutes and another may complete both in 12, each designer acts as their own control.

Group 1 (2)
The sample homescreen designers were provided for this experiment.

The tasks were to 1) design a screen for viewing financial transactions and trends for a specific account, and 2) design a user flow for connecting a new account to your profile. All designers completed both tasks but were only given access to a design system for one of the two tasks. For the task without a design system we provided old design files that each designer could reference for the task - something we often hear designers doing.

Design System
The design system used in this experiment.

To eliminate any potential bias, we alternated which task designers were asked to complete first and gave them plenty of time to familiarize themselves with the assets before beginning each exercise. The prompts for each scenario were written to describe tasks the user should be able to do and did not prescribe what the designer should be creating.

We measured the time it took to complete each task and participants decided for themselves what was an appropriate stopping point to control for quality across both tasks.

The Result

We found that when participants had access to a design system they completed their objective 34% faster than without a design system.

It’s important to call out that the design system used in this experiment was directly applicable to the task the designers were given; it was up-to-date and relevant to what they were working on. As a result, we expect that this time-savings finding is the maximum time savings one would find in a real-world scenario.

I wanted to take this time-savings result one step further to make it more tangible for a real design team, like the one here at Figma. Figma has 7 Product Designers and based on their calendars they each get about 20 hours of focused design time per week, for a total of 140 design hours per week.

This means that if none of the tasks they’re working on have a relevant design system, they are able to do 140 hours of design work a week.

However, if every task they’re working on has a relevant design system, they are able to do 34% more design work in that 140 hours, giving them 212 design hours. That’s equivalent to adding another 3.5 designers to the team each week! In reality, Figma’s design team is probably somewhere in between, as they are using a design system that is relevant for some tasks and not others. As we evolve our design system to cover more use cases, and work to ensure all designers on the team are using it consistently, we can expect this to increase.

Investing in your design systems

While the value of design systems is generally accepted, our goal with this experiment was to take a quantitative approach to make that value more tangible. In addition to the time savings, this experiment also revealed a more qualitative benefit. Several participants commented that they felt more confident in their final design when they had access to the design system because they knew it was consistent with the product.

With the confirmation that design systems truly are worth the investment, it becomes more critical that design systems teams have the resources they need to make the best decisions when building and evolving their design systems. Figma’s unique insight into design system usage informs these decisions, enabling teams to build more relevant and up-to-date design systems that will have a meaningful impact on their designers’ efficiency. You can get started today with these tips for making the most of your design system data.

I had a lot of fun designing this experiment and helping our product team build Design System Analytics. As a Data Scientist, neither is technically part of my day-to-day role, but the ability to work on interesting data-related projects in other areas of the business is one of the best parts of being at Figma. If any of this peaks your interest, check out our careers page - we’re hiring!

Related Content

Thomas Lowry |
Opening up the data behind your design systems
Design System Analytics enables you to see library usage trends, compare libraries, and drill into component usage.
Thomas Lowry | Guides & Best Practices
Components, styles, and shared library best practices
Shared components and style libraries are the cornerstone to producing consistent designs with ease—this guide will help get you up and running with a collection of tips and recommendations.

Try Figma for free.