Microsoft Adaptive UI

Adaptive UI represents the culmination of years of thought on organizing and associating design decisions.

I could talk or write about this for hours, in fact, I have.

Adaptive UI is a true systems representation of the exercise many teams go through when building a design system. The result of most design systems is a fixed and limited set of components backed by design tokens or equivalently represented visual design values. The process is often very manual and hides a lot of the underlying decisions that were made along the way.

The work I did here is not tied to any particular design system representation, and may actually be the only "system" any team needs to construct any visual design.

This is a sample of one of the tools I worked on to visualize the effects of adjusting the decisions that are inputs to the color system. The two core palettes, neutral and accent, are seen across the top. Those palettes are generated from a base color, then used as inputs to color recipes, which produce specific color values for UI elements. A common recipe pattern is to determine the colors for the rest, hover, and active states for different component types. For instance, an accent-filled button may pick the rest color based on contrast from the containing background color, then the hover and press color as offsets (on the palette) from rest. This results in the common lightening or darkening of a fill on interaction, but it's a true system that works equivalently in any scenario.

Adjusting individual parameters of the color system keeps the UI aligned with the design principles without manually determining what those values should be. For instance, change the base color for a palette and the entire palette updates to reflect that. Change a value representing the relationship between rest and hover and all components assigned that recipe will update. There is no longer a reliance on manually picking colors from a fixed palette and being limited by manually-created palettes and ending up with accessibility violations because the contrast fails. This used to be the most common bug before we incorporated this system into the core components.

This is just the tip of what is possible here. Any value or treatment you can imagine can be built into the system allowing for that definition to evolve over time as it surely will. It opens up possibilities for deep individual customization either for personal preference or accessibility need.

Figma components

Of course, no modern design system would be complete without a full set of Figma components. Here's an example of the Menu components, including a few common configurations as starters. All components were built with variants and properties.

All components are meticulously built for pixel-perfection and extensive customization options for different usage scenarios.

Keep reading to learn more about how the dark mode components illustrated are the same as light mode. No need to build two versions, and never fail contrast requirements or design intention with Adaptive UI.

Figma plugin

Support for Adaptive UI includes a Figma plugin where designers can apply the same recipes inside Figma as used in the coded components. All base and custom components (including Menu shown above) are styled for Adaptive UI. For instance, a simple tab navigation form layout using Figma components with Adaptive UI applied:

Adjust to dark mode by setting a “layer background” fill recipe on the container and applying the “Base layer luminance” design token:

Results in the Adaptive UI recipes running within Figma and updating the design visuals:

The plugin interface simplifies the value, but the luminance is actually a number between 0 and 100 and can easily accommodate darker or lighter "modes".

For this project I designed and built the algorithms and recipes on top of the FAST Design Tokens infrastructure, built the full set of Figma components, and the Figma plugin to apply Adaptive UI values during design time.

A lot went into this, and there's a ton more that would be difficult to summarize here, but if you're interested in my work I'd love to connect directly to talk about and demo it.