Design systems: From the basics to big things ahead
To prepare for Schema 2025, we combed through Shortcut archives to pull together our design systems greatest hits.
Share Design systems: From the basics to big things ahead
Hero illustration by Kelli Anderson
Design systems not only drive consistency at scale, they help bridge the gap between design and production. As AI accelerates workflows and helps push ideas further, having a codified foundation is more important than ever.
Schema by Figma, a design systems conference, returns this month. To help you gear up for a day of learning and conversation, we’ve pulled together an overview of resources that can help you get to the next level, no matter where you are in your design systems journey.
Start here: Design systems 101
As we look to the future of design systems, reflecting on the basics offers an opportunity to zoom out.
A brief history
Learn how the National Park Service adapted designer Massimo Vignelli’s seminal 1977 design system for a digital interface.
In the first chapter of Design systems 101, we review how design systems trace their roots to the early days of graphic design and print media, where style guides and typographic standards first introduced the idea of systematic design. As branding became vital for businesses in the mid-20th century, the need for consistent identity led to comprehensive brand guidelines. With the digital revolution, market leaders like IBM, Microsoft, Apple, and Google translated these guidelines from paper to pixels, ensuring that internal teams and third-party app developers adhered to operating system conventions.
Whether you’re on the journey to building your first design system, or looking to scale your existing one and measure its ROI, this series will help you get to the next level.
Driving adoption through documentation
Clear documentation transforms abstract design principles into practical guidance. This shared reference point gives designers and developers the confidence to use the system and drive adoption. For example, when the team at Alaska Airlines implemented their design system Auro, documentation was a top priority. They developed guidance on how to use key Figma features like auto layout and merging branches so that designers knew where to start, making adoption more seamless.
But documentation alone doesn’t guarantee adoption; it needs to reflect how different roles can use the system. Different people engage with design systems in different ways—some need detailed specifications, others benefit from high-level guidance or visual context. As more teams take part in the design process, clear and accessible documentation becomes even more essential.
Measuring the ROI of design systems
There are a few key metrics organizations can use to measure the business impact of a design system, including usage metrics, adoption rates, and consistency scores. For instance, when Veronica Agne, Senior UX Designer at athenahealth, looked at consistency scores to measure the value of her design system, she found an uptick in detachments for a container component. “If someone in our organization is detaching a component, I want to know why,” she says. “It can mean one of three things: There’s a bug, people want an enhancement to the functionality that isn’t there, or people are combining existing elements in ways I didn’t expect. I care about all three of those answers.”
Further reading
- Figma on Figma: How we built our website design system
- The making of the Figma Pattern Library
- How to streamline your design system workflow in Figma
- Six myths holding you back from embracing design systems
As AI democratizes product development, design will be the differentiator. But what exactly does “good” look like, and what does it mean for our craft?
Up next: Design systems in the AI age
For teams already using design systems—or working to justify the investment required to build and maintain one—the payoff grows exponentially when paired with AI. New AI tools can quickly translate code into designs and turn visual designs into working components. To do this accurately while avoiding tech debt, AI tools need context. Otherwise, AI-generated outputs can miss the mark, producing inconsistent artifacts that don’t align with design intent or guidelines. With the structured context that design systems provide, AI agents don’t just speed up the design process; they produce results that reflect on-brand practices. The outcome is smoother handoffs, less rework, and consistently higher-quality products. Design systems are the crucial foundations that unlock craft at scale.
Figma Designer Advocate Ana Boyer explains why design systems are the important context AI tools need to help teams work more efficiently without compromising craft.
Further reading
- Why you should care about design context
- Config 2025: Pushing design further
- Is your design system ready to scale?
In practice: Design systems in action
Learning from how other organizations build and scale their design systems offers both inspiration and guidance. These examples highlight real approaches teams can adapt as they shape their own systems.
Creating coherence: How Spotify’s design system goes beyond platforms
When Spotify expanded its product to include over 2,000 devices, the design need wasn’t just about ubiquitous coverage, it was about consistency. Juli Sombat, manager of design systems at Spotify, couldn’t design for just one platform; she needed to synchronize Spotify’s designs across mobile, web, TV, smartwatches, car displays, and more. Sombat’s team conducted an audit and diagrammed out what made each surface unique. For example, desktop had more real estate; TV differed because of the viewing distance; Watch required all the information to be condensed. During the process of defining components and documenting usage guidelines, Sombat began to view the pursuit of cohesion as the middle path between perfect consistency and total platform independence. In the end, the team developed a comprehensive system that served each platform’s unique requirements while maintaining the distinct Spotify brand.
How eBay built a bridge between brand and product with Figma
Beyond efficiency, design-code parity is how teams deliver higher-quality products, faster—and how you set a strong foundation for scaling with AI. Learn actionable strategies to help you get started, collaborate with developers, and build a system that scales with you.
When the eBay team set out to document their design system, they didn’t just want a reference guide—they wanted to create an experience where teams could find inspiration and excitement in their work. Announced in November 2024, eBay’s new design system Evo modernized the company’s 30-year-old design guidelines. The new “eBay Playbook” is over 300 pages of documentation that helps internal teams and agency partners effectively bring Evo to life. Implementing Evo offered an opportunity to not only redefine the look and feel of eBay’s design, but also to develop documentation to serve multiple audiences. Rather than separating brand and product guidance, the team created a centralized source of truth that married brand, design systems, and code together.
How Pinterest’s design systems team measures adoption
At Pinterest, Design Technologist Ravi Lingineni was looking for a way to track the success of Gestalt, the company’s design system, in order to quantify his team’s impact. He wanted to help design leadership at Pinterest understand whether the investment in design systems was paying off. To do this, Lingineni developed a new design adoption metric to track Gestalt usage. He used Figma’s REST API to build a tool which he named FigStats. It runs in the background every night, looking at all of Pinterest’s Figma files to tally up interactions with Gestalt. FigStats then produces an adoption percentage across the entire organization, giving the team a stronger sense, quantitatively, of what actually goes into the design process. The Gestalt team even open sourced their FigStats code to help other design system teams get started tracking adoption.
Further reading:
- How Polaroid is building its next era of innovation
- In good company: How publishers use Figma to help design the news
- How Crunchyroll clarified confusing workflows with Dev Mode
Join the conversation at Schema
For more on all things design systems, register for the Schema by Figma virtual livestream on October 28. Leaders and practitioners from across the design community will share their tips and takeaways for leveraging design systems to drive brand alignment, build bridges across teams, and unlock faster production cycles.
Our speakers include:
- Paige Costello, VP Design, Figma
- Nathan Curtis, Design System Expert, Directed Edges
- Loredana Crisan, Chief Design Officer, Figma
- Rachel Been, SVP of Design, Expedia Group
See the full lineup here and register to participate virtually.
Madeline Stafford is a writer and editor at Figma. She was previously a content marketer at Faire, where she told stories about makers and culture. Before that, she worked in the art world.
