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. |
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.
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.
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 .
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.
