What it does
Fluent 2 is Microsoft’s design system, with Figma UI kits and component libraries for web and native apps. Design properties map to code, and platform-specific guides cover installation and theming. The Fluent UI code repository uses the MIT licence; referenced fonts and icons have separate asset terms.
Pick the intended platform first: Fluent 2 separates React, Web Components, iOS, Android and Windows implementation routes. For React, install @fluentui/react-components, place a FluentProvider at the app root and pass it a theme. The guide includes a working button example and requires Node.js and a package manager.
In Figma, enable the Fluent 2 kits through Assets → Libraries. Components expose variants and properties that correspond to their code equivalents. The design-language file contains variables for colour, spacing, corners and other styling, including light and dark modes. Core, Copilot and Labs kits serve different design needs.
You can read the public reference without an employee sign-in. The Fluent UI code is MIT-licensed, with copyright and permission notices retained in distributed copies. Fonts and icons referenced by Fluent UI React have separate terms, so the code licence should not be treated as permission for every Microsoft asset.
Strengths
- Figma component properties map to code properties
- Platform guides include installation and theme setup
- Figma variables support light and dark styling
Watch out for
- Native libraries have platform and toolchain requirements
- The code licence does not cover all referenced fonts and icons
Best for
- Designers working with Microsoft’s interface system
Sources
- Fluent 2 Design System home (Oct 27, 2026)
- Start designing with Fluent 2 (Oct 27, 2026)
- Start developing with Fluent 2 (Oct 27, 2026)
- Fluent UI MIT licence (Oct 27, 2026)