Start designing

Create beautiful, cohesive Microsoft experiences using the Fluent 2 UI kits. Built in Figma, the Fluent 2 UI kits contain design assets that map to the code libraries. That means seamless handoff from design to development.


Fluent 2 in Figma

We use Figma to build and host our UI kits. Figma gives us access to the latest design features and optimizations and helps ensure your designs always stay aligned with Microsoft style.

Fluent 2 Core in Figma


UI kit organization

To streamline our complex system of assets and maximize each file’s usefulness, we’ve structured our UI kits into four distinct tiers, each with specific roles and guidelines.

UI Kit

Description

Fluent 2 design language

The source of truth for Fluent and Copilot design styling decisions inclusive of color, stroke width, corner radius, spacing, and size tokens.

Fluent 2 Core UI Kits

Code-aligned building blocks for web, iOS, and Android, ensuring seamless design-to-development handoff with structured, high-quality components.

Copilot UI Kits

AI-focused components and patterns across Web, iOS, and Android, aligning with Fluent AI and OneCopilot Mobile, designed to extend Fluent Core for AI experiences and foster innovation.

Labs UI Kits

Partner-led kits for web and mobile, where teams contribute, experiment, and bring visionary ideas to life.

Fluent UI kit structure

Enabling the libraries

Enable the Fluent 2 UI kits from the Libraries dialog in the Assets panel. To ensure the UI kits are always available in your drafts, automatically enable them in Account settings.

For assets shared across platforms, you can enable additional libraries, like Fluent Iconography and the Fluent Emoji kits. Visit the Microsoft page in Figma community for more available kits.

Figma libraries panel with Fluent libraries enabled

Designing with Fluent

Components are organized in the Assets panel. Most components are kept close to the surface and not nested more than two levels.

Figma assets panel with Fluent components

Variants and component properties provide component flexibility and allow you to optimize component configurations to your specific needs. The properties available in the UI kits map to the code.

To learn more about variants and component properties, visit Figma’s help doc .

Figma component variants panel on a Fluent button

Styling with Figma Variables

The Fluent 2 design language file houses global and alias styling variables—color, stroke width, corner radius, spacing, and size tokens—for web and mobile. Optimized for designer ease-of-use, Figma variables enables easy light/dark mode toggling and now supports styling assets for Fluent and Copilot.

Figma variable toggling for Mode, Theme, and Brand