Alaska Airlines reaches new heights with the help of variables

Alaska Airlines is no stranger to innovation: In its 92-year history, it’s pioneered check-in kiosks, electronic bag tags, and mobile boarding passes. It was even the first airline to sell tickets online in 1995. Alaska’s forward-thinking approach makes for a smooth, convenient, and consistent customer experience—as demonstrated by its top ranking in the 2023 American Customer Satisfaction Index travel list.

Today, the challenge facing Alaska’s 45-person design team is upholding that customer experience across a growing number of interfaces, which includes the website as well as mobile, digital signage, and kiosks. To that end, Alaska’s design system, Auro, has been instrumental to ensuring consistent, impactful designs. And true to its willingness to adapt, Alaska has implemented variables in Figma, saving designers an average of 11 hours of work per week.

Getting aligned with the design system

With its previous tech stack consisting of Sketch and Invision, Alaska’s design system was a “bit of a Frankenstein,” says Dale Sande, Principal Engineer at Alaska. The library enabled engineers to meet correct design specs, but it fell short for designers. “Sketch and Invision lacked intuitive user experiences, tools for prototyping, and real-time team work,” says June Lee, Product Designer at Alaska. “Unlike Figma components, their concept of reusable widgets didn’t provide an elegant solution.”

Without a single source of truth, designers found themselves creating components and patterns that were several pixels off—in some cases, they adjusted the colors through a slider in the browser. It also meant that changes had to be copied and pasted from one platform to another. These manual approaches not only took longer, but also led to inconsistencies with elements like buttons, checkboxes, modals, colors, and date pickers—not to mention lapses in meeting accessibility standards. Collaboration suffered: While Abstract enabled designers to collaborate on Sketch files, they still struggled to find the right version. Cross-functionally, engineers became increasingly frustrated with receiving designs that didn’t match the website.

Since moving to Figma, Alaska has been able to establish a design system that provides the right documentation for both designers and engineers—a critical step to building a consistent digital ecosystem and innovating faster.

Triaging design needs in record time

Take the company’s flight status page, for example. When severe storms caused an onslaught of flight disruptions a few years ago, customers flocked to the previously underutilized flight status page, which lacked critical information like flight tracking and aircraft details. In response, a tiger team of designers and engineers came together to redesign this page. By drawing 90% of components from the Auro design system in Figma, the team pulled off in a single sprint what would have taken at least four or five sprints without Figma. Today, the flight status page is one of the most visited pages on the app, with the average time spent increasing a whopping 761% from 36 seconds to five minutes and 10 seconds.

Improving collaboration between design and development

“When we migrated to Figma, the initial selling point was that it could be the tool for designers to collaborate together,” says June. “As we started utilizing more and more of Figma’s design system features, we realized that we could bring engineering in as well and help them understand the design ideas behind Auro.”

Because designers can now reference the components that mirror the web components used by engineers, there’s both greater consistency in their products and more trust between teams. Brandon Shields, Product Manager at Alaska, says, “Beyond streamlining our processes, Figma allows engineers to be more confident that certain designs can be implemented easily.”

As June was establishing the Auro design system in Figma, she also built out documentation on how to use features like auto layout and merging and branching to increase adoption. “I really focused on education with our designers so they could understand what Figma could do,” she says. “I could see that designers were better utilizing Figma, and that meant fewer conflicts between designers and engineers.”

Lifting off with variables

The introduction of variables in Figma has empowered the design team to adapt its work for the goals of more than 23,000 employees, whether it’s accommodating various screen sizes, light and dark modes, or themes for different teams and external partners.

Before variables were launched at Config in 2023, designers had to recall the raw values for things like border radius, padding, and color. To improve handoffs, June would go to lengths like manually typing out the design token name in the description of the color style. Variables have made this workflow obsolete, and in her words, is a “huge step in bringing designers closer to the design system thinking and code.” With variables, both internal and external facing products can leverage Auro’s components with a customized theme.

With variables, the team can also create primitive, semantic, and component-specific design tokens to create new modes for each branded theme. The ability to change an entire design through modes is a game changer. Dale speaks to the value of no-code solutions: “We can really help designers understand the flexibility of what we can do with CSS variables and design tokens. By simply replacing a set of variables with a different set of values, we can drastically change the whole environment without actually having to edit any code. Previously these changes were walled off by the coding world.”

Forever forward-thinking, the team plans to leverage Figma in ever more powerful ways. “There’s a huge design effort underway to increase the number of design tokens, opening the floodgates for customization and theming,” says Dale. “We’re really looking to take advantage of what Figma is giving us today to power that process going into the future.”

True to its roots, Alaska Airlines is constantly moving the needle on innovation. The power of variables in Auro enables Alaska to achieve a more consistent digital experience, ship faster, and facilitate collaboration between designers and developers.