Fluent 2 ist Microsofts Design-System für Microsoft 365, Teams und Windows, 2023 als Nachfolger des Fluent Design System von 2017 erschienen. Es definiert globale und Alias-Design-Tokens, eine Schriftskala in Segoe UI und den Plattformschriften sowie Komponenten für Web, Windows, iOS und Android, im Web über Fluent UI React v9.
Fluent 2 Design System
Details
- Vollständiger Name
-
Fluent 2 Design System — die zweite Generation von Microsofts Fluent Design System
- Auch bekannt als
-
Fluent 2, Fluent UI (die Code-Bibliotheken), Fluent UI React v9
Kernkonzepte:
-
Zwei Token-Ebenen. Globale Tokens halten Rohwerte, Alias-Tokens tragen Bedeutung (Design tokens); in React erscheinen sie als
tokens.colorNeutralForeground1odertokens.colorBrandBackground. -
Plattformschriften auf einer Skala. Segoe UI im Web, Segoe UI Variable unter Windows, San Francisco Pro auf Apple-Plattformen und Roboto unter Android, mit einer gemeinsamen Skala von Caption bis Display (Typography).
-
Fluent UI React v9.
@fluentui/react-componentsmitFluentProviderund Themes wiewebLightTheme; Styles entstehen mitmakeStyles, das auf der CSS-in-JS-Engine Griffel aufbaut. -
Komponenten je Plattform. React und Web Components fürs Web, WinUI für Windows und native Bibliotheken für iOS und Android (Develop).
-
Licht, Tiefe, Bewegung, Material, Maßstab. Die fünf Eigenschaften des ursprünglichen Fluent Design System von 2017, dessen Materialien Acrylic und Mica Windows bis heute prägen.
- Wichtige Vertreter
-
Microsoft. Das Fluent Design System wurde am 11. Mai 2017 auf der Build vorgestellt, Codename Project Neon (The Next Web); Fluent 2 folgte im Mai 2023; Teams war damals schon damit neu gestaltet (SD Times)
Wann verwenden:
-
Teams-Apps, Office-Add-ins, SharePoint-Erweiterungen oder Werkzeuge bauen, die sich in Microsoft 365 zu Hause anfühlen sollen. In unserem Prior-Test importierte jeder Lauf mit Anker für eine Team-Einstellungsseite
@fluentui/react-componentsund gestaltete sie mitmakeStylesund Fluent-Tokens. -
Ein Produkt über Web, Windows und Mobilgeräte mit gemeinsamen Tokens gestalten
-
Als Gegenstück zu Material Design 3 und Apples HIG für Unternehmenssoftware
Häufige Missverständnisse:
-
v8 und v9 vermischen. Fluent UI React v8 (
@fluentui/react) ist in Wartung; v9 ist „a complete revamp of the library that has fundamental and structural changes from v8“ (Maintainer in Diskussion #23183). „Fluent 2“ lenkt das Modell auf v9. -
Fluent 2 mit der Optik von Windows 11 gleichsetzen. Acrylic und Mica sind Windows-Materialien aus dem ursprünglichen Fluent; Fluent 2 ist vor allem ein Token- und Komponentensystem über Plattformen hinweg.
Kritik:
-
Ein inkompatibler Neubau. Microsofts eigener Produktmanager Paul Gildea zu v9: „These improvements couldn’t have been accomplished in a simple backwards compatible manner“ („What’s new with Fluent UI React v9“, 2022). Nutzer beklagten in Diskussion #23183, dass Navigation, Datumsauswahl und weitere Komponenten in v9 zum Start fehlten.
-
Unfertig in Windows. Ross Rubin beschreibt in „Windows 11’s melding of the old and new is unfinished business“ (Fast Company, 2021) Fluent-Oberflächen, die über Dialogen liegen, die sich seit Jahrzehnten kaum verändert haben.
Aktueller Stand:
-
Fluent UI React v9 ist aktuell, Web Components v3 im Release Candidate.
@fluentui/react-componentserscheint laufend, im Oktober 2026 in Version 9.75.0; das Repository rät Nutzern von v8 zur Migration. Fluent UI Web Components 3.0 erreichte im November 2025 einen Release Candidate (Diskussion #34080).
