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 FigmaWe 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 Fluent 2 Web UI Kit Fluent design assets Fluent 2 iOS UI Kit Fluent design assets Fluent 2 Android UI Kit Fluent design assets UI kit organizationTo streamline our complex system of assets and maximize each file鈥檚 usefulness, we鈥檝e 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 librariesEnable the Fluent 2 UI kits from the Libraries dialog in the Assets panel. To ensure the UI kits are always ailable 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 ailable kits.
Designing with FluentComponents 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 ailable in the UI kits map to the code.
To learn more about variants and component properties, visit Figma鈥檚 help doc .
Styling with Figma VariablesThe Fluent 2 design language file houses global and alias styling variables鈥攃olor, stroke width, corner radius, spacing, and size tokens鈥攆or 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.